Generador de imágenes responsive
Crea las versiones para móvil, tablet y escritorio de tus imágenes en JPG y WebP, más el HTML <picture> para servirlas, de una vez y sin subir nada.
Gratis · Sin cuenta · Sin subidasJPEG, PNG, WebP, HEIC
Max 10 images · 5MB each
Formato
Un archivo por formato
Calidad
Mejor calidad
Redimensionar para
Opcional
Servir una sola imagen grande a todos los dispositivos hace que los celulares descarguen píxeles que nunca van a mostrar. La solución estándar son las imágenes responsive: varios anchos de la misma imagen y un HTML que deja al navegador elegir el adecuado. Hacerlo a mano implica exportar cada tamaño en cada formato y escribir los atributos srcset sin errores. Esta herramienta hace las dos cosas: por cada imagen que sueltas genera versiones JPG y WebP de 375 px (móvil), 768 px (tablet) y 1920 px (escritorio), y escribe el código.
El botón Copiar código te da un elemento <picture>, en HTML para páginas normales, Vue, Angular, Svelte o Astro, o en JSX para React y Next.js, con un <source> en WebP y un <img> en JPG como respaldo, cada uno con un srcset de los anchos generados (hasta tres). El <img> incluye sizes, el ancho y alto reales de la imagen (así el navegador reserva el espacio y la página no salta al cargar) y loading=lazy. Los anchos del srcset son los reales de cada archivo: una imagen de menos de 1920 px no se amplía. Los nombres coinciden con los archivos descargados, como foto-mobile.webp, y el ZIP incluye el código en picture.html y en picture.jsx, con un componente de React por imagen.
Antes de pegar el código, revisa dos detalles. El atributo sizes viene por defecto en 100vw, es decir, la imagen ocupa todo el ancho de la pantalla. Si va dentro de una columna más estrecha, ajústalo (por ejemplo, a (min-width: 1024px) 50vw, 100vw), porque si no el navegador elegirá archivos más grandes de lo necesario. Y la carga diferida es correcta para imágenes que están más abajo en la página, pero en la imagen principal de arriba conviene quitar loading=lazy para que cargue antes.
Para usarla, suelta hasta 10 imágenes a la vez (JPEG, PNG, WebP o HEIC, de máximo 5 MB cada una), ajusta la calidad si quieres y descarga los archivos por separado o en un ZIP con el HTML y el JSX incluidos. Sube los archivos a tu sitio en la misma carpeta y pega el código, cambiando las rutas si hace falta. Como todo se genera en tu navegador, los originales no salen de tu equipo y los archivos nuevos no llevan los metadatos originales.