Preparar imágenes para una web
Prepara un JPEG de 4000 × 3000 como WebP de 1600 × 1200 con Yagua, con un LQIP opcional para tu 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
Objetivo del ejemplo
Partimos de una fotografía JPEG de 4000 × 3000. Queremos una versión WebP de 1600 × 1200, con un equilibrio de peso y detalle que revisaremos visualmente. También prepararemos un LQIP de esa misma imagen.
Conserva originales/, redimensionadas/ y web/ como carpetas separadas. Los valores siguientes son un punto de partida, no una calidad universal recomendada para todas las imágenes.
En cada operación de tamaño o conversión, elige Crear copias (Create copies) en Guardado (Saving). Revisa la carpeta y la confirmación antes de continuar para conservar la entrada de cada paso.
1. Elegir el encuadre
Para conservar toda la foto y su proporción, no recortes. Si el diseño de la web exige 16:9, usa primero Recortar, recordando que el encuadre es centrado. El resultado pierde los bordes: revisa que el sujeto permanezca dentro.
Si el diseño exige un rectángulo pero no puedes recortar el contenido, usa Canvas para agregar fondo. Un preset de Redimensionar puede estirar la imagen si no coincide la proporción; no sustituye automáticamente al recorte.
2. Reducir las dimensiones
- Abre Redimensionar → Redimensionar y carga el original.
- Elige Píxeles.
- Escribe Ancho 1600 y deja Alto vacío.
- Ejecuta y guarda en
redimensionadas/.
El resultado esperado es 1600 × 1200 si partiste de 4000 × 3000 sin recortar. Abre esa salida y compruébala. Si redujiste el encuadre antes, el alto resultante será otro.
3. Convertir la salida
- Abre Convertir y carga el archivo de
redimensionadas/, no el original por error. - Elige WEBP y Calidad 85 para una primera prueba.
- Convierte a
web/y compara peso, detalle y compatibilidad con el destino. - Si necesitas otra prueba, vuelve a la copia de trabajo de mayor calidad y usa una carpeta distinta.
No comprimas repetidamente la última salida para perseguir un número de bytes: las pérdidas pueden acumularse. El peso final depende del contenido. Para un logo o dibujo con transparencia, considera PNG o WebP y comprueba los bordes.
4. Generar un LQIP opcional
- Carga el WebP final en LQIP / Base64.
- Elige LQIP, Ancho 20, desenfoque 2, Calidad 40.
- Genera y copia Data URI o exporta JSON.
- Entrega al desarrollador tanto la imagen WebP final como el código LQIP.
La miniatura es un JPEG opaco. Yagua no conecta la miniatura con la imagen final ni agrega código de carga progresiva a tu sitio; eso se implementa fuera de la aplicación.
5. Revisión antes de publicar
- Verifica ancho y alto del archivo servido.
- Mira la imagen a su tamaño de uso, incluidos bordes y texto fino.
- Revisa la necesidad de metadatos antes de compartir; la conversión no es una garantía general de limpieza de toda información.
- Prepara texto alternativo adecuado en la web; el nombre de archivo no lo reemplaza.
- Conserva el original y la copia de trabajo para futuros tamaños.
Puedes repetir los pasos de conversión y tamaño por lotes de hasta 100 imágenes, pero LQIP / Base64 trabaja con una por vez. Usa una prueba pequeña antes del lote completo.