Ilustrar cualquier web con buenas imágenes es crítico, especialmente cuando se trata de una tienda: los productos se venden muchas veces por su imagen, en ocasiones multiplicando las ventas dependiendo de la calidad de las fotos, su número o tamaño. Prácticamente nadie compraría un producto sin «ver la foto». Y disponer de buenas imágenes puede marcar la diferencia entre el éxito o el fracaso de ciertos productos.
Pero las grandes imágenes de calidad suelen estar enfrentadas al tiempo de carga de la página, debido a que necesitan que se transmita más información, por razón de su tamaño y la calidad de los detalles. Por eso conviene optimizarlas para exprimir al máximo lo que se puede obtener de ellas. Por suerte los consejos a seguir son muy básicos y fáciles de entender y hay multitud de herramientas gratuitas para ello.
- Las imágenes han de tener el tamaño exacto al que se van a mostrar, no más ni menos. Si el navegador ha de agrandarlas o reducirlas quedarán feas y «pixeladas», borrosas o se transmitirá más información de la estrictamente necesaria. Una técnica consiste en crear versiones a diferentes tamaños, usando siempre la más adecuada para cada página (imágenes completas, miniaturas, ampliaciones…)
- Cuándo utilizar JPEG, GIF, PNG… Por lo general las imágenes JPEG se emplean para fotografías convencionales, lo cual tiene que ver con que permiten ahorrar muchos KB a costa de cierta pérdida de información y calidad. Los GIF y PNG no pierden calidad y se usan solo para iconos y elementos similares de la página. Entre GIF y PNG la diferencia es que el PNG es mejor y más moderno (y los «GIF animados» ya no están tan de moda como en los 90), de modo que esa sería la opción a usar.
- Cómo minimizar los PNG. Se puede usar una herramienta como TinyPNG, que elimina los metadatos y reduce la paleta de colores al mínimo sin perder calidad en absoluto. Basta enviar los archivos para recibirlos considerablemente reducidos. Mano de santo.
- Si hay muchos iconos PNG, considerar como técnica avanzada agruparlos en un solo sprite. Un sprite es una imagen PNG grande de la que se pueden «recortar» imágenes más pequeñas al diseñar la página, por lo que se usa generalmente para los iconos. La ventaja –una vez la web es definitiva– es que se carga en un santiamén y mejora la velocidad general.
- Cómo optimizar los JPEG. El truco más conveniente es probar con diferentes valores de compresión para cada imagen – o un grupo representativo de ellas. En cualquier JPEG se ha de elegir un valor entre 0 y 100 como «calidad de compresión»; entre 40 y 90 es lo habitual. Sorprendentemente valores bajos como 60 producen excelentes resultados (y ahorro en información) mientras que 90 o incluso 100 pueden ser indistinguibles para los visitantes. Como herramientas para esto, además de Photoshop y similares servicios como Smush.it o incluso TinyPNG son muy buenas herramientas para esta tarea.
- Utilizar un subdominio o dominio diferente. Uno de los problemas de velocidad de las páginas con exceso de imágenes es que en las comunicaciones entre el cliente y el servidor se transmite más información de la necesaria, por ejemplo las famosas cookies cada vez que se pide una imagen. Una técnica muy sencilla es definir un subdominio o dominio distinto (ej. imagenes.mitienda.com en vez de www.mitienda.com) en el que no existan cookies.
- Confirmar que las imágenes se pueden cachear correctamente. Aunque parezca poco importante, asegurarse de que no se usan parámetros extraños en las URL de las imágenes (generalmente, un signo «?» seguido de algunos caracteres) impide que el cliente pueda cachear o guardar temporalmente las imágenes para ganar velocidad. El Page Speed Insights de Google realiza un análisis excelente elemento por elemento en este aspecto. Si algo está mal, se «chivará» y explicará cómo corregirlo.
Cumpliendo con estas siete técnicas se obtienen grandes ventajas: páginas que cargan más limpia y rápidamente, mejor calidad «percibida» y aumentar la «atracción» de la web hacia los visitantes que verán más rápido el contenido. No es algo que requiera más de una jornada de trabajo y la diferencia a nivel de fidelización y ventas puede ser notable.
{Foto: Smart Water – Product Shot (CC) Jason Parrish @ Flickr}
Nos encantará conocer tu opinión, pero primero tenemos que indicarte que los comentarios están moderados, y no aparecerán inmediatamente en la página al ser enviados. Evita, por favor, las descalificaciones personales, los comentarios maleducados, los ataques directos o ridiculizaciones personales, o los calificativos insultantes de cualquier tipo, sean dirigidos a los autores, a cualquier otro comentarista o la empresa propietaria de esta página. Estás en tu perfecto derecho de comentar anónimamente, pero por favor, no utilices el anonimato para decirles a las personas cosas que no les dirías en caso de tenerlas delante. Intenta mantener un ambiente agradable en el que las personas puedan comentar sin temor a sentirse insultados o descalificados. No comentes de manera repetitiva sobre un mismo tema, y mucho menos con varias identidades o suplantando a otros comentaristas. También, procura que tus opiniones estén relacionadas con lo que se comenta en esta entrada. Los comentarios off-topic, promocionales, o que incumplan todas estas normas básicas serán eliminados.