Blog · Lo que encuentra la auditoría gratuita
Los móviles descargan sus imágenes de escritorio
Por qué una imagen principal de 2,6 MB llega a un teléfono que necesita 33 KB, cómo srcset y sizes dejan elegir al navegador, cuándo necesita realmente el elemento picture, qué le aporta WebP y dónde los temas de WordPress deshacen en silencio el trabajo que WordPress ya hizo por usted.
Qué está pasando realmente
En un sitio que auditamos este mes, la imagen principal de la portada era un WebP de 1920 por 1080 que pesaba 2,6 MB. En un teléfono, esa imagen se muestra a unos 390 píxeles de ancho. El teléfono descarga los 2,6 MB, decodifica dos millones de píxeles y después pinta más o menos el 4% de ellos.
La misma imagen, redimensionada a los 800 píxeles que un teléfono de alta densidad usa realmente, pesa 33 KB. Misma fotografía, misma calidad en esa pantalla, 98% menos que descargar. En una conexión celular, esa es la diferencia entre que la página aparezca de inmediato y un espacio en blanco durante dos o tres segundos.
Esto también explica por qué sufre la métrica llamada Largest Contentful Paint. La imagen principal suele ser lo más grande de la página, así que la página no se siente cargada hasta que llega, y no puede llegar hasta que ha llegado cada byte.
Cuándo necesita el elemento picture
srcset maneja una imagen en varios tamaños. El elemento picture maneja dos problemas distintos. El primero es la dirección de arte: un encuadre apaisado amplio en escritorio y un recorte vertical ajustado en el teléfono, porque el mismo encuadre no funciona en ambas formas. El segundo es el formato de reserva: ofrecer AVIF a los navegadores que lo entienden, WebP al resto y un JPEG como mínimo.
Ver el código Ocultar el código HTML, 7 líneas
<picture>
<source media="(max-width: 700px)" type="image/avif" srcset="/img/hero-phone.avif" />
<source media="(max-width: 700px)" type="image/webp" srcset="/img/hero-phone.webp" />
<source type="image/avif" srcset="/img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w" sizes="60vw" />
<source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-1920.webp 1920w" sizes="60vw" />
<img src="/img/hero-1200.jpg" width="1920" height="1080" alt="Volunteers planting trees along the river trail" />
</picture>La mayoría de los sitios no lo necesita. Si un recorte funciona en todas partes y sirve WebP, un img normal con srcset es la herramienta correcta, y es mucho más fácil de mantener bien. Recurra a picture cuando tenga un problema real de dirección de arte o esté añadiendo AVIF.
Formatos: WebP ahora, AVIF cuando pueda
WebP lo admiten todos los navegadores que usan sus visitantes y suele ser entre un 25 y un 35% más pequeño que un JPEG de la misma calidad visual. AVIF es aún más pequeño pero más lento de codificar, así que tiene sentido para el puñado de imágenes que más importan, con WebP detrás.
El formato no sustituye al tamaño. La imagen de 2,6 MB de arriba ya era WebP. Simplemente medía 1920 píxeles de ancho y estaba codificada a una calidad que nadie puede ver. Primero el tamaño, luego el formato, luego la calidad.
Prioridad y pereza
Dos atributos rematan el trabajo. La imagen principal, la única por encima del pliegue, recibe fetchpriority="high" para que el navegador la descargue antes que las hojas de estilo y los scripts que de otro modo harían cola delante. Todo lo que está por debajo del pliegue recibe loading="lazy" para que no se descargue hasta que el visitante se desplace hacia ello.
El error habitual es aplicar loading="lazy" también a la imagen principal, normalmente porque un plugin lo añade a todas las imágenes. Cargar con pereza el elemento visible más grande hace la página más lenta, no más rápida, y Lighthouse lo dirá.
Dónde ayuda WordPress, y dónde los temas lo deshacen
WordPress genera varios tamaños de cada archivo subido y escribe srcset y sizes en las etiquetas de imagen automáticamente desde la versión 4.4. Desde la 6.1 puede generar WebP junto al original. Para las imágenes colocadas desde el editor, el trabajo está hecho.
Las imágenes principales son donde falla. Muchos temas y maquetadores de páginas (Elementor, WPBakery y otros) emiten la imagen principal como imagen de fondo en CSS, o referencian directamente el original a tamaño completo, y ninguna de las dos vías lleva srcset. Una imagen principal puesta como fondo no puede ser adaptable en el sentido descrito aquí; tiene que convertirse en un img real, o el tema necesita una variante para móvil.
La otra fuga común es un plugin que elimina o reescribe las etiquetas de imagen, o un tema que pide el tamaño llamado full para cada miniatura. La pista es la misma en todos los casos: vea el código fuente de la página, encuentre la imagen principal y busque un atributo srcset. Si no está, el navegador no tiene nada que elegir.
Compruebe su propio sitio en un minuto
Abra su portada en un teléfono, o en un navegador de escritorio con la emulación de teléfono activada y el panel de red abierto, filtrado por imágenes. Ordene por tamaño. Si la primera entrada supera los 300 KB, esa imagen es la primera que hay que corregir. La auditoría gratuita de este sitio ejecuta la misma comprobación en su portada y le muestra la imagen más grande y su ahorro en lenguaje claro.
Si es cliente, esto es una tarea pequeña dentro de la iguala cuando se trata de la imagen principal de una plantilla, y un proyecto con presupuesto cerrado si hay que recodificar toda la biblioteca de medios. En cualquier caso, abra una solicitud y empezaremos por la imagen que más cuesta.