Generador de imágenes lazy load: imágenes optimizadas y LQIP
Prepara imágenes para carga diferida: un archivo optimizado a tamaño completo y un diminuto marcador de baja calidad (LQIP) para el efecto de desenfoque.
Cargando Generador de imágenes lazy load (LQIP)…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de imágenes lazy load (LQIP)
- 1
Abre Generador de imágenes lazy load (LQIP) en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Cómo crear imágenes y marcadores de posición para lazy loading
La carga diferida (lazy loading) consiste en descargar las imágenes situadas por debajo de la primera pantalla solo cuando el visitante se acerca a ellas al hacer scroll. Los navegadores modernos la admiten de forma nativa con el atributo loading="lazy" en una etiqueta img, y muchas webs añaden un LQIP (low-quality image placeholder): una versión diminuta y borrosa de la imagen que aparece al instante y se sustituye por la imagen real en cuanto llega. Ambas técnicas dependen de tener los archivos adecuados, y eso es lo que esta página te ayuda a producir.
Conviene tener claro qué hace el generador. Comprime tus imágenes con calidad 80 en su formato y tamaño originales, listas para cargarse en diferido. Cambiando dos ajustes crea también el marcador: una versión de unas pocas decenas de píxeles de ancho y baja calidad, que normalmente pesa bastante menos de 1 KB. No escribe HTML ni CSS ni desenfoca la imagen por sí mismo; el desenfoque lo aplica el navegador con CSS al ampliar el marcador.
Cómo usar el Generador de imágenes lazy load (LQIP)
- Arrastra tus imágenes a la zona de carga, haz clic para elegir archivos o pega una imagen con Ctrl+V. Esta página acepta archivos JPG, PNG, WebP, GIF y BMP, varios a la vez y de hasta 80 MB cada uno.
- Primera pasada, imágenes completas: deja los valores por defecto (calidad 80, tamaño original) o elige WebP en Format, y descarga los archivos optimizados.
- Segunda pasada, marcadores: abre Resize, elige Max y escribe 32 × 32, baja la calidad a unos entre 30 y 40 y en More options pon el patrón de nombre {name}-lqip. Descarga también estos archivos diminutos.
- Revisa el resultado con el deslizador antes/después: arrastra el divisor sobre la vista previa y consulta debajo las nuevas dimensiones, el peso, la calidad y el porcentaje ahorrado. Cada cambio en los ajustes vuelve a procesar todas las imágenes automáticamente.
- Descarga una imagen suelta o usa «Download all (ZIP)» para todo el lote. En «More options» también puedes fijar un valor de DPI y un patrón de nombre de archivo con {name}, {w} y {h}.
Consejos de lazy loading
- Nunca cargues en diferido la imagen LCP. La imagen principal o la primera imagen grande debe cargarse de inmediato; diferirla retrasa el Largest Contentful Paint. Optimízala mejor con el optimizador para web.
- Reserva el espacio. Da a cada imagen diferida atributos width y height (la línea «After» muestra el tamaño exacto) para que nada salte al cargar.
- Incrusta el marcador. Un marcador de unos cientos de bytes puede incrustarse como data URI o usarse como fondo CSS y desenfocarse con un filtro CSS hasta que cargue la imagen completa.
- Aligera también las imágenes completas. La carga diferida aplaza los bytes, no los elimina; convierte a WebP o pasa las carpetas grandes por el compresor de imágenes masivo.
Privado, gratis y rápido
Todo el trabajo se hace en tu navegador: las imágenes se decodifican, redimensionan y vuelven a codificar en tu propio dispositivo, así que nada se sube a un servidor. No hay registro, marca de agua ni límite diario, y los datos de ubicación y de cámara (EXIF) se eliminan de cada resultado.
Funciones
- Imágenes completas optimizadas con calidad 80
- Marcadores LQIP diminutos con el ajuste Max
- Patrones de nombre como {name}-lqip
- Salida WebP o AVIF opcional
- Dimensiones exactas para width y height
- Procesamiento por lotes y descarga ZIP
Preguntas frecuentes
¿Qué es un LQIP?
Un low-quality image placeholder: una versión muy pequeña y muy comprimida de una imagen que carga al instante y se muestra, normalmente desenfocada, hasta que llega la imagen completa.
¿La herramienta genera el código de lazy loading?
No. Solo produce los archivos de imagen. La carga diferida se hace con el atributo loading="lazy" o con una librería JavaScript en tu propio HTML.
¿Qué tamaño debe tener un marcador de posición?
Entre 16 y 40 píxeles de ancho con baja calidad, lo que suele dar un archivo de unos cientos de bytes. Pon Max en 32 × 32 y la calidad en torno entre 30 y 40.
¿Cómo creo el efecto blur-up?
Muestra el marcador estirado a tamaño completo con un filtro CSS blur y haz un fundido a la imagen completa cuando termine de cargar. La herramienta te da los dos archivos; el efecto sale de tu CSS.
¿Hay que cargar todas las imágenes en diferido?
No. Las imágenes visibles al abrir la página, sobre todo la más grande, deben cargarse con normalidad. La carga diferida es para imágenes más abajo en la página.
¿Se suben mis imágenes a un servidor?
No. Las imágenes se procesan localmente en tu navegador y nunca salen de tu dispositivo. Al cerrar la pestaña se descartan.