Imágenes en la web: AVIF, WebP, tamaños responsive y dirección de arte

Cuando auditamos una web que va lenta, la primera sospecha casi siempre se confirma en dos minutos: imágenes. Una cabecera de 3 MB exportada directamente desde la cámara, fotos de producto en PNG, un logo en JPG a 2.000 píxeles para mostrarse a 160. Nadie lo hace con mala intención. Simplemente, entre el diseño y la publicación hay un paso técnico que nadie tiene asignado.

La buena noticia es que es el paso que más rendimiento devuelve por hora invertida. En muchos proyectos que heredamos, bastó con preparar bien las imágenes para reducir el peso de la home a menos de la mitad, sin tocar ni una línea de diseño. Y la web, además de ir más rápida, se ve más nítida, porque cada pantalla recibe la imagen pensada para ella.

En esta guía repasamos los formatos (AVIF, WebP, JPEG, PNG, SVG), cómo servir el tamaño justo con srcset y sizes, cuándo usar dirección de arte y qué hacer con la imagen principal para que no penalice las métricas de velocidad.

01Por qué las imágenes deciden la velocidad de tu web

En la mayoría de webs de marca, las imágenes suponen la mayor parte de los bytes que descarga una página. Y una de ellas suele ser, además, el elemento que mide el LCP (Largest Contentful Paint), la métrica de Google que registra cuándo aparece el contenido principal. El objetivo recomendado es un LCP de 2,5 segundos o menos, y lo explicamos con calma en qué son las Core Web Vitals.

Las imágenes afectan a la experiencia de tres maneras:

• →Peso. Más kilobytes, más tiempo de descarga, sobre todo con datos móviles.
• →Prioridad. Si la imagen principal se descubre tarde o se carga en diferido, el LCP se retrasa aunque pese poco.
• →Estabilidad. Una imagen sin dimensiones reservadas empuja el contenido al aparecer, lo que dispara el CLS (Cumulative Layout Shift), cuyo objetivo es 0,1 o menos.

Resolver las tres es sencillo una vez que sabes qué tocar.

02AVIF, WebP, JPEG, PNG y SVG: qué formato usar en cada caso

No hay un formato perfecto para todo. Hay un formato adecuado para cada tipo de imagen.

AVIF: el más eficiente para fotografía

AVIF es un formato basado en el códec de vídeo AV1. Con la misma calidad percibida, suele producir archivos notablemente más ligeros que JPEG y algo más ligeros que WebP, sobre todo en fotos con degradados suaves, como cielos o pieles. Desde que Safari y Edge completaron su soporte, se puede usar con tranquilidad en cualquier web. Su punto débil es que codificar es lento, algo que importa si generas miles de imágenes al vuelo, pero no si las exportas una vez.

WebP: el comodín

WebP lleva años admitido en todos los navegadores, codifica rápido y maneja transparencias mucho mejor que PNG. Es el respaldo natural de AVIF y una buena elección por sí solo si tu plataforma no genera AVIF.

SVG para todo lo que sea vectorial

Logotipos, iconos y gráficos planos deberían ir en SVG siempre que sea posible. Pesan unos pocos kilobytes, se ven perfectos en cualquier densidad de pantalla y admiten cambiar de color con CSS. Conviene optimizarlos (con herramientas como SVGO) para quitar metadatos de los programas de diseño, algo que detallamos en la guía de archivos de logotipo vectorial.

Qué calidad de compresión elegir

Como orientación del estudio, para fotografía web solemos partir de una calidad de 75–82 en JPEG, de 75–80 en WebP y de 50–65 en AVIF (su escala no es comparable con la de JPEG). Después comparamos a tamaño real con herramientas como Squoosh y ajustamos. Las fotos con mucho detalle fino, como tejidos o vegetación, piden algo más de calidad; los fondos desenfocados aguantan bastante menos.

03Imágenes responsive: srcset y sizes sin misterio

Una imagen responsive es aquella de la que existen varias versiones a distintos tamaños, para que cada dispositivo descargue solo la que necesita. Se resuelve con dos atributos HTML que trabajan juntos.

• →`srcset` enumera los archivos disponibles y su anchura real en píxeles, con el sufijo w.
• →`sizes` le dice al navegador qué ancho ocupará la imagen en la página según el tamaño de la pantalla.

Con esos dos datos, más la densidad de la pantalla, el navegador elige el archivo adecuado antes incluso de conocer el CSS.

<img
  src="/img/salon-1280.jpg"
  srcset="/img/salon-640.jpg 640w,
          /img/salon-960.jpg 960w,
          /img/salon-1280.jpg 1280w,
          /img/salon-1920.jpg 1920w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  width="1920" height="1280"
  alt="Salón del apartamento con vistas al mar desde el sofá"
  loading="lazy" decoding="async">

En este ejemplo, en pantallas de 1024 píxeles o más la imagen ocupa la mitad del ancho de la ventana; por debajo, todo el ancho. Un móvil de 390 píxeles con densidad 3x necesita unos 1.170 píxeles reales y descargará la versión de 1280. Un portátil con la imagen a 700 píxeles en densidad 1x se conformará con la de 960.

El atributo sizes es donde más se falla

Si omites sizes, el navegador asume que la imagen ocupa todo el ancho de la pantalla (100vw) y descarga una versión más grande de la necesaria en cuanto la imagen está en una columna. Merece la pena calcularlo a partir de la retícula real del diseño. Si la imagen vive en una tarjeta de tres columnas con márgenes, algo como (min-width: 1200px) 380px, (min-width: 768px) 45vw, 92vw se acerca mucho a la realidad.

04Dirección de arte: cuando el móvil necesita otra imagen

Reducir una imagen no siempre basta. Una foto horizontal de un restaurante con la terraza a la izquierda y el mar a la derecha, reducida a la pantalla de un móvil en vertical, se convierte en una franja donde no se distingue nada. Ahí entra la dirección de arte: servir un encuadre distinto según el formato de pantalla.

Se hace con el elemento picture y el atributo media:

<picture>
  <source media="(max-width: 767px)"
          type="image/avif"
          srcset="/img/terraza-movil-600.avif 600w, /img/terraza-movil-1000.avif 1000w"
          sizes="100vw">
  <source media="(max-width: 767px)"
          srcset="/img/terraza-movil-600.jpg 600w, /img/terraza-movil-1000.jpg 1000w"
          sizes="100vw">
  <source type="image/avif"
          srcset="/img/terraza-1280.avif 1280w, /img/terraza-1920.avif 1920w, /img/terraza-2560.avif 2560w"
          sizes="100vw">
  <img src="/img/terraza-1920.jpg"
       srcset="/img/terraza-1280.jpg 1280w, /img/terraza-1920.jpg 1920w, /img/terraza-2560.jpg 2560w"
       sizes="100vw" width="1920" height="1080"
       alt="Terraza del restaurante al atardecer con el mar al fondo">
</picture>

El navegador recorre los source en orden y usa el primero que cumpla tanto media como type. Así combinas encuadre y formato en una sola pieza.

En el estudio la dirección de arte empieza en la sesión de fotos, no en el código. Cuando sabemos que una imagen irá a la cabecera, pedimos al fotógrafo que deje aire alrededor del motivo principal, o directamente que dispare una versión vertical. Es mucho más fácil recortar bien una foto pensada para dos formatos que rescatar una que solo funcionaba en uno.

05La imagen principal y el LCP: cargar primero lo que importa

La imagen grande del primer pantallazo merece un trato especial, porque casi siempre es la que determina el LCP.

1. 01Que esté en el HTML. Si la imagen se inyecta con JavaScript o es un fondo CSS, el navegador la descubre tarde. Un img en el HTML se detecta en cuanto llega el documento.
2. 02Sin carga diferida. Nunca loading="lazy" en la imagen principal.
3. 03Con prioridad alta. El atributo fetchpriority="high" le indica al navegador que la descargue antes que otras imágenes.
4. 04Con dimensiones. Atributos width y height (o aspect-ratio en CSS) para que el espacio quede reservado y no haya saltos.
5. 05En el formato más ligero posible. Es la imagen donde más se nota cada kilobyte.

<img src="/img/hero-1920.avif"
     srcset="/img/hero-960.avif 960w, /img/hero-1920.avif 1920w, /img/hero-2560.avif 2560w"
     sizes="100vw" width="2560" height="1440"
     fetchpriority="high" alt="Interior del hotel con luz de mañana">

Para el resto de imágenes, loading="lazy" hace que solo se descarguen cuando están cerca de aparecer en pantalla, lo que reduce mucho el peso inicial en páginas largas. Si quieres profundizar en el resto de técnicas de velocidad, las tienes en la guía para optimizar LCP, INP y CLS.

06Flujo de trabajo para exportar y publicar sin pensar

La forma de que todo esto no dependa de la memoria de nadie es automatizarlo o, al menos, convertirlo en rutina.

Si tu web usa un CMS o un framework moderno

WordPress genera varios tamaños al subir una imagen y añade srcset automáticamente; con un plugin o con el propio servidor puede convertir a WebP o AVIF. Frameworks como Next.js incluyen un componente de imagen que genera los tamaños, negocia el formato con el navegador y añade la carga diferida. Los servicios de imagen en CDN (una red de servidores distribuida) hacen lo mismo cambiando parámetros en la URL. En todos los casos, lo que sigue siendo tarea humana es subir un original de calidad, elegir bien el encuadre y escribir el texto alternativo.

Checklist antes de subir una imagen

1. 01Recorta al encuadre definitivo y, si va en cabecera, prepara la versión vertical.
2. 02Exporta el original a un máximo de 2.560 píxeles en el lado largo, en sRGB (el espacio de color estándar de la web).
3. 03Elimina metadatos innecesarios, incluida la geolocalización si es una foto privada.
4. 04Nombra el archivo con palabras descriptivas: terraza-restaurante-atardecer.jpg.
5. 05Genera o deja que el sistema genere AVIF, WebP y los tamaños responsive.
6. 06Escribe un texto alternativo que describa lo que aporta la imagen en esa página.
7. 07Comprueba en PageSpeed Insights que el LCP y el peso total son razonables.

Como referencia orientativa, en nuestros proyectos intentamos que la imagen principal no pase de 150–250 KB en móvil y que una home completa con varias fotografías se quede por debajo de 1–1,5 MB en la carga inicial. No es una norma universal, pero ayuda a detectar cuándo algo se ha ido de las manos.

El texto alternativo, bien escrito

El atributo alt es lo que leen los lectores de pantalla y lo que entiende un buscador. Las pautas de accesibilidad WCAG 2.2 piden una alternativa textual para todo contenido no textual, y la forma de escribirla depende de la función de la imagen. Una foto que ilustra un plato del menú: «Arroz negro con alioli servido en paellera de hierro». Un icono decorativo junto a un texto que ya dice lo mismo: alt="", para que se omita. Ampliamos estos criterios en la guía sobre qué es la accesibilidad web.

07Imágenes que cargan rápido y se ven como deben

Preparar bien las imágenes es uno de esos trabajos que no se ven cuando están bien hechos y que lo cambian todo: la web abre al instante, las fotos se ven nítidas en cualquier pantalla y el encuadre respeta lo que el fotógrafo quiso contar. En SIMA lo resolvemos desde la propia sesión de fotos hasta el código, dentro de nuestros proyectos de desarrollo web. Si sospechas que tus imágenes están frenando tu web, escríbenos y le echamos un vistazo juntos.