Optimización de imágenes: acelera tu sitio con WebP y AVIF

Por qué las imágenes deciden la velocidad de tu página

En la mayoría de las páginas, las imágenes representan la mayor parte de los bytes que descarga un navegador. Eso las convierte en el objetivo número uno para un sitio más rápido — y en la principal razón por la que una página no supera los Core Web Vitals, porque la imagen más grande suele ser el elemento LCP (Largest Contentful Paint) que mide Google. Optimizar imágenes no significa menor calidad; significa entregar la misma imagen en muchos menos bytes. Acierta esto y todo lo demás —LCP, puntuaciones móviles, consumo de datos— mejora a la vez.

Ajusta el tamaño y hazlas responsivas

El desperdicio más habitual es servir una imagen enorme en un espacio pequeño — una foto de 4000px mostrada a 800px sigue descargando los 4000px completos. Exporta las imágenes cerca del tamaño en que realmente se muestran. Luego sirve tamaños distintos a pantallas distintas con srcset y sizes, así un móvil recibe un archivo pequeño y un escritorio uno más grande.

Imágenes responsivas con srcset

<img
  src="/hero-800.jpg"
  srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Product hero"
  width="800" height="500">

Cambia a formatos de nueva generación: WebP y AVIF

WebP, y AVIF donde esté soportado, producen archivos un 25-50% más pequeños que JPEG o PNG a la misma calidad visual. Este es el cambio que elimina la recomendación de PageSpeed Insights "Sirve imágenes en formatos de próxima generación". Sírvelas con un elemento picture para que los navegadores que soportan el nuevo formato lo reciban y los más antiguos recurran automáticamente al original.

Sirve AVIF/WebP con una alternativa

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Photo" width="1200" height="800">
</picture>

Carga diferida — pero no tu imagen principal

La carga diferida (lazy-loading) pospone las imágenes hasta que están a punto de entrar en el viewport, así una página larga no descarga todo de golpe. La mayoría de las plataformas lo hacen así por defecto. La única excepción es tu imagen hero o principal, que suele ser el elemento LCP: cárgala de forma inmediata (y considera fetchpriority="high") para que el píxel más importante se pinte lo más rápido posible. Aplica carga diferida a todo lo que está debajo del pliegue, y prioriza lo único que está por encima.

Entrega desde el edge — y convierte automáticamente

Incluso una imagen perfectamente comprimida es lenta si viaja desde un servidor distante. Una CDN almacena tus imágenes en caché en el edge y sirve a cada visitante desde la ubicación más cercana, así los bytes llegan rápido estén donde estén. cdn.com.tr hace esto con cada recurso, sobre HTTP/2 y Brotli modernos, con SSL automático por delante.

Y no tienes que convertir formatos a mano. Para WordPress, el plugin gratuito CDNTR crea WebP (y AVIF donde tu servidor lo soporte) en tu propio servidor y las sirve desde la CDN mediante un elemento picture, con el original como alternativa automática. Solo sirve un archivo convertido cuando es realmente más pequeño, así que una foto bien comprimida nunca se hace más grande, y puede convertir en bloque toda tu biblioteca de medios.

Mide y confirma

Pasa tu página por PageSpeed Insights antes y después. Buscas dos cosas: que desaparezcan las recomendaciones "Sirve imágenes en formatos de próxima generación" y "Dimensiona las imágenes correctamente", y que baje tu LCP. Si la imagen más grande sigue siendo lenta, comprueba que no tenga carga diferida y que se sirva en un formato de nueva generación desde la CDN. Un rápido antes/después te mantiene honesto sobre lo que realmente ayudó.

Dónde más rinde