Optimizar una imagen para la web
Redimensionar, convertir a WebP y comprimir una imagen.
¿Para qué sirve esta plantilla?
Redimensionar, convertir a WebP y comprimir una imagen.
La plantilla prepara una imagen para una página web: la reduce a un ancho razonable y la codifica en WebP con una calidad ajustable. El archivo suele ser mucho más ligero que una foto de cámara o una captura PNG, lo que acelera la carga de la página.
Pasos del pipeline
Esta plantilla encadena automáticamente 4 pasos en el Workspace. Puedes revisar cada ajuste antes de ejecutarla.
- 1Importar una imagen
- 2Cambiar el tamaño de la imagen
- 3Convertir y comprimir
- 4Descargar la imagen
Por qué los pasos van en este orden
El redimensionado va antes de la conversión: así el codificador comprime la imagen en su tamaño final, algo más rápido y que da mejor peso que comprimir primero y reducir después.
¿Cuándo usar esta plantilla?
- Publicar una foto de 4000 px de ancho en un artículo de blog.
- Aligerar una captura PNG antes de añadirla a una documentación.
- Preparar una imagen de producto para una tienda en línea.
Procesamiento local en tu navegador
Cuando los módulos utilizados admiten procesamiento local, tus archivos permanecen en tu dispositivo durante la ejecución.
Ajustes que debes revisar
- Ancho: 1600 px por defecto, con la altura calculada para mantener las proporciones.
- Formato: WebP por defecto, JPEG o PNG como alternativa; calidad 82 sobre 100.
- Ajuste: «Contener» por defecto; «Cubrir» recorta para llenar exactamente un ancho y un alto.
Ejemplo
- Antes
- Foto JPEG de 4032 × 3024 px y 3,8 MB.
- Después
- WebP de 1600 × 1200 px, normalmente de unos cientos de kilobytes según el motivo.
Límites que conviene conocer
- Una imagen más estrecha que el ancho pedido se amplía y pierde nitidez: baja el ancho para esas imágenes.
- El PNG no tiene en cuenta la calidad: sigue sin pérdida y suele pesar mucho para una foto.
- El peso final depende del contenido: una imagen muy detallada pesa más que una de colores planos.