Optimizar imágenes web: peso, tamaño y formato

Por qué importa

Una foto sacada del móvil puede pesar varios megas y acabar mostrándose en una tarjeta de 400 píxeles de ancho. El visitante descarga toda esa información para nada, gasta datos y espera más, sobre todo con cobertura irregular.

Además, la imagen principal suele ser el elemento que marca el LCP, una de las Core Web Vitals. Aligerar las imágenes es a menudo el cambio que más mejora la velocidad con menos riesgo, porque no toca el diseño ni la funcionalidad.

Cómo lo comprueba Posiciona

Usamos el análisis de entrega de imágenes de Lighthouse 13 en la prueba móvil de PageSpeed Insights. Detecta imágenes más grandes de lo que se muestran, que admiten más compresión, que ganarían con WebP o AVIF, y GIF animados que deberían ser vídeo. Si no encuentra nada, la nota es 100; si no, depende del ahorro total: menos de 50 KB, 90; menos de 200 KB, 70; menos de 500 KB, 50; menos de 1 MB, 30; y 1 MB o más, 10.

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

Cómo solucionarlo

Redimensiona antes de subir: como referencia, el doble del ancho máximo al que se muestra la imagen basta para pantallas de alta densidad. No subas la foto original de la cámara.
Comprime con una calidad en torno a 75-85: normalmente la diferencia no se aprecia a simple vista. Herramientas gratuitas como Squoosh te dejan comparar el antes y el después.
Usa WebP o AVIF, que suelen ocupar bastante menos que JPEG y PNG con la misma calidad visual. Si necesitas un respaldo para navegadores antiguos, usa <picture> con un JPEG.
Ofrece varios tamaños con srcset y sizes para que el móvil descargue una versión pequeña y el ordenador una grande.
Convierte los GIF animados en vídeo MP4 o WebM con <video autoplay muted loop playsinline>: pesan mucho menos.
Aplica carga diferida (loading="lazy") a las imágenes que están más abajo de la primera pantalla, pero nunca a la principal.

Imagen adaptable con varios tamañosHTML

<img src="/img/zapatilla-800.webp"
     srcset="/img/zapatilla-400.webp 400w, /img/zapatilla-800.webp 800w, /img/zapatilla-1200.webp 1200w"
     sizes="(min-width: 1000px) 50vw, 100vw"
     width="800" height="800" loading="lazy"
     alt="Zapatilla de trail azul, vista lateral">

En un tema de Shopify (Liquid)Liquid (Shopify)

{{ product.featured_image | image_url: width: 1200 | image_tag: widths: "400, 800, 1200", sizes: "(min-width: 990px) 50vw, 100vw", loading: "lazy" }}

En WordPress

WordPress crea varios tamaños de cada imagen al subirla y añade srcset automáticamente en el contenido. En el editor, elige el tamaño que corresponda en lugar de “Tamaño completo”.
Imagify, ShortPixel o EWWW Image Optimizer comprimen las imágenes al subirlas, pueden optimizar en lote las que ya tienes y generan versiones WebP o AVIF.
WordPress admite subir imágenes WebP desde la versión 5.8 y AVIF desde la 6.5, siempre que el servidor las soporte.

En Shopify

En Shopify, el CDN sirve formatos modernos como WebP a los navegadores compatibles y genera los tamaños que pida el tema con el filtro image_url. Comprueba que tu tema lo usa y no enlaza directamente a la imagen original.
Para fotos de producto cuadradas, Shopify recomienda 2048 × 2048 px: no hace falta subirlas mucho más grandes, y conviene comprimirlas antes.
Para animaciones en la portada o en las fichas, usa las secciones de vídeo del tema en lugar de GIF.

Preguntas frecuentes

¿Qué formato es mejor, WebP o AVIF?

AVIF suele conseguir archivos más pequeños, sobre todo en fotografías, pero tarda más en generarse. WebP comprime algo menos y está muy extendido. Los dos funcionan en todos los navegadores actuales. Si tu plugin o tu CDN ofrecen AVIF, pruébalo; si no, WebP ya supone una gran mejora frente a JPEG y PNG.

¿Qué diferencia hay con el check de formato y dimensiones de imágenes?

Este check usa el análisis de PageSpeed y mide cuántos kilobytes sobran por tamaño, compresión o formato. El de formato y dimensiones revisa el HTML: si las imágenes llevan width y height para no provocar saltos y si se sirven en formatos modernos. Se complementan, así que conviene tener bien los dos.