Online Tool Store
Generador de srcset
Redimensiona una imagen a varios anchos con la API Canvas y genera el marcado <img srcset sizes> correspondiente y los archivos descargables.
🔒 Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Por defecto se usa una imagen de degradado de ejemplo: sube la tuya para reemplazarla.
Cómo funciona
- Sube una imagen (por defecto se muestra un degradado de ejemplo).
- Define tus anchos objetivo y una base de nombre de archivo: las vistas previas se actualizan al instante.
- Ajusta el atributo "sizes" para que coincida con cómo se muestra la imagen en tu diseño.
- Copia el marcado generado y descarga los archivos redimensionados para alojarlos junto a él.
FAQ
¿Qué genera realmente esta herramienta?
Redimensiona tu imagen subida a cada ancho objetivo con la API Canvas y luego escribe el marcado <img srcset sizes> correspondiente para que los navegadores puedan elegir el archivo adecuado para cada viewport.
¿Qué debo poner en el atributo "sizes"?
Una descripción al estilo CSS de qué tan ancha se muestra la imagen en distintos viewports; p. ej. "(max-width: 768px) 100vw, 50vw" significa que llena el viewport en móvil y la mitad en pantallas más grandes. Hazla coincidir con tu diseño real.
¿Tengo que subir los archivos redimensionados yo mismo?
Sí: "Descargar todos los tamaños" guarda cada JPEG redimensionado en tu dispositivo con un nombre de archivo que coincide con el marcado generado (p. ej. photo-640w.jpg). Súbelos a tu host de imágenes o CDN en esas mismas rutas.
¿Por qué las descargas son JPEG en lugar del formato original?
El JPEG mantiene los tamaños de archivo pequeños y predecibles para la entrega de fotos responsivas. Si necesitas salida PNG o WebP para transparencia o mejor compresión, redimensiona después con un conversor de imágenes dedicado.
¿Mi imagen se sube a algún sitio?
No. El redimensionado ocurre localmente en un <canvas> en tu navegador: el archivo original nunca sale de tu dispositivo.
Cómo nos comparamos
| Función | Online Tool Store | Redimensionado manual en un editor de imágenes | Servicios de redimensionado automático de imágenes de CDN |
|---|---|---|---|
| Genera el marcado correspondiente automáticamente | ✓ | ✗ | Depende del servicio |
| No requiere cuenta ni backend | ✓ | ✓ | ✗ |
| Gratis, sin coste por imagen | ✓ | ✓ | Precio por uso |
Si solo necesitas un conjunto puntual de imágenes responsivas y su marcado correspondiente, sin paso de build ni cuenta de CDN, esta herramienta produce ambos en una página.