Generador LQIP Gratuito – Imágenes Placeholder Borrosas
Genera placeholders borrosos en base64, muestras de colores dominantes, SVGs y snippets.
Drop Image Here
or click to browse
Settings
Color Dominante
Rendimiento
- Original Size: -- KB
- LQIP Size: -- KB
- Reducción de Peso: --%
Crear un Placeholder Borroso perfecto para las imágenes de tu sitio web ahora es simple y gratuito. En lugar de cargar recursos pesados desde el principio ralentizando el tiempo de visualización, genera una versión Base64 borrosa. Integrar este snippet directamente en tu HTML o CSS proporciona información visual instantánea a los usuarios.
¿Cómo mejora LQIP las Web Vitals?
Al reservar el espacio visual con un ancho máximo definido y colores dominantes inteligentes, estas imágenes en miniatura (generalmente de menos de 1 KB) evitan el Desplazamiento Acumulativo de Diseño (CLS). Una carga progresiva es esencial para mantener una puntuación alta en Lighthouse.
Snippets listos para React y Next.js
El módulo de Salida Múltiple genera todos los formatos necesarios: Base64 estándar, Mini WebP, así como el snippet blurDataURL específico para Next.js y estilos CSS alineados listos para pegar.
Frequently Asked Questions
Cómo generar un marcador de posición LQIP
-
Cargue su imagen
Haz clic en el área de carga o arrastra y suelta cualquier imagen JPG, PNG, WebP o GIF. Tu archivo nunca sale del navegador: todo el procesamiento se realiza localmente. -
Ajustar desenfoque y tamaño
Establezca la intensidad del desenfoque, el ancho máximo del marcador de posición y el tamaño del archivo de destino en KB. Active el modo de optimización Ultra Tiny para obtener la compresión más agresiva. -
Elija el formato de salida
Cambia a la pestaña Multi Output y elige entre Base64 Data URI, Mini JPG, WebP Mini, SVG Blur, CSS inline background, HTML img snippet, React/Next.js blurDataURL, Tailwind snippet o JSON metadata. -
Copie o descargue el fragmento
Haga clic en el botón Copiar situado junto a la salida elegida o descargue el archivo del marcador de posición. Péguelo directamente en su código base: el marcador de posición estará listo para su uso inmediato.
Comparación del tamaño de LQIP
Típica reducción de tamaño de archivo conseguida con los marcadores de posición LQIP:
| Imagen original | Salida de LQIP | Reducción de tamaño | PedidosHTTP guardados |
|---|---|---|---|
| Foto de héroe 1920×1080 (850 KB) | Desenfoque Base64 20px ancho (~400 B) | ~99,95% | 1 (incrustado en línea) |
| Imagen de producto 800×800 (180 KB) | WebP Mini 30px ancho (~600 B) | ~99,7% | 1 (incrustado en línea) |
| Miniatura de blog 600×400 (90 KB) | Marcador de posición de desenfoque SVG (~800 B) | ~99,1% | 1 (incrustado en línea) |
| Avatar 200×200 (25 KB) | Bloque de color dominante (~50 B) | ~99,8% | 1 (incrustado en línea) |
Casos de uso común
Componentes de imagen Next.js / React
Genere la dirección URL exacta de blurDataURL que necesita el marcador de posición blur del componente Next.js Image: cópiela y péguela directamente en su código.
Evitar el desplazamiento acumulativo del diseño
Reserve el espacio exacto de la imagen antes de que se cargue el activo completo mediante cuadros de relación de aspecto y marcadores de posición en línea, eliminando los errores CLS en Core Web Vitals.
CDN y optimización del rendimiento Edge
Incruste marcadores de posición LQIP directamente en las respuestas HTML de su CDN o función de borde, entregando contenido visible antes de que se complete cualquier solicitud de CDN de imágenes.
Carga progresiva de imágenes
Cree transiciones fluidas de desenfoque a nitidez que mejoren el rendimiento percibido y mantengan la atención de los usuarios mientras se descargan imágenes de alta resolución.
Rendimiento móvil
En las conexiones móviles lentas, los marcadores de posición LQIP garantizan que los usuarios vean inmediatamente un contenido visual significativo en lugar de espacios en blanco o saltos de diseño.
Cómo funciona
Todo el procesamiento utiliza la API Canvas de HTML5, completamente en tu navegador, sin contacto con el servidor.
La imagen se dibuja en un pequeño lienzo (normalmente de 10 a 30 píxeles de ancho) y, a continuación, se aplica un filtro de desenfoque. El resultado se recodifica como JPG o WebP con alta compresión, produciendo un archivo de apenas unos cientos de bytes.
Los datos de píxeles del lienzo reducido se muestrean para calcular el color más predominante mediante un algoritmo de corte medio. También se extraen los 5 colores más frecuentes de la paleta para generar el esqueleto.
A partir del lienzo procesado, la herramienta genera simultáneamente todas las variantes de salida: Cadena Base64, URL Blob para descarga, envoltorio SVG, valor de imagen de fondo CSS y fragmentos de código específicos del marco.
A quién va dirigida esta herramienta
Desarrolladores de React y Next.js
Generar cadenas blurDataURL para el componente Next.js Image o las bibliotecas React lazy-load sin ningún plugin de compilación.
Ingenieros de rendimiento
Mejorar las puntuaciones de Core Web Vitals (CLS, LCP) sustituyendo los espacios en blanco de las imágenes por marcadores de posición LQIP ligeros y de tamaño correcto.
Desarrolladores Full-Stack
Incruste los URI de datos de LQIP directamente en HTML renderizado por el servidor para ofrecer contenidos percibidos al instante en el primer pintado.
Especialistas en web móvil
Mejore drásticamente la UX móvil en conexiones lentas mostrando marcadores de posición borrosos en lugar de cuadros de diseño vacíos.
Diseñadores UI/UX
Utilice la extracción de colores dominantes para diseñar pantallas esqueleto que coincidan visualmente con el contenido de la imagen entrante.
Consejos para una mejor aplicación del LQIP
- Mantenga el ancho de su marcador de posición LQIP en 10-20px - los navegadores lo escalan con CSS blur y el tamaño del archivo se mantiene por debajo de 500 bytes.
- Prefiera el URI de datos Base64 en lugar de una solicitud de archivo independiente para las imágenes de la mitad superior de la página: se incrusta en el HTML y se carga sin solicitudes HTTP adicionales.
- Utilice la extracción de colores dominantes para las pantallas esqueleto: un bloque de color sólido que coincida con el tono primario de la imagen parece más intencionado que un rectángulo gris liso.
- En Next.js, empareje siempre blurDataURL con placeholder="blur" en el componente Image - omitir el prop significa que los datos de desenfoque se ignoran.
- Pruebe su LQIP en un dispositivo móvil real acelerado a 3G: la transición de borroso a nítido debería ser imperceptible en las conexiones rápidas y elegante en las lentas.
Por qué LQIP es importante para el rendimiento web
- El desplazamiento acumulativo del diseño (CLS, Cumulative Layout Shift) es una métrica de Core Web Vitals directamente vinculada a las clasificaciones de búsqueda de Google. LQIP elimina el CLS causado por el retraso en la carga de las imágenes.
- La pintura de mayor contenido (LCP) mejora cuando los usuarios ven una respuesta visual significativa inmediatamente, incluso antes de que se cargue la imagen completa.
- En redes móviles con una media global de 15 Mbps, un marcador de posición LQIP de 200 bytes se renderiza en menos de 1 ms, frente a los más de 500 ms de una imagen principal de 1 MB.
- Las métricas de compromiso del usuario (tasa de rebote, tiempo en la página) mejoran de forma apreciable cuando el tiempo de carga percibido se reduce con técnicas de imagen progresiva.
Rendimiento y privacidad
Las imágenes cargadas nunca salen de tu dispositivo. La generación de LQIP, la extracción de colores y la creación de fragmentos se ejecutan completamente en el navegador mediante JavaScript y la API HTML5 Canvas. No hay cargas de servidor, no hay análisis de sus imágenes, y no se requiere una cuenta. La herramienta funciona sin conexión después de la primera carga de la página.
Nota educativa: LQIP, CLS y Core Web Vitals
LQIP frente a las pantallas esqueleto
LQIP utiliza una miniatura borrosa de la imagen real. Las pantallas esqueleto utilizan formas grises abstractas. LQIP ofrece a los usuarios un contexto espacial sobre el contenido entrante; los esqueletos son mejores cuando se desconoce el tipo de contenido.
Desplazamiento de diseño acumulativo (CLS)
CLS mide cuánto se desplazan inesperadamente los elementos de la página durante la carga. Una puntuación CLS superior a 0,1 es marcada por Google como "Necesita mejorar". Los marcadores de posición LQIP de tamaño adecuado reservan el espacio exacto y obtienen una puntuación de 0.
Indicadores web fundamentales
Desde 2021, las variables fundamentales de la web de Google (LCP, CLS e INP) influyen directamente en las clasificaciones de búsqueda. LQIP contribuye a mejorar LCP (contenido percibido más rápido) y cero CLS (sin cambio de diseño).
BlurHash frente a LQIP
BlurHash es una representación compacta (20-30 caracteres) descodificada en tiempo de ejecución por una biblioteca JavaScript. LQIP utiliza un JPEG/WebP diminuto que los navegadores renderizan de forma nativa. LQIP es más sencillo de implementar; BlurHash es más compacto.
Solución de problemas
¿Sabías que...?
La técnica LQIP fue popularizada por Facebook en 2015, cuando su equipo de ingenieros describió el uso de JPEG diminutos y borrosos para rellenar el espacio de la imagen antes de que se cargaran los activos completos en el News Feed. La técnica se generalizó después de que José M. Pérez publicara una detallada entrada en su blog en la que demostraba que un JPEG de 200 bytes podía sustituir a una imagen de marcador de posición de 40 KB sin ninguna diferencia perceptible en la transición. Hoy en día, LQIP es una característica estándar de Next.js, Gatsby, Astro y la mayoría de las CDN de imágenes modernas.
Navegue más rápido, tenga mejor aspecto, ocupe un puesto más alto
LQIP es una de las mejoras de rendimiento de mayor impacto y menor esfuerzo disponibles para los desarrolladores web modernos. Genere aquí sus marcadores de posición de desenfoque en cuestión de segundos, pegue el fragmento en su código base y observe inmediatamente mejoras en las puntuaciones CLS, el tiempo de carga percibido y la experiencia del usuario, todo ello sin enviar ni un solo byte de sus imágenes a ningún servidor.