Optimización de imágenes para internet

¿Por qué optimizar las imágenes para internet?

La optimización de imagen reduce significativamente el tiempo de carga de las páginas web, lo que mejora la experiencia del usuario y disminuye la tasa de abandono.

Además, contribuye al posicionamiento SEO, ya que los motores de búsqueda favorecen los sitios rápidos y eficientes.

También permite un ahorro considerable de ancho de banda, algo especialmente importante para usuarios móviles o sitios con alto volumen de tráfico.

Por otro lado, al ocupar menos espacio en disco, las imágenes optimizadas reducen el uso de almacenamiento en los servidores, lo que puede traducirse en menores costos de alojamiento.

Asimismo, garantizan una mejor compatibilidad con distintos dispositivos y resoluciones, favoreciendo el diseño web responsivo.

Desde el punto de vista de la accesibilidad, imágenes bien optimizadas con etiquetas adecuadas facilitan la navegación a personas con discapacidades y mejoran la interpretación por parte de lectores de pantalla.

¿Cómo hay que hacerlo?

Las formas de optimización se basan en la modificación de los siguientes parámetros:

• Tamaño en píxeles o resolución.
• Modo de color.
• Nivel de compresión del formato de imagen elegido.
• Peso en kb.
• Recursos para distraer, justificar y/o atenuar la espera.

Para optimizar una imagen es necesario encontrar la mejor relación entre:

1. Calidad de visualización.
2. Peso de la imagen.
3. Espera del usuario.

1. Calidad de visualización

• Cantidad de pixeles o resolución.
• Cantidad de colores o modo de color: RGB / escala de grises / indexado
• Formato de almacenamiento: JPG / PNG / GIF

2. Peso de la imagen

• Límite aceptable: 200kb
• Límite traspasable con un buen motivo de descarga: +200kb

3. Espera del usuario

• 0.1 segundo: límite de espera para que los usuarios sientan que sus acciones causan efectos directos en un sistema informático (es decir, que el sistema responde instantáneamente).
• 1 segundo: tiempo máximo de espera de respuesta del OS o aplicación sino el usuario sentirá que el sistema es o está lento. 
• 10 segundos: límite de espera máximo para mantener su atención. Si absolutamente nada sucedió, el usuario tiende a pensar que algo no funciona bien y abandonará o recargará. 

Para tener en cuenta

Nombrar las imágenes con nombres cortos, sin mayúsculas, sin acentos y sin caracteres especiales.

Galería de imagenes

Imagen fotográfica / 637px de ancho para esta entrada / RGB / JPG / 128kb

Imagen fotográfica / 637px de ancho para esta entrada / Escala de grises / PNG-8 / 165kb

Imagen de origen vectorial / 637px de ancho para esta entrada / Indexado / PNG-8 / 13,9kb

Imagen mapa / 637px de ancho para esta entrada / Indexado / PNG-8 / 71,1kb

Imagen combinada / 637px de ancho para esta entrada / RGB / JPG / 129kb