Crear un placeholder LQIP
Genera una imagen pequeña y desenfocada para mostrar mientras se carga una fotografía de mayor resolución en una web.
Guía basada en el código 2.0.1-rc.7. Las capturas muestran la interfaz en inglés de una edición de prelanzamiento; sus valores ilustran ejemplos, no necesariamente los ajustes iniciales. Los paquetes de Descargas pueden ser diferentes: revisa sus notas y las opciones de guardado antes de procesar.
En esta página
Qué hace y qué no hace
LQIP significa placeholder de imagen de baja calidad. Es una miniatura deliberadamente pequeña; no reemplaza la imagen final ni mejora su nitidez. Yagua genera la miniatura y su código, pero la transición a la fotografía final debe implementarse en el sitio.
Abre LQIP / Base64 y elige LQIP en Generación. Se trabaja con una imagen. El selector individual ofrece JPEG, PNG, WebP, BMP, TIFF, AVIF y HEIC/HEIF, según códecs. No está pensado para animaciones ni documentos multipágina; no preserva sus secuencias.
Controles
| Control | Valor inicial y rango |
|---|---|
| Seleccionar imagen | Reemplaza la imagen actual y restablece parámetros. |
| Generación | LQIP o Base64; inicialmente LQIP. |
| Ancho (px) | 20; entero mayor que 0. El alto se calcula proporcionalmente. |
| Radio de desenfoque (px) | 2; número finito mayor o igual que 0. |
| Calidad JPEG | 40; rango 10–80 para LQIP. |
| Generar | Produce el resultado de los ajustes actuales. |
| Código de salida | Data URI, HTML, CSS o Base64 puro. |
| Copiar código | Copia completo el formato seleccionado. |
| Exportar resultado… | Guarda TXT o JSON. |
| Limpiar | Quita imagen y resultado y vuelve a los valores iniciales. |
No hay un máximo de ancho impuesto por el campo. Elige tamaños pequeños para un placeholder: un ancho muy alto genera más trabajo y contradice su propósito. El desenfoque se aplica a la imagen reducida, no se expresa como porcentaje del original. 0 desactiva el desenfoque.
Procedimiento
- Selecciona una fotografía y espera la vista Original.
- Deja LQIP, Ancho 20, desenfoque 2 y calidad 40 para la primera prueba.
- Pulsa Generar.
- Compara Original y Resultado. Lee dimensiones, peso JPEG y tamaño de la Data URI.
- Elige un formato de Código de salida y usa Copiar código o exporta.
La salida de ambos modos del módulo es JPEG sin transparencia. Un PNG transparente no conserva su canal alfa ni garantiza un fondo blanco al convertirse aquí. Para controlar el fondo, prepara previamente una imagen opaca. La orientación del preview y la codificación pueden diferir en entradas con orientación EXIF: normaliza primero una copia si la orientación es crítica.
Ejemplo
Una imagen de 1600 × 900, Ancho 20, desenfoque 2 y calidad 40 genera un JPEG de 20 × 11 por redondeo. Se ve ampliado en pantalla para compararlo; no ganó resolución. El peso depende del contenido, no hay un tamaño garantizado.
La captura muestra una prueba distinta: ancho 1760, desenfoque 15 y calidad 55, con HTML seleccionado. Ilustra los controles y la comparación; ese ancho es mucho mayor que el de un placeholder pequeño. Para la primera prueba sigue los valores 20, 2 y 40 del procedimiento.
Formatos de código y guardado
- Data URI:
data:image/jpeg;base64,...; sirve como URL embebida ensrcourl(...). - HTML: etiqueta de imagen con esa URI y un texto alternativo derivado del nombre; adapta el alt al contenido real de tu sitio.
- CSS: regla con
background-image; el nombre de clase se deriva y normaliza a partir del archivo. - Base64 puro: cadena sin el prefijo MIME; el receptor debe saber que representa JPEG.
TXT exporta el formato elegido, precedido por un comentario con el nombre fuente. JSON incluye nombre y las cuatro representaciones. El nombre propuesto parte del original con _lqip. El diálogo permite cambiarlo; revisa si estás reemplazando un archivo existente. No hay un botón separado para guardar directamente el JPEG como imagen en esta pantalla.
Ajustes pendientes, copiado y limpieza
Modificar parámetros invalida el resultado: vuelve a Generar antes de copiar o exportar. Cambiar solo el formato de código no exige regenerar la imagen. La vista del código puede abreviarse; el botón Copiar código y la exportación conservan el contenido completo. Si no se puede verificar la copia completa al portapapeles, exporta el resultado.
Cambiar entre modos conserva sus parámetros mientras uses la misma imagen, pero requiere generar el resultado del modo elegido. Cargar otra imagen restablece LQIP, ancho 20, desenfoque 2, calidad LQIP 40, calidad Base64 85 y Data URI. Cancelar la selección conserva el estado anterior. Limpiar hace ese restablecimiento sin borrar archivos exportados.