Ancho necesario
w = s × d
Un hueco de 390 px con densidad 3 necesita 1170 px: se elige la variante 1280w.
Generador de imágenes responsivas
Genera localmente variantes PNG, JPEG o WebP y obtén un marcado HTML responsivo listo para integrar.
- Portapapeles
- Procesamiento por lotes
- Exportar
Tus archivos se procesan localmente en el navegador y nunca se envían a nuestros servidores.
Añade una imagen PNG, JPEG o WebP. Todas las variantes se generan localmente en tu navegador.
Suelta tu archivo aquí
Tamaño recomendado: hasta 25 MB
¿Necesitas más opciones?
Reúne varias herramientas de edición en un mismo espacio, con tu archivo abierto y sus cambios en curso.
Abrir el editor completo¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Una sola imagen grande ralentiza los móviles y una sola imagen pequeña se ve borrosa en una pantalla Retina. Este generador crea varios anchos de una misma imagen en WebP, JPEG o PNG y escribe el marcado HTML picture con srcset y sizes: así el navegador descarga el archivo que mejor encaja con la pantalla y el diseño. Todo se calcula en tu navegador.
Importa una imagen PNG, JPEG o WebP de hasta 25 MB. Marca los anchos que quieras entre 320, 480, 640, 768, 1024, 1280, 1600 y 1920 px (los seis primeros vienen marcados) o escribe anchos personalizados separados por comas. El alto sigue siempre las proporciones del original.
Elige los formatos (WebP y JPEG por defecto, PNG opcional) y la calidad JPEG/WebP, de 40 a 100 % (82 % por defecto). Los anchos mayores que el original se omiten, salvo que permitas ampliar. Cada variante se llama nombre-ancho.extensión, por ejemplo playa-verano-640.webp: el nombre pasa a minúsculas, sin tildes ni espacios.
El código generado contiene un elemento picture: una etiqueta source por formato moderno (WebP primero) y una img de respaldo en JPEG, o en PNG si no hay JPEG, cuyo src apunta a la variante más grande. El atributo sizes recoge lo que escribiste y se añaden loading="lazy" y decoding="async". Descarga todas las variantes y copia el código.
Cómo utilizar esta herramienta
Importa la imagen
Añade la versión más grande y nítida que tengas.
Ajusta las variantes
Elige anchos, formatos, calidad y el atributo sizes de tu diseño.
Descarga e integra
Guarda los archivos, copia el código y completa el atributo alt.
¿Qué ancho descarga el navegador?
El navegador multiplica el ancho indicado por sizes por la densidad de píxeles de la pantalla y suele elegir la variante más pequeña del srcset que alcanza ese valor.
- w
- ancho necesario de la imagen en píxeles
- s
- ancho de visualización dado por sizes, en píxeles CSS
- d
- densidad de píxeles de la pantalla (devicePixelRatio)
Casos de uso
Imagen principal de un artículo
Sirve 320 px a los móviles y 1280 px a las pantallas grandes a partir de una sola foto.
Pasar un sitio a WebP
Ofrece WebP a los navegadores que lo admiten y conserva un JPEG de respaldo.
Mejorar el LCP
Reduce el peso de la imagen más visible de una página para que se muestre antes.
Ejemplos
Foto de 2400 × 1600 px con los ajustes por defecto
Seis anchos × dos formatos. El código coloca primero la source WebP y una img playa-verano-1280.jpg con su srcset JPEG como respaldo.
Entrada
Playa verano.jpg, anchos de 320 a 1280, WebP + JPEG, calidad 82 %Resultado
12 archivos, de playa-verano-320.webp (320 × 213) a playa-verano-1280.jpg (1280 × 853)¿Qué archivo elige el navegador?
En un ordenador con densidad 1, el hueco de 768 px toma la variante 768w; con densidad 2 harían falta 1536 px: marca 1600 px para cubrirlo.
Entrada
sizes="(max-width: 768px) 100vw, 768px"Resultado
Móvil de 390 px con densidad 3: 1170 px → variante 1280wConsejos y buenas prácticas
- Escribe un atributo sizes fiel al diseño: con 100vw en una imagen mostrada a 600 px, el navegador descarga un archivo demasiado pesado.
- Incluye una variante de unas dos veces el ancho máximo de visualización para las pantallas de alta densidad.
- El código lleva alt="": sustitúyelo por una descripción, salvo si la imagen es puramente decorativa.
- No uses loading="lazy" en la imagen principal visible al cargar: quítalo para no retrasar el LCP.
Fuentes y referencias
- WHATWG, HTML Living Standard — Images and responsive images (se abre en una pestaña nueva)Página en inglés
Preguntas frecuentes
¿Para qué sirve el atributo sizes?
Indica el ancho con que se mostrará la imagen según la pantalla. Con srcset, el navegador deduce qué archivo descargar antes incluso de conocer el diseño.
¿Por qué no se generaron algunos anchos?
Superan el ancho del original. Ampliar no añade detalle; activa la opción solo si la necesitas.
¿Por qué WebP y JPEG a la vez?
WebP pesa menos a igual calidad; el JPEG de la etiqueta img sirve de respaldo para navegadores o herramientas que no leen WebP.
¿Los archivos se agrupan en un ZIP?
No, cada variante se descarga por separado; tu navegador puede pedirte que permitas varias descargas.
¿La calidad se aplica al PNG?
No. El PNG es sin pérdida: el control de calidad solo afecta a JPEG y WebP.
¿Se sube mi imagen a un servidor?
No. El redimensionado y la codificación se hacen en tu navegador.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Redimensiona una imagen definiendo con precisión su anchura y altura antes de descargarla.
Imágenes y diseño gráficoDestacadaUsar esta herramienta
Aligera una imagen ajustando su calidad o apuntando a un peso en KB, con el peso final visible antes de descargar.
Imágenes y diseño gráficoDestacadaUsar esta herramienta
Convierte una imagen a PNG, JPEG o WebP y ajusta la calidad antes de descargarla.
Imágenes y diseño gráficoDestacadaUsar esta herramienta
También te puede interesar
GuíaFormatosPrincipiante
PNG, JPEG, WebP o AVIF: ¿qué formato elegir?
Elige el formato de imagen adecuado para una foto, una captura, un recurso transparente o una interfaz, sin sacrificar innecesariamente la calidad ni el rendimiento.
31 de agosto de 202625 min
TutorialBuenas prácticasPrincipiante
¿Cómo comprimir una imagen sin perder calidad?
Reduce el peso de una imagen eligiendo las dimensiones adecuadas, el formato correcto y un nivel de calidad controlado, sin una degradación visible innecesaria.
31 de agosto de 202626 min
GuíaBuenas prácticasIntermedio
Imágenes responsive: entender srcset y sizes
Entiende srcset, sizes, los descriptores de anchura y densidad, picture, la dirección artística y cómo el navegador elige la imagen responsive adecuada.
31 de agosto de 202618 min
ActualidadFormatosIntermedio
WebP, AVIF, JPEG XL: ¿qué formatos de imagen elegir en 2026?
WebP, AVIF y JPEG XL responden a necesidades distintas. Compara compatibilidad, compresión, transparencia, HDR y estrategias de fallback en 2026.
30 de agosto de 20263 min