Entrega imágenes en formatos modernos

En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las imágenes en formatos más antiguos y se muestran los posibles ahorros que se obtendrían si se publicaran las versiones AVIF de esas imágenes:

Captura de pantalla de la auditoría de Lighthouse sobre la publicación de imágenes en formatos modernos

¿Por qué publicar imágenes en formato AVIF o WebP?

AVIF y WebP son formatos de imagen que tienen características de compresión y calidad superiores en comparación con sus contrapartes más antiguas JPEG y PNG. Codificar tus imágenes en estos formatos en lugar de JPEG o PNG significa que se cargarán más rápido y consumirán menos datos móviles.

AVIF es compatible con Chrome, Firefox y Opera, y ofrece tamaños de archivo más pequeños en comparación con otros formatos con los mismos parámetros de configuración de calidad. Consulta el Codelab sobre cómo publicar imágenes AVIF para obtener más información sobre AVIF.

WebP es compatible con las versiones más recientes de Chrome, Firefox, Safari, Edge y Opera, y proporciona una mejor compresión con y sin pérdida para las imágenes en la Web. Consulta Un nuevo formato de imagen para la Web para obtener más información sobre WebP.

Cómo calcula Lighthouse los ahorros potenciales

Lighthouse recopila cada imagen BMP, JPEG y PNG de la página, convierte cada una a WebP y estima el tamaño del archivo AVIF, y, luego, informa los posibles ahorros según las cifras de conversión.

Compatibilidad del navegador

WebP es compatible con las versiones más recientes de Chrome, Firefox, Safari, Edge y Opera, mientras que la compatibilidad con AVIF es más limitada. Deberás publicar una imagen PNG o JPEG de resguardo para brindar compatibilidad con navegadores anteriores. Consulta ¿Cómo puedo detectar la compatibilidad del navegador con WebP? para obtener una descripción general de las técnicas de resguardo y la siguiente lista para conocer la compatibilidad del navegador con los formatos de imagen.

Para ver la compatibilidad actual de los navegadores con cada formato moderno, consulta las siguientes entradas:

Orientación específica para la pila

AMP

Cuando especifiques un resguardo adecuado para otros navegadores, se recomienda mostrar todos los componentes de amp-img en formato WebP.

Drupal

Se recomienda instalar y configurar un módulo para aprovechar los formatos de imagen WebP en el sitio. Esos módulos generan de forma automática una versión WebP de las imágenes subidas para optimizar los tiempos de carga.

Joomla

Puedes utilizar un complemento o servicio que convierta automáticamente las imágenes que subes a los formatos óptimos.

Magento

Te recomendamos buscar en el mercado de Magento diversas extensiones de terceros para aprovechar los formatos de imagen más nuevos.

iPhone

Ten en cuenta que las imágenes webp y avif, y los videos webm no funcionarán en iPhones con iOS 15 o versiones anteriores.

WordPress

Puedes utilizar un complemento o servicio que convierta automáticamente las imágenes que subes a los formatos óptimos.

Recursos