Generador de srcset y sizes

Para qué sirve

Servir la misma imagen de 2000 px a un móvil de 390 px y a un monitor de escritorio es una de las causas más habituales de webs lentas. La solución estándar son las imágenes responsive: generar varias versiones de cada imagen y dejar que el navegador descargue la más pequeña que se vea nítida en cada pantalla.

Hacerlo a mano exige tres pasos tediosos y fáciles de equivocar:

1. Exportar la imagen en varios anchos y, para aprovechar los formatos modernos, en varios formatos.
2. Calcular el atributo sizes, que indica al navegador cuánto ocupará la imagen en la pantalla antes de que cargue el CSS.
3. Escribir el marcado <picture> con todos los srcset, el respaldo, width, height y los atributos de carga.

Esta herramienta hace los tres a la vez.

Cómo usar el generador

1. Suelta la imagen original, la de mayor resolución que tengas. Nunca se generan anchos mayores que el original.
2. Indica cómo se muestra en tu página:
   • Ancho completo: banners y portadas que ocupan toda la ventana.
   • Dentro de un contenedor: lo más habitual; la imagen ocupa el ancho del contenido hasta un máximo (por ejemplo, 1200 px).
   • En una cuadrícula: tarjetas de producto o de blog en varias columnas.
   • Ancho fijo: avatares, logotipos o miniaturas de tamaño constante.
3. Revisa los anchos recomendados. Se calculan para cubrir pantallas de alta densidad (2x) sin generar archivos innecesariamente grandes. Puedes añadir o quitar anchos a mano.
4. Elige los formatos: AVIF y WebP vienen activados, y siempre se añade un respaldo en JPG (o PNG si la imagen tiene transparencia).
5. Pulsa Generar, descarga el ZIP y copia el código.

Cómo se calcula el atributo sizes

sizes es la parte que más se suele hacer mal, y la que más importa. El navegador decide qué archivo descargar antes de conocer tu CSS, así que necesita que le digas cuánto medirá la imagen en cada caso. Si omites sizes, asume 100vw (toda la pantalla) y en escritorio descargará versiones mucho más grandes de lo necesario.

Algunos ejemplos de lo que genera la herramienta:

Con esa información, el navegador multiplica el ancho por la densidad de píxeles de la pantalla y elige el archivo más pequeño que lo cubre. En la guía de imágenes responsive con srcset y sizes lo explicamos paso a paso.

Qué anchos generar

Más variantes no siempre es mejor: cada una ocupa espacio en tu servidor y en la caché del CDN. La herramienta sigue estas reglas:

• Hasta 2x del ancho máximo en pantalla. Las pantallas de 3x existen, pero la diferencia visual entre 2x y 3x en fotos es imperceptible y el peso casi se duplica.
• Saltos del 30-50 % entre variantes (480, 640, 960, 1280, 1600…), suficiente para que siempre haya un archivo cercano al tamaño ideal.
• Nunca por encima del original: ampliar no añade detalle, solo peso.

El código generado

Puedes copiar tres variantes:

• <picture> con un <source> por formato moderno y un <img> de respaldo. Es la opción recomendada: cada navegador elige el mejor formato que soporta y, dentro de él, el ancho adecuado.
• <img srcset> en un solo formato (WebP), más corto, útil si no necesitas AVIF.
• next/image, por si usas Next.js. En ese caso no hace falta generar variantes, porque el framework las crea; lo importante es el sizes, que la herramienta calcula igual.

El código incluye siempre width y height (evitan saltos de contenido y mejoran el CLS) y loading="lazy". Si marcas Es la imagen principal (LCP), se sustituye por fetchpriority="high", que hace que el navegador la descargue antes. Solo debe usarse en la imagen más grande visible al cargar la página; lo explicamos en la guía sobre lazy loading y fetchpriority.

Preguntas frecuentes

¿Por qué no se generan anchos mayores que mi imagen?

Porque ampliar una imagen no aporta detalle: solo produce un archivo más grande e igual de borroso. Si necesitas versiones más grandes, parte de un original de mayor resolución.

¿Hace falta AVIF y WebP a la vez?

No es imprescindible, pero es lo ideal. AVIF suele ser un 20-30 % más ligero que WebP, y WebP sirve a los pocos navegadores que no soportan AVIF. El respaldo JPG queda para casos muy antiguos.

¿Dónde subo los archivos?

A cualquier carpeta pública de tu web. Indica su ruta en el campo Ruta pública (por ejemplo, /images/ o la URL de tu CDN) y el código usará esa ruta.

¿Se sube mi imagen a algún servidor?

No. Las variantes se generan en tu navegador con los mismos codificadores WebAssembly que el resto de ImageZap.