Una plática común con nuestros clientes es sobre el correcto uso de las imágenes. ¿Qué tamaño deben ser? ¿Es PNG mejor que JPG? ¿Debería usar Photoshop para ajustar el tamaño? Voy a tratar de responder todas esas preguntas y más en este artículo. Esto generalmente es considerado optimización de imágenes.
Formato de imágenes
Cuándo se trata de fotos, con muchos colores y contrastes, JPG siempre será el mejor formato para guardar los archivos. Es universal (se puede leer en cualquier software y hardware), permite compresión (será pequeño en peso y rápido de descargar) y no se ve mal en pantallas con mucha resolución. Es cierto, para cada una de esas características hay formatos mejores que el JPG, pero ninguno las incluye todas.
Solo tienen que aprender a usar la compresión adecuada, para que el archivo sea pequeño y todavía se vea bien. Por ejemplo, en Photoshop, pueden llegar hasta 50% sin mucho problema.
Si no tienen Photoshop, les recomiendo un sitio gratis que les comprime automáticamente (TinyJPG). Ideal para esas fotos que descargaron directamente de la cámara (hoy en día, el teléfono) que generalmente vienen con cero compresión.
Si el archivo está en PNG, mi recomendación es primero pasarlo a JPG y luego aplicarle la compresión.
Ahora bien, si usan WordPress, por defecto este va a crear varias versiones de la misma imagen (tamaños menores) con una compresión de 80%. La calidad no es muy buena, por eso recomiendo tratarlas primero con Photoshop o TinyJPG y después subirlas al sitio web.
Tamaño de imágenes
Dos aclaraciones primero: el tamaño se refiere al ancho y alto de la imagen, no a los Kilobytes. Y la medida que voy a usar es pixeles.
Por la naturaleza de la web, voy a enfocarme solo en el ancho de las imágenes. Mi recomendación es usar un máximo de 2000 pixeles de ancho en imágenes de orientación landscape (panorámica). El alto que sea proporcional a ese ancho. ¿Por qué 2000px? Porque el ancho más común de una página de contenido en un sitio web es cerca de 1000px y dos mil se ve bien incluso en resoluciones de mucha densidad (retina).
No recomiendo usar muchas imágenes de orientación portrait (retrato) en la web, pero si no hay más remedio, entonces usar los mismos 2000px de ancho (aunque el alto sea exageradamente extenso) o bien, usar la mitad y alinearlo a la derecha o izquierda.
La tendencia hoy en día es que las imágenes sean 1200px de ancho y 630px de alto.
Por cierto, una imagen con un ancho menor de 2000px no debería ser estirada a los 2000px. El tamaño de una imagen se puede reducir, pero no ampliar (porque “se pixelea”). Un mínimo de ancho que todavía pueden usar (y centrar para que no se vea mal en una columna de 1000px de ancho) es 700px. Ya menos que eso, es mejor descartarla.
Peso de las imágenes
Asumiendo que todos queremos un sitio web que sea rápido (que tome menos de 5 segundos en cargar completamente) y que tiene más de una imagen en sus páginas, deberíamos apuntar a archivos con un peso máximo de 250Kb. Ojo, esto es el máximo. Un archivo de 100Kb o menos es en realidad la meta deseable. Por eso recomiendo el formato JPG y por eso a menudo van a dejar sus imágenes a un ancho de 1200px en vez de los utópicos 2000px que mencioné antes (uno sacrifica calidad, pero se gana o mejor dicho, se pierde peso).
Imágenes descargadas de Facebook, Twitter, WhatsApp
Todas las recomendaciones anteriores son innecesarias si la imagen que van a usar la descargaron de un sitio web que por defecto reduce el tamaño y peso de las imágenes. Facebook, Twitter y WhatsApp lo hacen. De hecho, el problema con las imágenes de estos sitios a menudo es lo contrario, que la optimización es demasiado agresiva.
En otras palabras, si la imagen viene de esos sitios, pueden usarla tal cual.
Nombre del archivo de las imágenes
El nombre de la foto no tendrá mucho efecto en la rapidez de descarga, pero sí en temas como el SEO y la compatibilidad en general. Es recomendable siempre cambiarle el nombre a los archivos, especialmente si no tienen uno muy descriptivo (ejemplo, las fotos que descargan de Facebook, el nombre es una serie de caracteres sin sentido). Preferiblemente no usen caracteres del idioma español (como la letra “ñ” o tildes) y tampoco espacios. También se recomienda agregar las mismas palabras descriptivas en las opciones de title y alt.
Deja una respuesta