En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las imágenes en formatos de imagen anteriores y se muestran los ahorros potenciales obtenidos mediante la publicación de versiones AVIF de esas imágenes:
¿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 equivalentes anteriores de 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 la misma configuración de calidad. Consulta el Codelab de entrega de 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 de las imágenes de 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, las convierte a WebP y calcula el tamaño del archivo AVIF, lo que informa los ahorros potenciales 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 admitir navegadores anteriores. Consulta ¿Cómo puedo detectar la compatibilidad de navegadores con WebP? para obtener una descripción general de las técnicas de resguardo y la siguiente lista de compatibilidad de navegadores con formatos de imagen.
Para ver la compatibilidad actual del navegador con cada formato moderno, consulta las siguientes entradas:
Orientación específica para pilas
AMP
Cuando especificas un resguardo adecuado para otros navegadores, se recomienda mostrar todos los componentes amp-img en formato WebP.
Drupal
Procura instalar y configurar un módulo para aprovechar los formatos de imagen WebP en tu sitio. Esos módulos generan automáticamente una versión WebP de las imágenes que subes para optimizar los tiempos de carga.
Joomla
Considera usar un plugin o servicio que convierta automáticamente las imágenes que subes a los formatos óptimos.
Magento
Considera buscar en el mercado de Magento una variedad de extensiones de terceros para aprovechar los formatos de imagen más nuevos.
iPhone
Ten en cuenta que las imágenes WebP, las imágenes AVIF y los videos WebM no funcionarán en iPhones con versiones anteriores a iOS 16.
WordPress
Considera usar un plugin o servicio que convierta automáticamente las imágenes que subes a los formatos óptimos.