Los móviles descargan sus imágenes de escritorio

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. Es la misma fotografía, con la misma calidad en esa pantalla, y un 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 es lo que perjudica su puntuación de 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.

Deje elegir al navegador

Hacer una sola imagen más pequeña no lo resuelve, porque los visitantes de escritorio siguen queriendo la grande. Lo que hay que hacer es ofrecer varios tamaños y dejar que cada navegador elija. HTML lo permite desde hace años: srcset lista las candidatas y sus anchos, y sizes le dice al navegador qué tan ancha se maquetará la imagen, para que haga la cuenta antes de descargar nada.

<img
  src="/img/hero-1200.webp"
  srcset="/img/hero-600.webp 600w,
          /img/hero-900.webp 900w,
          /img/hero-1200.webp 1200w,
          /img/hero-1920.webp 1920w"
  sizes="(max-width: 1020px) 100vw, 60vw"
  width="1920" height="1080"
  alt="Volunteers planting trees along the river trail"
  fetchpriority="high"
/>

Lea sizes como una promesa sobre el diseño: por debajo de 1020 píxeles la imagen llena la ventana, por encima ocupa el 60% del ancho. El navegador multiplica por su propia densidad de píxeles, elige la candidata más pequeña que siga nítida y nunca descarga el resto. Los atributos width y height reservan el espacio para que la página no salte cuando la imagen aterriza, que es lo que mide Cumulative Layout Shift.

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.

<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. El problema eran sus 1920 píxeles de ancho y una calidad más alta de lo 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 en diferido el elemento visible más grande hace la página más lenta, y Lighthouse lo señalará.

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. Todos estos casos se comprueban igual: 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 entre qué 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, corregir la imagen principal de una plantilla es una tarea pequeña dentro de la iguala. Recodificar toda la biblioteca de medios es un proyecto con presupuesto cerrado. En cualquier caso, abra una solicitud y empezaremos por la imagen que más cuesta.