Optimizar imágenes para la web: WebP, AVIF y tamaño

Para optimizar las imágenes de tu web, sirve cada una en un formato moderno (WebP o AVIF, con alternativa), al tamaño en píxeles al que se muestra de verdad, con una compresión razonable, y cárgala en el momento adecuado: pronto la imagen principal y en diferido todo lo que queda por debajo del pliegue. Si aciertas en estas cuatro cosas, las imágenes dejan de ser lo que más pesa en tus páginas. Esta guía explica cada paso, qué cambian de verdad WebP y AVIF y cómo comprobar el resultado.

Por qué las imágenes importan para la velocidad

En muchas webs de contenido y tiendas online, las imágenes son la mayor parte de los bytes que descarga una página. Además deciden una de las tres Core Web Vitals: en muchas páginas, el elemento del Largest Contentful Paint es una imagen, normalmente un banner principal o una foto de producto. El artículo de web.dev sobre el LCP (en inglés) cita el tiempo de descarga de la imagen como una de las cuatro partes que componen la métrica.

Las imágenes también afectan a la estabilidad del diseño. Una imagen sin espacio reservado empuja el texto hacia abajo cuando llega, y eso penaliza el Cumulative Layout Shift. Si quieres ver cómo se relacionan estas métricas, lee Core Web Vitals: LCP, INP y CLS explicados.

La buena noticia es que los problemas con las imágenes suelen ser fáciles de detectar y de corregir, y las soluciones no tocan la lógica de tu aplicación.

Elige el formato adecuado

Cada formato tiene su función. Elegir el equivocado es una causa habitual de archivos sobredimensionados.

Algunas reglas prácticas:

• No uses nunca PNG para fotos. Una foto guardada en PNG suele pesar mucho más que la misma foto en JPEG, sin ninguna ventaja visible.
• Usa SVG para logotipos e iconos en lugar de sprites PNG. Asegúrate de que los SVG vienen de una fuente de confianza, porque pueden contener scripts.
• Sustituye los GIF animados por vídeo. Un bucle corto en MP4 o WebM pesa mucho menos que la misma animación en GIF.

Qué cambian realmente WebP y AVIF

WebP y AVIF son formatos de compresión más recientes. Con la misma calidad visual, suelen generar archivos más pequeños que JPEG y PNG, y AVIF a menudo va más allá que WebP, sobre todo en fotos con degradados suaves. Cuánto ahorras depende de la imagen y del ajuste de calidad, así que no existe una cifra universal fiable.

Lo que no cambian son las dimensiones en píxeles. Un AVIF de 4000 píxeles de ancho mostrado en una columna de 600 píxeles sigue siendo un desperdicio. El formato y el tamaño son problemas distintos, y tienes que resolver los dos.

Los navegadores antiguos que no entienden un formato necesitan una alternativa. Puedes resolverlo en el marcado con <picture> o en el servidor, mirando la cabecera Accept del navegador y eligiendo el formato en cada petición.

<picture>
  <source srcset="/images/team.avif" type="image/avif">
  <source srcset="/images/team.webp" type="image/webp">
  <img src="/images/team.jpg" alt="Nuestro equipo en la oficina" width="1200" height="800">
</picture>

Sirve el tamaño correcto

El error clásico es subir una foto tal cual sale de la cámara o del móvil y dejar que el CSS la reduzca. El navegador descarga igualmente todos los píxeles.

Redimensiona al tamaño de visualización

Averigua a qué ancho se muestra realmente la imagen. En un diseño de escritorio con una columna de contenido de 1200 píxeles, una imagen a todo lo ancho rara vez necesita más del doble de ese ancho para verse nítida en pantallas de alta densidad. Las miniaturas de una cuadrícula de productos necesitan mucho menos.

Usa srcset y sizes

Las imágenes responsive permiten que el navegador elija el archivo adecuado para cada pantalla:

<img
  src="/images/product-800.jpg"
  srcset="/images/product-400.jpg 400w,
          /images/product-800.jpg 800w,
          /images/product-1600.jpg 1600w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  alt="Zapatilla de running azul, vista lateral"
  width="800" height="800">

srcset enumera los anchos disponibles y sizes le dice al navegador qué ancho tendrá la imagen en el diseño. El navegador lo combina con la densidad de píxeles de la pantalla y descarga un solo archivo. La mayoría de CMS, WordPress incluido, generan varios tamaños al subir la imagen y añaden srcset automáticamente, siempre que el tema use las funciones de imagen estándar.

Comprime con sentido

En los formatos con pérdida, un ajuste de calidad medio o medio-alto no suele distinguirse del original a un tamaño de visualización normal. Compara varios ajustes uno al lado del otro en una pantalla real en lugar de fiarte de un único valor por defecto. Elimina también metadatos como los datos EXIF de la cámara, que añaden bytes y pueden revelar datos de ubicación que no querías publicar.

Carga las imágenes en el momento adecuado

No todas las imágenes son igual de urgentes. El navegador debería pedir de inmediato la que está en la parte visible y dejar el resto para cuando el visitante haga scroll.

Carga en diferido las imágenes bajo el pliegue

El lazy loading nativo no necesita JavaScript:

<img src="/images/gallery-3.webp" loading="lazy" alt="..." width="600" height="400">

No apliques nunca lazy loading a la imagen del LCP

Este es el error que echa por tierra todo lo demás. Si la imagen principal tiene loading="lazy", el navegador espera a propósito antes de pedirla y el LCP empeora. Algunos plugins y temas aplican lazy loading a todas las imágenes por defecto, así que revisa en concreto la imagen principal.

Evita los saltos de diseño

Pon siempre los atributos width y height a las imágenes (o un aspect-ratio en CSS). Los navegadores modernos los usan para reservar el espacio justo antes de que llegue el archivo, incluso cuando el CSS hace la imagen responsive con width: 100%; height: auto. El artículo de web.dev sobre el CLS (en inglés) explica por qué las imágenes sin dimensiones son una de las causas más frecuentes de saltos de diseño.

Lo mismo vale para las imágenes que se insertan más tarde, como carruseles o espacios publicitarios: reserva su espacio en el CSS para que el resto de la página no dé saltos.

Cachea bien las imágenes

Las imágenes cambian poco, así que los navegadores y los CDN deberían guardarlas mucho tiempo. Envía cabeceras Cache-Control de larga duración y cambia el nombre del archivo (o añade un parámetro de versión) cuando sustituyas una imagen. Puedes comprobar qué envía tu servidor:

curl -I https://www.example.com/images/hero.webp

Busca cache-control con un max-age largo. Si sirves formatos distintos desde la misma URL según el navegador, la respuesta también tiene que variar según la cabecera Accept; si no, una caché podría entregar un archivo WebP a un navegador que no sabe mostrarlo.

Cómo te ayuda fast.site

fast.site se coloca delante de tu hosting actual, así que tus imágenes siguen donde están y tu CMS funciona como antes. Apuntas los servidores de nombres de tu dominio a fast.site y, a partir de ahí, las peticiones pasan por su red edge.

La optimización de imágenes convierte JPEG y PNG a WebP sobre la marcha para los navegadores compatibles, y la conversión a AVIF está disponible según tu plan. Los navegadores que no admiten un formato reciben el original, así que no tienes que mantener alternativas con <picture> para cada imagen. Como el resto de archivos estáticos, las imágenes se guardan en Fast Edge Cache™, de modo que un cache HIT se sirve desde el edge más cercano al visitante sin contactar con tu servidor.

La opción de optimización de HTML precarga la imagen principal detectada y añade ancho y alto a las imágenes para reducir los saltos de diseño.

Lo que fast.site no hace: redimensionar las imágenes que se suben demasiado grandes ni decidir qué imágenes cargar en diferido. Eso sigue siendo cosa de tu tema y de tu flujo de trabajo con el contenido.

Mide el efecto en tu propia web antes y después: compara los bytes de imagen transferidos en el panel de red del navegador y revisa el LCP en corewebvitals.page. Puedes probarlo con una prueba gratuita de 7 días, sin tarjeta de crédito. Consulta los planes para ver qué incluye cada uno.

Preguntas frecuentes

¿Qué es mejor, WebP o AVIF?

AVIF suele generar archivos más pequeños que WebP con una calidad parecida, sobre todo en fotos, pero tarda más en codificarse. WebP es una opción segura por defecto y con amplia compatibilidad. Muchas webs sirven AVIF cuando es posible y WebP o el original como alternativa.

¿Qué tamaño deben tener las imágenes de una web?

El del mayor tamaño al que se muestra la imagen, y aproximadamente el doble de ancho para las pantallas de alta densidad. Usa srcset para que las pantallas pequeñas descarguen archivos más pequeños. Casi nunca hace falta subir la resolución completa de la cámara.

¿El lazy loading perjudica al SEO?

Google admite el lazy loading nativo con loading="lazy" y no oculta las imágenes a la búsqueda. El riesgo real está en el rendimiento: cargar en diferido la imagen principal de la parte visible retrasa el LCP. Úsalo solo para las imágenes que están más abajo en la página.

¿Cómo compruebo si mis imágenes están optimizadas?

Pasa la página por corewebvitals.page y revisa el LCP en móvil y escritorio. Para ver qué elemento es el del LCP, abre el panel Performance de Chrome DevTools. En el panel de red del navegador, filtra por imágenes y compara tamaños de archivo y formatos. Nuestra guía sobre cómo medir la velocidad de una web explica cómo hacer una prueba fiable de antes y después.

¿Sigo necesitando un plugin de optimización de imágenes en WordPress?

Depende de tu configuración. Un plugin que redimensiona y comprime lo que subes sigue siendo útil, porque convertir el formato por sí solo no arregla unas dimensiones excesivas. Si tu CDN ya se encarga de convertir a WebP o AVIF, normalmente puedes desactivar esa parte del plugin para no hacer el trabajo dos veces. Consulta por qué va lento tu WordPress para ver el panorama completo.