ImageAPI Optimize WebP
Proporciona un procesador WebP para el módulo ImageAPI Optimize que crea automáticamente derivados WebP junto con los derivados originales de estilos de imagen.
imageapi_optimize_webp
Install
composer require 'drupal/imageapi_optimize_webp:^2.1'
composer require 'drupal/imageapi_optimize_webp:^2.0'
Overview
ImageAPI Optimize WebP extiende el módulo ImageAPI Optimize proporcionando un procesador WebP Deriver. Cuando este procesador se agrega a un pipeline de optimización, genera automáticamente versiones WebP de las imágenes con estilo junto con los derivados del formato original.
WebP es un formato de imagen moderno desarrollado por Google que proporciona una compresión superior para imágenes en la web. Este módulo permite que los sitios Drupal sirvan imágenes WebP a navegadores que lo soporten, resultando en cargas de página más rápidas y menor consumo de ancho de banda mientras se mantiene la calidad de imagen.
El módulo funciona interceptando la generación de estilos de imagen y creando una copia .webp de cada imagen procesada. También sobrescribe el controlador de descarga de estilos de imagen para servir correctamente los derivados WebP cuando se solicitan. Un sub-módulo complementario integra esta funcionalidad con el módulo Responsive Images de Drupal, agregando automáticamente fuentes WebP a los elementos picture de imágenes responsivas.
Features
- Proporciona un plugin de procesador WebP Deriver para pipelines de ImageAPI Optimize
- Genera automáticamente derivados WebP cuando se crean estilos de imagen
- Configuración ajustable de calidad de imagen (1-100%) para compresión WebP
- Controlador personalizado de descarga de estilos de imagen que sirve correctamente imágenes WebP con encabezados Content-Type apropiados
- Limpieza automática de derivados WebP cuando se vacían los estilos de imagen
- Sub-módulo para integración transparente con Responsive Images del core de Drupal
- Soporta tanto sistemas de archivos públicos como privados
- Funciona con la biblioteca de imágenes GD para conversión a WebP
Use Cases
Optimización de Imágenes WebP en Todo el Sitio
Configura un único Image Optimize Pipeline con el procesador WebP Deriver y establécelo como predeterminado para todo el sitio. Todos los estilos de imagen generarán automáticamente derivados WebP, reduciendo el uso de ancho de banda en todo tu sitio sin ninguna configuración adicional por estilo de imagen.
WebP Selectivo para Estilos de Imagen Específicos
Crea un pipeline dedicado con el WebP Deriver para estilos de imagen específicos de alto tráfico (como imágenes hero o galerías de productos) mientras dejas otros estilos de imagen usando formatos estándar. Asigna este pipeline solo a los estilos de imagen que más se beneficiarían de la compresión WebP.
Imágenes Responsivas con Soporte WebP
Habilita el sub-módulo ImageAPI Optimize WebP Responsive para servir automáticamente imágenes WebP a navegadores compatibles cuando uses imágenes responsivas. El módulo agrega fuentes WebP al elemento picture, permitiendo que los navegadores modernos seleccionen automáticamente la versión WebP mientras los navegadores antiguos recurren al formato original.
Equilibrio entre Calidad y Tamaño de Archivo
Ajusta la configuración de calidad por pipeline para encontrar el equilibrio óptimo entre calidad visual y reducción de tamaño de archivo. Para contenido fotográfico, una calidad del 75-85% típicamente proporciona excelentes resultados. Para gráficos más simples, valores más bajos como 60-70% pueden ser aceptables con mayor ahorro en tamaño de archivo.
Tips
- Comienza con la calidad predeterminada del 75% y ajusta según tu contenido de imagen específico y requisitos de calidad
- Usa las herramientas de desarrollador del navegador para verificar que las imágenes WebP se estén sirviendo comprobando el encabezado Content-Type en las solicitudes de red
- Limpia las cachés de estilos de imagen después de cambiar configuraciones de pipeline para regenerar derivados
- Monitorea el almacenamiento del sistema de archivos ya que los derivados WebP se almacenan junto a los derivados del formato original
- Considera usar un CDN que soporte negociación de contenido WebP para optimización adicional
Technical Details
Admin Pages 1
/admin/config/media/imageapi-optimize-pipelines
Configura los pipelines de Image Optimize y agrega el procesador WebP Deriver. Este módulo añade una opción 'WebP Deriver' al menú desplegable de selección de procesadores al crear o editar pipelines.
Hooks 2
hook_entity_type_alter
Reemplaza la clase de entidad ImageAPIOptimizePipeline con una implementación personalizada que maneja la gestión de archivos derivados WebP después del procesamiento del pipeline.
hook_image_style_flush
Elimina archivos derivados WebP cuando se vacía un estilo de imagen. Asegura que los archivos .webp se limpien junto con sus derivados fuente.
Troubleshooting 4
Asegúrate de que la biblioteca PHP GD esté instalada con soporte WebP. Verifica que el procesador WebP Deriver esté agregado a tu pipeline y que el pipeline esté asignado a tus estilos de imagen. Verifica que el directorio de archivos tenga permisos de escritura.
Limpia las cachés de Drupal para asegurar que el suscriptor de rutas haya sobrescrito correctamente las rutas de estilos de imagen. Verifica que la imagen fuente exista y pueda generar un derivado.
El módulo incluye una corrección para archivos WebP con tamaños de bytes impares. Si los problemas persisten, verifica la versión de la biblioteca GD y asegúrate de tener límites de memoria adecuados para el procesamiento de imágenes.
Habilita el sub-módulo ImageAPI Optimize WebP Responsive. Asegúrate de que el estilo de imagen responsiva use estilos de imagen que tengan pipelines con el procesador WebP Deriver asignado.