Las imágenes e infografías son palancas visuales en el diseño web. La tendencia hoy va hacia imágenes mucho más grandes para captar la atención del usuario, y ahí aparece el problema: esas imágenes consumen mucho ancho de banda y ralentizan la carga del sitio. Muchas veces no somos conscientes de los problemas que generan las imágenes mal cuidadas. El peso es el factor principal: consumo excesivo de ancho de banda y, sobre todo, ralentización de la web. Eso afecta usabilidad, conversión y SEO; la velocidad ya forma parte del algoritmo de posicionamiento de Google. Una web lenta y pesada genera un porcentaje alto de rebote, pérdida de usuarios y, en muchos casos, pérdida de ventas. En los últimos años Google da mucho peso a la velocidad de carga: cuanto más rápida sea tu web, más opciones tienes de posicionar.
¿Qué formato es el adecuado para optimizar una imagen?
Los formatos más recomendados para las imágenes son PNG y JPG. “PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes” según Wikipedia. ¿Qué quiere decir esto? Es un formato que conserva un rango muy amplio de colores (bitmap), lo que hace que siga manteniendo una calidad óptima. Este formato es muy recomendado para imágenes vectoriales como: logotipos, iconos, infografías, etc. Otro formato muy recomendado, sobre todo para archivos vectoriales como logotipos e iconos, es SVG: mantienen la calidad de la imagen y son escalables a todas las resoluciones. “JPEG (Joint Photographic Expert Group) es el nombre de un comité de expertos que creó un estándar de compresión y codificación de archivos e imágenes fijas. Además de un método de compresión, es el formato de imagen más común. ” según Wikipedia. ¿Qué quiere decir esto? Es un formato de compresión tanto en color como en escala de grises que pierde calidad para reducir tamaño. Este formato es recomendado para fotografías. *Se recomienda que las imágenes no midan más de 1080px ya que al momento de comprimirlas es muy probable que no lleguen a la optimización óptima (entre 100Kb y 200Kb).
¿Cómo se optimiza una imagen?
Existen varias herramientas para poder optimizar correctamente las imágenes. En este post os voy a comentar las que, por experiencia propia, sé que funcionan muy bien. Para diseñadores o personas que sepan cómo usar el programa Adobe Photoshop:
- Formato PNG-8: Imágenes sin transparencia:
- Formato PNG-24: Imágenes con transparencia:
- Formato SVG: Logotipos e iconos:
- Formato JPG: Fotografías:
Si queremos automatizar la optimización de las imágenes, personalmente recomiendo las siguientes herramientas:
- Kraken es una herramienta online para optimizar las imágenes. Tiene una API y plugins para diferentes plataformas que te harán la vida mucho más fácil. Además, el coste es realmente bajo para el tiempo que puedes ahorrarte:
- TinyPNG es muy similar a Kraken, con más o menos las mismas funcionalidades:
Optimizar imágenes pesa para tu web: las imágenes están entrelazadas con diseño, maquetación, programación y, ahora también, con la velocidad como factor de posicionamiento en Google.
