Generador de imágenes responsivas
Genera tamaños de imagen srcset para páginas web más rápidas
Crea múltiples anchos de imagen para diseños responsivos en un solo lote. Exporta puntos de ruptura comunes y copia-pega código HTML o Next.js directamente en tu proyecto.
Procesamiento local — sin subidasGenerar imágenes responsivas
Sube una imagen y selecciona tamaños de salida. Elige ratios de escala, anchos de breakpoint o añade dimensiones personalizadas.
Consejo: Comienza con una imagen de alta resolución para obtener los resultados más nítidos en todos los tamaños.
Sube o arrastra tus imágenes
Admite archivos PNG, JPG y WebP de hasta 25 MB cada uno. Los archivos nunca salen de tu navegador.
Arrastra y suelta imágenes o haz clic para navegar
PNG, JPG, WebP
Genera imágenes a diferentes factores de escala relativos al tamaño original
Anchos de viewport comunes para srcset — selecciona los tamaños que necesitas
5 sizes selected
Las imágenes responsivas permiten a los navegadores elegir el tamaño correcto para cada dispositivo, mejorando los tiempos de carga y Core Web Vitals. Esta herramienta genera variantes de ancho comunes desde una única imagen fuente.
Sube una vez, exporta tamaños de 320px a 1920px y obtén marcado srcset listo para usar. Todo se ejecuta localmente—tus imágenes permanecen privadas.
Múltiples puntos de ruptura a la vez
Genera anchos de 320, 640, 960, 1280 y 1920px en una única exportación por lotes.
Fragmentos de código listos para copiar
Obtén marcado HTML srcset o Next.js Image listo para insertar en tu código.
Optimizado para LCP
Sirve imágenes del tamaño apropiado para mejorar las puntuaciones de Largest Contentful Paint.
Puntos de ruptura responsivos recomendados
Anchos comunes que cubren viewports móviles, tablet y escritorio.
Cómo generar imágenes responsivas
Crea variantes de imagen optimizadas para srcset en unos pocos pasos.
Sube tu imagen fuente
Selecciona un JPG, PNG o WebP de alta resolución. Una fuente más grande da resultados más nítidos al reducir escala.
Añade tamaños responsivos
Usa la exportación multi-tamaño para añadir anchos de 320, 640, 960, 1280 y 1920px.
Mantén bloqueada la relación de aspecto para preservar las proporciones originales en todos los tamaños.
Procesa y descarga
Haz clic en Redimensionar para generar todas las variantes, luego descarga cada archivo o todos a la vez.
Copia el fragmento srcset
Usa el fragmento HTML o Next.js generado para añadir imágenes responsivas a tus páginas.
Cuándo usar imágenes responsivas
Imágenes hero y banners
Sirve 1920px a escritorios y archivos más pequeños a teléfonos, reduciendo drásticamente los tiempos de carga móvil.
Miniaturas de blog y artículos
Genera múltiples anchos para que los lectores en cualquier dispositivo obtengan una vista previa rápida y nítida.
Fotos de productos e-commerce
Proporciona imágenes de listado del tamaño apropiado para mejorar la velocidad de página y tasas de conversión.
Características
Exportación multi-tamaño por lotes
Añade varios anchos y genera todos desde una única fuente en un solo paso.
Relación de aspecto preservada
Las alturas escalan proporcionalmente para que las imágenes nunca se estiren o compriman.
Código listo para usar
Copia fragmentos HTML srcset o específicos del framework directamente en tu proyecto.
Privado y local
Todo el procesamiento ocurre en tu navegador. Las imágenes nunca se suben a un servidor.
Preguntas frecuentes sobre imágenes responsivas
¿Cómo escribo el atributo sizes?
El atributo sizes indica al navegador qué tan ancha se mostrará la imagen en cada viewport. Por ejemplo, `(max-width: 640px) 100vw, 50vw` significa ancho completo del viewport en pantallas pequeñas y la mitad en las más grandes. Ajústalo según tu diseño CSS.
¿Cuántos puntos de ruptura debería usar?
De cinco a siete anchos cubriendo desde móvil hasta escritorio es un buen valor predeterminado. Más tamaños añaden flexibilidad pero aumentan el almacenamiento. Comienza con 320, 640, 960, 1280 y 1920 y ajusta según análisis.
¿Qué pasa con las imágenes retina 2x?
Los navegadores seleccionan de srcset por ancho del viewport y densidad de píxeles. Si tu fuente más grande es 1920px, un teléfono retina podría elegir la versión de 1280px. Proporciona anchos mayores si la renderización retina nítida es importante.
¿Cómo ayuda esto al Largest Contentful Paint (LCP)?
LCP mide qué tan rápido carga el elemento visible más grande. Al servir imágenes más pequeñas a móviles, transfieres menos bytes y renderizas el hero más rápido, mejorando directamente tu puntuación Core Web Vitals.
¿Puedo usar estas imágenes con el componente Image de Next.js?
Sí. Si auto-alojas, coloca los archivos en /public y configura las fuentes de imagen correspondientemente. Para más control, el loader integrado de Next.js también puede generar tamaños sobre la marcha, pero pre-generar puede reducir la carga del servidor.
¿Necesito convertir a WebP o AVIF?
Los formatos modernos reducen aún más el tamaño de archivo. Puedes convertir en un paso separado o usar herramientas squoosh junto con este generador. Los navegadores que soporten el formato cargarán archivos más pequeños mientras otros recurren a JPG/PNG.
Abrir el redimensionador de imágenes
¿Listo para generar imágenes responsivas? Sube una foto y exporta múltiples anchos para tu sitio web.
Abrir el redimensionador de imágenes