Codifique imágenes de manera eficiente

La sección Oportunidades de su informe Lighthouse enumera todas las imágenes no optimizadas, con ahorros potenciales en kibibytes (KiB). Optimice estas imágenes para que la página se cargue más rápido y consuma menos datos:

# De qué manera marca Lighthouse las imágenes como optimizables

Lighthouse recopila todas las imágenes JPEG o BMP de la página, establece el nivel de compresión de cada imagen en 85 y luego compara la versión original con la versión comprimida. Si los ahorros potenciales son de 4 KB o más, Lighthouse marca la imagen como optimizable.

# Cómo optimizar imágenes

Hay muchos pasos que puede seguir para optimizar sus imágenes, incluyendo:

• Usar CDN de imágenes
• Comprimir imágenes
• Reemplazar de GIF animados con video
• Carga diferida de imágenes
• Servir imágenes receptivas
• Servir imágenes con las dimensiones correctas
• Usar imágenes WebP

# Optimizar imágenes usando herramientas GUI

Otro enfoque es ejecutar sus imágenes a través de un optimizador que instale en su computadora y ejecute como una GUI. Por ejemplo, con ImageOptim, puede arrastrar y soltar imágenes en su interfaz de usuario, y después se comprimen automáticamente sin comprometer la calidad de manera notable. Si maneja un sitio pequeño y puede manejar la optimización manual de todas las imágenes, es probable que esta opción sea lo suficientemente buena.

Squoosh es otra opción. Squoosh es mantenido por el equipo de Google Web DevRel.

# Orientación específica de la pila

# Drupal

Considere la posibilidad de utilizar un módulo que optimice y reduzca automáticamente el tamaño de las imágenes cargadas a través del sitio mientras conserva la calidad. Además, asegúrese de utilizar los estilos de imagen receptiva integrados en Drupal, (disponibles en Drupal 8 y versiones posteriores) para todas las imágenes renderizadas en el sitio.

# Joomla

Considere la posibilidad de utilizar un complemento de optimización de imágenes que comprima sus imágenes sin perder la calidad.

# Magento

Considere usar una extensión Magento de terceros que optimice las imágenes.

# WordPress

Considere usar un complemento de WordPress para optimización de imágenes que comprima sus imágenes sin perder calidad.

# Recursos

• Código fuente para la auditoría de Codificación eficiente de imágenes