Formato WebP/AVIF y width/height en tus imágenes

Q: ¿Si pongo width y height, la imagen deja de adaptarse al móvil?

No, siempre que en tu CSS tengas height: auto y normalmente max-width: 100%. Los navegadores actuales usan esos atributos para calcular la proporción de la imagen y reservar el hueco antes de descargarla; luego el CSS decide el tamaño real en pantalla. Es la forma recomendada de evitar saltos sin renunciar al diseño adaptable.

Por qué importa

Si una imagen no declara sus dimensiones, el navegador no sabe cuánto espacio reservarle hasta que la descarga, y al llegar empuja hacia abajo el texto y los botones: es ese momento en que vas a pulsar algo y se mueve. Google lo mide con el CLS (Cumulative Layout Shift, cambios inesperados de diseño), una de las Core Web Vitals, las métricas de experiencia que sus sistemas tienen en cuenta junto a muchas otras señales.

WebP y AVIF son formatos de imagen modernos que comprimen mejor que JPEG y PNG: con la misma calidad visible, el archivo suele pesar bastante menos. Los navegadores actuales los muestran sin problema, y menos peso significa que la página se ve antes, sobre todo en móvil.

Cómo lo comprueba Posiciona

Analizamos todas las <img> de la página. La nota es la media, al 50 %, de dos partes: el porcentaje de imágenes con width y height, y el de imágenes que no se sirven en formatos antiguos (JPEG, PNG, GIF, BMP) entre aquellas cuyo formato conocemos. Lo tomamos del tipo real que devuelve el servidor o, si falta, de la extensión; los CDNs que eligen formato según el navegador (Shopify, Cloudinary, imgix…) cuentan como modernos. El lazy loading solo se informa. Sin imágenes, no aplica.

En la nota de SEO esta comprobación cuenta como “recomendable” (peso 2 de 5).

Cómo solucionarlo

Añade width y height a cada <img> con las dimensiones reales del archivo en píxeles. No fijan su tamaño en pantalla: el navegador los usa para calcular la proporción y reservar el hueco.
Para que siga siendo adaptable, acompáñalo en tu CSS con max-width: 100% y height: auto; así la imagen se encoge en móvil sin deformarse.
Convierte las fotos a WebP o AVIF antes de subirlas (con Squoosh o tu editor de imágenes) o, mejor, deja que lo haga tu plataforma o un CDN de imágenes (una red de servidores que entrega tus archivos).
Si quieres un respaldo para navegadores muy antiguos, usa <picture> con fuentes AVIF y WebP y una imagen JPEG dentro, como en el ejemplo.
Usa loading="lazy" en las imágenes que quedan por debajo de lo que se ve al abrir la página, pero nunca en la principal (el banner o la foto del producto), porque retrasaría su carga.

Formato moderno con respaldo y dimensionesHTML

<picture>
  <source srcset="sofa-verde.avif" type="image/avif">
  <source srcset="sofa-verde.webp" type="image/webp">
  <img src="sofa-verde.jpg" alt="Sofá de tres plazas verde" width="1200" height="800">
</picture>

En WordPress

WordPress añade width y height a las imágenes que insertas desde el editor. Las que faltan suelen venir del tema, de un constructor visual o de HTML pegado a mano.
Para servir WebP o AVIF, plugins como Imagify, ShortPixel o LiteSpeed Cache convierten las imágenes de la biblioteca y las entregan a los navegadores que las admiten.

En Shopify

El CDN de Shopify ya entrega WebP o AVIF a los navegadores que lo admiten, así que las fotos de productos y colecciones no suelen dar problema. Lo que marca este check son imágenes alojadas fuera de Shopify.
En el código del tema, el filtro image_tag genera la etiqueta con width y height a partir del tamaño real de la imagen: cambia los <img> escritos a mano por algo como {{ product.featured_image | image_url: width: 800 | image_tag }}.

Preguntas frecuentes

¿Si pongo width y height, la imagen deja de adaptarse al móvil?

No, siempre que en tu CSS tengas height: auto y normalmente max-width: 100%. Los navegadores actuales usan esos atributos para calcular la proporción de la imagen y reservar el hueco antes de descargarla; luego el CSS decide el tamaño real en pantalla. Es la forma recomendada de evitar saltos sin renunciar al diseño adaptable.

¿WebP o AVIF: cuál elijo?

AVIF suele comprimir más que WebP, sobre todo en fotos, pero codificarlo es más lento y algunas herramientas aún no lo exportan. WebP es la opción más sencilla y compatible. Si tu plataforma o tu CDN eligen el formato automáticamente según el navegador, no tienes que decidir: cada visitante recibe el mejor que admite.

¿Por qué me marca imágenes en JPEG si mi web ya usa WebP?

Porque comprobamos el formato que realmente descarga el navegador. Las imágenes servidas desde otros dominios, las subidas a mano al tema o las que tu plugin de conversión no ha procesado siguen llegando en JPEG o PNG. El informe te da ejemplos concretos para localizarlas.