Formatos de nueva generación Lighthouse

La advertencia de Lighthouse significa convertir sus archivos JPEG y PNG a WebP o AVIF, y luego servirlos a través de un elemento picture con el original como alternativa. La auditoría es una de las más fáciles de superar, porque la solución es mecánica en lugar de arquitectónica.

Lighthouse genera la advertencia cuando encuentra imágenes que considera que serían sustancialmente más pequeñas en un formato moderno. La estimación se basa en el archivo que descargó, por lo que el ahorro que reporta suele ser alcanzable y, en ocasiones, conservador.

Qué está midiendo Lighthouse

Lighthouse vuelve a codificar internamente cada imagen como WebP y reporta la diferencia cuando el ahorro supera un umbral. El número en el informe es una estimación real en lugar de una recomendación genérica.

Las imágenes por debajo del umbral se ignoran, razón por la cual una página con 30 imágenes puede mostrar solo 4 en la auditoría. Los archivos enumerados son los que vale la pena corregir primero. Solucionarlos suele eliminar la advertencia por completo, aunque otras imágenes de la página permanezcan en formatos más antiguos.

El marcado que satisface la auditoría

Use un elemento picture con AVIF primero, WebP en segundo lugar y el JPEG original en la etiqueta img. El navegador elige la primera fuente que comprende, por lo que los navegadores más nuevos obtienen el archivo pequeño y los más antiguos siguen recibiendo una imagen.

La etiqueta img debe permanecer, ya que contiene el texto alt, las dimensiones y la alternativa. Omitir los atributos width y height provoca cambios de diseño a medida que se cargan las imágenes, lo que perjudica a otra métrica de Core Web Vitals mientras se corrige esta. Establezca ambos atributos en el tamaño de píxel intrínseco de la imagen alternativa.

Cómo superar la auditoría

Para resolver la advertencia correctamente, siga estos 6 pasos.

1. Abra el informe de Lighthouse y enumere las imágenes que menciona, que son las que tienen ahorros medibles.
2. Verifique el tamaño de visualización de cada imagen, ya que muchas están sobredimensionadas además de estar en el formato incorrecto.
3. Redimensione cada imagen a su ancho de visualización real, duplicado para pantallas de alta densidad.
4. Convierta a WebP con calidad 80, y a AVIF con calidad 65 para las imágenes más grandes de la página.
5. Sirva los resultados a través de un elemento picture con el original como alternativa en img.
6. Vuelva a ejecutar Lighthouse para confirmar que la advertencia ha desaparecido y que no se han producido cambios de diseño.

El paso 3 importa más que el paso 4. Las dimensiones controlan la mayor parte del tamaño del archivo, y un WebP sobredimensionado sigue siendo una imagen sobredimensionada. La conversión por lotes toma un par de minutos, mientras que escribir el marcado suele llevar más tiempo.

Qué formato para qué imagen

¿Su plataforma ya hace esto?

Muchos sistemas de contenido y servidores convierten las imágenes automáticamente, así que verifique antes de crear algo a mano. Hacer el trabajo dos veces es común y un desperdicio de recursos.

Pruebe en 2 minutos. Abra la página publicada, haga clic derecho en una imagen y ábrala en una nueva pestaña, luego lea la extensión del archivo en la barra de direcciones. Una extensión .webp en un archivo que subió como JPEG significa que la plataforma ya lo está convirtiendo. Shopify, la mayoría de los servidores administrados de WordPress y varios creadores de sitios web hacen esto de forma predeterminada.

Por qué la advertencia a veces regresa

Las nuevas subidas vuelven a introducir el problema cuando el paso de conversión es manual en lugar de automático. Un sitio corregido en enero volverá a mostrar la advertencia en junio si los editores suben imágenes directamente desde una cámara.

Corrija el proceso en lugar de solo los archivos. Habilite la conversión automática a nivel de plataforma o acuerde una regla simple para que las imágenes se redimensionen y conviertan antes de subirlas. Escribir la regla es importante en cualquier sitio donde publique más de una persona, ya que la auditoría mide la peor imagen en lugar de la promedio.

¿Debería usar AVIF, WebP o ambos?

Use WebP solo en la mayoría de los sitios, y añada AVIF únicamente para las imágenes más grandes de la página. Admitir ambos duplica la cantidad de archivos a generar, almacenar y mantener sincronizados para un ahorro que es pequeño en imágenes comunes.

El cálculo cambia en sitios con muchas fotografías, donde AVIF ahorra entre un 20 y un 30 por ciento adicional en archivos que ya se miden en cientos de kilobytes. En una página que contiene una imagen principal de 600 KB, esa es una reducción real. En una página de miniaturas de 40 KB, el flujo de trabajo adicional cuesta más esfuerzo del que compensa, y WebP por sí solo supera la auditoría.

Comprobar el resultado correctamente

Vuelva a ejecutar Lighthouse en una ventana privada con las extensiones desactivadas, ya que las extensiones del navegador distorsionan la medición. Las puntuaciones también varían entre ejecuciones, así que compare 3 ejecuciones en lugar de confiar en un solo número.

Verifique que el navegador esté recibiendo el nuevo formato en lugar de asumirlo. Abra las herramientas de desarrollo, vaya a la pestaña Red, filtre por imágenes y vuelva a cargar la página. La columna Tipo muestra lo que realmente se sirvió. Una página que sigue sirviendo JPEG después de una conversión suele significar que el marcado del elemento picture es incorrecto o que una capa de caché conserva la versión anterior.

Auditorías relacionadas que aparecen junto a ella

• Usa un tamaño adecuado para las imágenes. La imagen es más grande que el espacio en el que se muestra. Redimensione en lugar de comprimir.
• Codifica las imágenes de forma eficaz. La compresión es demasiado ligera. Reduzca el ajuste de calidad.
• Pospón la carga de las imágenes que no aparecen en pantalla. Añada carga diferida (lazy loading) a las imágenes debajo del pliegue.
• Elemento de renderizado del mayor elemento con contenido. Por lo general, su imagen principal, que merece atención primero.
• Los elementos de imagen no tienen width y height explícitos. Añada ambos atributos para evitar cambios de diseño.

Esas 5 auditorías suelen aparecer juntas, y redimensionar junto con convertir las imágenes mencionadas en el informe resuelve la mayoría de ellas en un solo paso.

Cuánto mejora realmente una página

La conversión a formatos modernos suele eliminar entre el 25 y el 35 por ciento del peso de la imagen, y redimensionar primero con frecuencia elimina mucho más. En una página con muchas imágenes, el efecto combinado suele ser del 70 al 80 por ciento.

La mejora se refleja en el Renderizado del mayor elemento con contenido (LCP), que mide la rapidez con la que aparece el contenido principal. Esa medición suele decidirse por una sola imagen, por lo que reducir el archivo principal tiene un efecto desproporcionado en comparación con su participación en la página. Reducir 20 imágenes pequeñas importa menos que reducir 1 grande.

Qué no hacer

No elimine la alternativa JPEG y no convierta imágenes que los visitantes vayan a descargar. Ambos errores sacrifican una funcionalidad real a cambio de una pequeña mejora en la puntuación.

Los kits de prensa, las guías imprimibles, las plantillas descargables y los archivos de proveedores deben permanecer en JPEG o PNG, ya que WebP se maneja con dificultad fuera de los navegadores. Servir estos archivos en formatos modernos genera solicitudes de soporte de personas que no pueden abrirlos, lo que cuesta más que el ancho de banda ahorrado.

Convertir las imágenes que el informe mencionó

Convierta a partir de los archivos originales en lugar de las versiones ya publicadas, porque un JPEG comprimido traslada el deterioro al nuevo archivo. El codificador no puede distinguir los artefactos existentes del detalle real y gasta bits en preservarlos.

Suelte hasta 500 archivos a la vez, o arrastre un archivo ZIP directamente, y todo el conjunto se convertirá en un solo paso. Todo se ejecuta dentro de su navegador en su propio procesador, por lo que los sitios de clientes, los recursos de prueba y las páginas no publicadas nunca llegan a un servidor. Una conversión completa del sitio finaliza en unos minutos sin que un solo archivo cruce la red.

Mantenga los archivos convertidos junto a los originales utilizando nombres coincidentes, de modo que el marcado del elemento picture se pueda generar con un patrón predecible en lugar de editarse a mano para cada imagen. Una carpeta que contiene hero.jpg, hero.webp y hero.avif es fácil de estructurar en plantillas, y hace que la próxima migración de formato sea una conversión por lotes en lugar de una reescritura de cada página.