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

En fotografías, WebP y AVIF producen archivos mucho más pequeños que JPEG a la misma calidad visual: en nuestra medición, una foto de 1920×1080 pasó de 186 KB como JPEG optimizado a 114 KB como WebP y 87 KB como AVIF. En capturas, gráficos planos e iconos diminutos la diferencia se reduce o se invierte, así que compara los bytes (las cifras están en AVIF vs WebP). Este es el cambio que elimina la recomendación de PageSpeed Insights "Sirve imágenes en formatos de próxima generación". Si alojas los archivos tú mismo, sírvelos 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. En el edge de CDN.com.tr basta con una URL: el edge lee la cabecera Accept del navegador y elige el formato en cada petición.

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.

En cualquier sitio detrás de cdn.com.tr, la optimización de imágenes convierte en el edge: actívala para la cuenta o para una regla de entrega, y las imágenes JPEG y PNG llegan a los navegadores compatibles como WebP, o como AVIF si eliges WebP + AVIF para la cuenta, sin cambiar las URL de tus imágenes. A tamaño completo, una imagen recién convertida solo se envía si es más pequeña que el original; si una conversión falla, el edge sirve en su lugar la imagen original. El procesamiento cuenta para tu cuota mensual. El comprobador de formato de imagen muestra en qué formato llega cada una de tus imágenes al navegador. Nuestra guía de la CDN de imágenes entra en detalle en el lado del edge: una URL que responde con varios formatos, el redimensionado desde la URL y por qué cada variante es un objeto de caché propio.

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