Generador de srcset
NuevoCrea código <img> responsivo con srcset y sizes a partir de tus anchos.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
Genera srcset, sizes y markup picture en un solo lugar
Escribir markup de imágenes responsivas a mano es complicado — la lista srcset, el atributo sizes correspondiente, el bloque <picture> con fallbacks WebP y AVIF — y un solo error tipográfico hace que el navegador descargue silenciosamente el archivo incorrecto. Este generador de srcset construye toda la etiqueta por ti: introduce un nombre de archivo y tus anchos, y produce un elemento <img> o <picture> responsivo completo y listo para copiar, con descriptores correctos, carga diferida y decodificación asíncrona.
Es un generador de imágenes responsivas gratuito que funciona completamente en el navegador — sin registro, nada se sube, y sigue funcionando sin conexión una vez cargado.
srcset y sizes, explicados
Una imagen responsiva necesita dos partes que trabajen juntas. srcset es la lista de archivos y sus anchos reales — hero-640.jpg 640w le dice al navegador que ese archivo tiene 640 píxeles de ancho. sizes describe qué tan ancha se mostrará la imagen en tu maquetación, por ejemplo (max-width: 600px) 100vw, 600px. El navegador lee sizes, multiplica por la relación de píxeles del dispositivo, y descarga el candidato srcset más cercano.
Cambia el descriptor a x y obtendrás markup de densidad de píxeles — logo.png 1x, logo@2x.png 2x — ideal para imágenes de tamaño fijo como logos e iconos en pantallas retina, donde los descriptores w y sizes serían excesivos.
Cuándo usar el elemento picture en su lugar
El srcset simple maneja el cambio de resolución — la misma imagen en diferentes tamaños. Recurre al elemento <picture> cuando necesites más control: servir formatos modernos con fallback, o art direction (un recorte diferente en móvil que en escritorio).
En modo <picture>, esta herramienta emite un <source type="image/avif">, un <source type="image/webp"> y un fallback <img> JPEG o PNG, para que los navegadores modernos obtengan el formato más pequeño y los más antiguos sigan viendo la imagen.
Redimensiona tu imagen a cada ancho, localmente
El markup es solo la mitad del trabajo — aún necesitas los archivos redimensionados reales. Arrastra una imagen a la herramienta y esta la redimensionará a cada uno de tus anchos directamente en un canvas HTML, luego te permitirá descargar el conjunto completo con nombres de archivo que coincidan exactamente con el markup generado (hero-320.jpg, hero-640.jpg, etc.).
No hay subida ni pipeline de compilación. Debido a que ampliar más allá del original solo añade desenfoque, la herramienta señala cualquier ancho que sea mayor que tu fuente para que tu conjunto de imágenes sea preciso.
Cómo se compara con Squoosh, Responsivebreakpoints.com y Cloudflare Image Resize
Squoosh (de Google) destaca en compresión y conversión de imágenes individuales — es excelente para elegir la calidad correcta para un WebP o AVIF. Pero no genera markup srcset ni produce una etiqueta de imagen responsiva completa para pegar en HTML. Es una herramienta de compresión, no un generador de markup.
Responsivebreakpoints.com de Cloudinary sube tu imagen a los servidores de Cloudinary para calcular los breakpoints óptimos y generar imágenes redimensionadas. Los resultados son sólidos, pero tu archivo abandona tu máquina y se aplican los términos de Cloudinary. Cloudflare Image Resize e Imgix son servicios CDN — procesan imágenes en el momento de entrega pero requieren configuración de cuenta, integración de API y facturación continua. El generador de srcset de UtiloKit ocupa una posición diferente: genera markup HTML completo y redimensiona imágenes localmente, del lado del cliente, sin subida, sin cuenta, sin costo y sin límites de tamaño de archivo.
Anchos, breakpoints y Core Web Vitals
Un conjunto de anchos confiable es 320, 640, 960, 1280 y 1920, aproximadamente duplicándose en cada paso para cubrir teléfonos hasta pantallas retina grandes; añade 2560 para heroes a pantalla completa. Servir una imagen del tamaño correcto es una de las mayores ganancias para los Core Web Vitals: menos bytes significa un Largest Contentful Paint más rápido, y agregar atributos width y height previene el desplazamiento de diseño (CLS) que perjudica tanto a los usuarios como al posicionamiento.
Añade loading="lazy" a las imágenes fuera de pantalla para que carguen solo cuando se desplacen a la vista, y fetchpriority="high" a tu hero para que cargue primero — ambos son interruptores de un clic aquí.
Privado, instantáneo y sin conexión — funciona en cualquier dispositivo
No hay nada que instalar ni cuenta que crear. Cada etiqueta se ensambla en tu navegador mientras escribes, y cualquier imagen que redimensiones se procesa localmente con la API canvas — nunca se sube nada. El generador funciona sin conexión una vez cargada la página, para que puedas crear markup img srcset y <picture> responsivo en cualquier lugar — en un avión, en un teléfono, sin Wi-Fi.
Frequently asked questions
¿Qué es srcset y para qué sirve?
El atributo srcset te permite listar varias versiones de la misma imagen en diferentes anchos para que el navegador pueda descargar la que mejor se adapte al dispositivo. En lugar de enviar un archivo grande a todos los visitantes, escribes srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" y el navegador elige la imagen más pequeña que siga viéndose nítida, ahorrando ancho de banda en teléfonos y sirviendo imágenes nítidas en laptops retina, todo sin JavaScript.
¿Cuándo debo usar srcset?
Usa srcset siempre que una imagen se muestre en diferentes tamaños en diferentes pantallas — banners hero, imágenes de artículos, fotos de productos, cualquier cosa fluida. Es la herramienta correcta para el cambio de resolución: la misma imagen, solo más grande o más pequeña. Si necesitas cambiar el recorte o la imagen real en ciertos breakpoints (art direction), usa el elemento picture. Los iconos y logos de tamaño fijo pequeño no necesitan srcset en absoluto.
¿Cómo uso srcset y sizes juntos?
srcset lista los archivos y sus anchos reales en píxeles (640w significa que el archivo tiene 640 píxeles de ancho); sizes le dice al navegador qué tan ancha se mostrará la imagen antes de que se calcule el diseño. Juntos: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". El navegador lee sizes — 'ancho de viewport completo bajo 600px, de lo contrario 600px' — calcula los píxeles necesarios (ancho de visualización × relación de píxeles del dispositivo) y luego elige el candidato srcset más cercano.
¿Cuál es la diferencia entre los descriptores w y x?
Los descriptores w describen el ancho real de cada archivo en píxeles — image-640.jpg 640w — y deben ir emparejados con sizes; el navegador luego hace los cálculos para cualquier pantalla. Los descriptores x describen solo la densidad de píxeles — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — y son adecuados para imágenes de tamaño fijo como un logo que solo necesita verse nítido en pantallas retina. Usa w para imágenes fluidas impulsadas por el diseño y x para las de dimensiones fijas.
¿Cómo sirvo WebP y AVIF con un fallback?
Usa picture con un source por formato moderno y un img normal como fallback: source type="image/avif" srcset="…", luego source type="image/webp" srcset="…", luego img src="hero.jpg" …. El navegador usa el primer formato que admite y recurre al JPEG o PNG img si no entiende ninguno, para que los navegadores más antiguos sigan obteniendo una imagen. Activa AVIF y WebP en el modo picture y esta herramienta escribe el bloque completo, descriptores incluidos.
¿Qué anchos de imagen debo generar?
Un conjunto de propósito general sólido es 320, 640, 960, 1280 y 1920 — cubriendo teléfonos pequeños hasta pantallas retina grandes — aproximadamente duplicándose en cada paso. Para imágenes hero a pantalla completa añade 2560; para contenido que nunca supera, digamos, 800px de ancho, no necesitas nada más ancho de unos 1600 (800 × 2 para retina). No generes tantos que los pasos sean inútiles; cuatro a seis anchos suele ser suficiente.
¿Por qué mi srcset no funciona?
Los culpables habituales: (1) estás probando en una pantalla donde el navegador decidió correctamente que el archivo más grande no es necesario — redimensiona la ventana o limita a una conexión lenta para ver el cambio; (2) sizes falta o es incorrecto, por lo que el navegador asume 100vw y descarga un archivo grande; (3) los archivos listados no existen realmente en esas rutas (revisa la pestaña de Red para ver 404s); (4) el caché está sirviendo un tamaño ya descargado. srcset es una sugerencia, y el navegador puede elegir una imagen en caché más grande — eso es por diseño.
Related tools
Ver todas las herramientas
Nuevo Escapar / Desescapar JSON
Escapa texto en bruto a una cadena segura para JSON y desescápala de vuelta.
Nuevo Códigos de estado HTTP
Referencia con búsqueda de los códigos de estado HTTP y su significado en lenguaje claro.
Nuevo Chuleta de regex
Referencia con búsqueda de los tokens y flags de las expresiones regulares.
Nuevo Tabla ASCII
Códigos de caracteres con búsqueda en decimal, hexadecimal, octal y binario.
Nuevo Conversor de PX a REM
Convierte entre px, rem, em y pt según un tamaño de fuente raíz.
Nuevo Conversor de columnas de hoja de cálculo
Convierte el número de una columna de hoja de cálculo a su letra (1 → A) y viceversa.