Optimizar imágenes: el gran drama del diseño web

¿Qué haría una web sin imágenes? Probablemente, sería ignorada por la mayoría. O quizá se convertiría en paradigma de la lectura en diagonal. Las imágenes son necesarias, ya sea para dar color a un artículo o aumentar el tiempo que los visitantes pasan en nuestra web.

¿Qué haría una web sin imágenes? Probablemente, sería ignorada por la mayoría. O quizá se convertiría en paradigma de la lectura en diagonal.

Las imágenes son necesarias, ya sea para dar color a un artículo o aumentar el tiempo que los visitantes pasan en nuestra web.

Pero las imágenes también son problemáticas. En parte, porque requieren de cierta optimización y esa optimización no está al alcance de todo el mundo. Ya sea por tiempo o recursos, un buen número de empresas comparten sus fotografías, gráficos, etc. tal y como les llegan. Y si ese archivo original es enorme o pesa un quintal, las consecuencias se pagarán tarde o temprano.

Contenidos

Consecuencias de la imagen sin optimizar

La imagen sin optimizar se caracteriza por sus dimensiones y su peso.

¿Qué necesidad hay de publicar una imagen del tamaño de un póster cuando las estadísticas de tu sitio indican que el grueso de las visitas llegan de resoluciones estándar?

A más grande la fotografía, más pesará esta. A más peso, más recursos consumirá, a más recursos, menor la velocidad de carga. Así, hasta que Google dice: paso de vosotros por lentos.

Un ejemplo de drama vivido por no optimizar las imágenes

Un cliente basó parte de su proyecto en la publicación de amplias galerías de fotos.

Hasta ahí, perfecto.

Ocurrió que, en una ocasión, desatendiendo mis consejos, publicó una galería que, sumado el peso de todas las imágenes, rondaba los 500 megas.

Una barbaridad.

¿Qué ocurrió? Que a la que la galería comenzó a circular por Internet, la web se cayó a las pocas horas. Había agotado los recursos contratados a su proveedor de hosting.

¿Qué hizo? Aumentó considerablemente los recursos del hosting para que este soportara la carga. Al día siguiente, la web volvió a caerse.

La solución, muy a su pesar, fue optimizar las imágenes. Se tarda poco y, en la mayoría de casos, es un proceso que aplicaciones como Photoshop automatizan. Así que solo tienes que introducir ciertos parámetros a tu gusto y sentarte a ver cómo se procesan las fotos.

Formatos recomendados a nuestros clientes

Existen muchos formatos que pueden dar juego en una web pero, sinceramente, solo os interesan unos pocos. Algunos conocidos, como los archivos .jpg. La mayoría de las fotos que haces en tus vacaciones terminan en este formato.

Lo ideal en estos casos es aplicar una calidad media, ya que los .jpg evidencian las optimizaciones. Nadie quiere ver un producto pixelado, ya que faltaría a la realidad, en especial, si deseas vender esa realidad.

Los archivos .png son fieles al original pero, a la que te descuidas, se vuelven pesados e inútiles en una estrategia de posicionamiento. Puedes jugar con la cantidad de colores que muestren y así adelgazarlos un poco, pero volvemos al tema de la fidelidad. Al hacerlo, notarás que los degradados se malogran y la calidad general disminuye.

Los archivos .png funcionan bien en tiendas online que ofrecen imágenes de sus productos con fondo blanco o transparente. Una silla en solitario puede rondar los 50kb, pero a la que muestras esa silla en un ambiente, lo que sería una foto de estudio, el peso del archivo resultante puede oscilar entre los 150-250kb. Una locura.

¿Cómo optimizar tus imágenes?

Internet está llena de aplicaciones online que te permiten reducir las imágenes a formatos populares.

Si empleas WordPress, también existen plugins que te permiten manipularlas y reducirlas considerablemente. Aunque no lo recomiendo, ya que cargar la web de herramientas que tú mismo puedes gestionar offline es lo mismo que dirigirte al bar de la esquina a que te muelan el café que has comprado en el supermercado.

También puedes contratar a Discursiva o cualquier otro profesional que trabaje regularmente con imágenes, fotógrafos y diseñadores gráficos, principalmente.

¿Qué tamaños deberían tener mis imágenes?

Tendrían que ser lo más pequeñas posibles.

Las fotos de artículos y productos no deberían superar los 100kb. Si pasan esta cifra, que sea por poco. Más de 150kb es una carga innecesaria y cualquier test de velocidad te tumbará la web por lenta.

Existen excepciones que sí o sí requieren imágenes grandes y de calidad. Hablo de las cabeceras de post y las diapositivas de los carruseles. Acostumbran a requerir resoluciones que pasan de los 1300px. Inevitablemente ascenderán a los 200kb.

Lo importante es que evites la tentación de subir imágenes que superan los 200kb. Y ni mucho menos publiques imágenes en el formato y tamaño que salieron de la cámara.

Piensa que si tu galería pesa 100 megas, cualquier usuario vía móvil gastará 100Mb de sus datos para visualizarla. No le hará maldita la gracia. Olvídate de esa creencia que ciertos sectores solo consultan webs en ordenadores de sobremesa. Dímelo con las estadísticas de tu sitio en la mano.

Nombres de las imágenes: la optimización silenciosa

El nombre que les des a tus imágenes es uno de los muchos factores que Google tiene en cuenta cuando posiciona tu página.

Mucha gente no lo tiene en cuenta y apartan, sin quererlo, a sus imágenes de las primeras páginas de busca. La numeración de cámara o el fatídico unnamed de las imágenes enviadas por correo son dos de los errores más comunes cuando publicamos imágenes.

Es muy sencillo darles un título propio. Y si ese título incluye la palabra clave por la que estás posicionando, mejor. ¿Qué trabajas con muchas fotos? Añádeles numeración, así de sencillo. Herramientas como Adobe Bridge disponen de un renombrador en masa que va de perlas en estas situaciones.

Algunas conclusiones al optimizar las imágenes

Dedícales algo de tiempo. Impide que la desidia o el desconocimiento publiquen en Internet imágenes de dimensiones innecesarias (a no ser que lo tuyo sean los wallpapers). Controla el peso, como te diría un dietista, y, sobre todo, que muestren cierta calidad, que van a representarte ante muchas personas.

Por Bill Jiménez

Copywriter y diseñador web con más de diez años de experiencia. Soy la cabeza visible de Discursiva y controlo lo bastante de marketing digital como para que tu marca o empresa salga beneficiada.