WebP
Genera copias WebP de las derivadas de estilos de imagen para reducir los tiempos de carga de página sirviendo imágenes más pequeñas y optimizadas a los navegadores compatibles.
webp
Overview
El módulo WebP crea automáticamente copias WebP de las derivadas de estilos de imagen cada vez que se generan. WebP es un formato de imagen moderno desarrollado por Google que proporciona una compresión superior sin pérdida y con pérdida para imágenes en la web.
Cuando se integra con el módulo Responsive Image de Drupal, el módulo añade elementos source WebP a las etiquetas picture, permitiendo que los navegadores que soportan WebP carguen las versiones WebP más pequeñas mientras recurren a formatos estándar (JPEG, PNG) para navegadores que no soportan WebP (como versiones antiguas de Safari).
El módulo soporta tanto GD como ImageMagick para el procesamiento de imágenes, detectando automáticamente cuál está disponible en su servidor. También proporciona integración opcional con el módulo Image API Optimize para flujos de trabajo de optimización de imágenes más avanzados.
Features
- Genera automáticamente copias WebP de todas las derivadas de estilos de imagen
- Se integra con el módulo Responsive Image del core de Drupal para añadir fuentes WebP a los elementos picture
- Soporta tanto la biblioteca GD como ImageMagick para la conversión WebP
- Configuración ajustable de calidad de imagen (1-100)
- Sirve automáticamente imágenes WebP a navegadores que las aceptan mediante detección del encabezado Accept
- Elimina las derivadas WebP obsoletas cuando se actualizan entidades con campos de imagen
- Integración opcional con el módulo Image API Optimize como plugin procesador
- Funciona tanto con sistemas de archivos públicos como privados
- Maneja varios formatos de origen incluyendo JPEG, JPG y PNG
Use Cases
Mejora del rendimiento de carga de página
Un sitio web con mucho contenido e imágenes puede reducir significativamente los tiempos de carga de página habilitando el módulo WebP. Las imágenes WebP son típicamente 25-35% más pequeñas que imágenes JPEG o PNG comparables con calidad equivalente. El módulo sirve automáticamente WebP a navegadores que lo soportan mientras mantiene la compatibilidad con navegadores antiguos.
Galerías de imágenes responsivas
Para sitios que usan el módulo Responsive Image de Drupal para servir imágenes de tamaño apropiado para diferentes tamaños de pantalla, el módulo WebP añade una capa adicional de optimización. Cada variante de imagen responsiva obtiene una versión WebP correspondiente, y el navegador selecciona la mejor combinación de formato y tamaño.
Sistema de archivos privados con imágenes optimizadas
Los sitios que sirven imágenes a través del sistema de archivos privados de Drupal aún pueden beneficiarse de la optimización WebP. El módulo sobrescribe el controlador de descarga de archivos para generar y servir versiones WebP bajo demanda cuando los navegadores las solicitan.
Pipeline de optimización de imágenes
Para sitios que usan el módulo Image API Optimize, la conversión WebP puede añadirse como procesador en el pipeline de optimización junto con otras optimizaciones como compresión y redimensionamiento. Esto proporciona un control detallado sobre cuándo y cómo se generan las imágenes WebP.
Tips
- La calidad predeterminada de 75 proporciona un buen equilibrio entre tamaño de archivo y calidad visual. Valores más bajos producen archivos más pequeños pero pueden mostrar artefactos de compresión.
- Cuando se usa con Image API Optimize, la configuración de calidad del procesador (por defecto 100) tiene precedencia sobre la configuración de calidad global del módulo.
- Las imágenes WebP se almacenan junto a las derivadas originales con extensión .webp, por lo que no reemplazan sus imágenes originales.
- El módulo maneja automáticamente extensiones en mayúsculas (.JPG, .PNG) y las convierte a WebP correctamente.
- Para desarrollo, puede ver qué imágenes se están sirviendo como WebP comprobando el encabezado Content-Type en las herramientas de desarrollador del navegador - debería mostrar 'image/webp'.
Technical Details
Admin Pages 1
/admin/config/media/webp/settings
Configure los ajustes de generación de imágenes WebP incluyendo el nivel de calidad para las imágenes convertidas.
Hooks 4
hook_help
Proporciona texto de ayuda para el módulo WebP en la página de ayuda
hook_entity_insert
Limpia las derivadas WebP cuando se crea una nueva entidad con campos de imagen para asegurar que se generen copias WebP frescas
hook_entity_update
Limpia las derivadas WebP cuando se actualiza una entidad con campos de imagen para asegurar que se eliminen las copias WebP obsoletas
template_preprocess_responsive_image
Preprocesa las plantillas de imágenes responsivas para añadir elementos source WebP al principio del array de fuentes, permitiendo a los navegadores seleccionar WebP cuando esté soportado
Troubleshooting 5
Verifique que su instalación de PHP tiene GD compilado con soporte WebP (compruebe gd_info() para 'WebP Support') o ImageMagick con soporte de formato WebP. Puede comprobar esto en la página de Informe de Estado (/admin/reports/status).
El módulo solo genera copias WebP cuando se crean las derivadas de estilos de imagen. Limpie los estilos de imagen en /admin/config/media/image-styles o use 'drush image-flush' para regenerar todas las derivadas con copias WebP.
Asegúrese de estar usando el formateador Responsive Image para sus campos de imagen, no el formateador Image estándar. Las fuentes WebP solo se añaden a imágenes responsivas a través del elemento picture.
Después de cambiar la configuración de calidad, debe limpiar los estilos de imagen para regenerar las derivadas. La configuración de calidad solo afecta a las copias WebP recién generadas.
La biblioteca GD de su servidor se compiló sin soporte WebP, e ImageMagick no está instalado o no soporta WebP. Contacte a su proveedor de hosting para habilitar el soporte WebP en GD o instalar ImageMagick con WebP.
Security Notes 3
- El módulo respeta el sistema de tokens de derivadas de imagen de Drupal para prevenir ataques de denegación de servicio a través de generación arbitraria de imágenes.
- Los controles de acceso a archivos privados se mantienen - las versiones WebP de imágenes privadas aún requieren los permisos apropiados.
- El módulo tiene cobertura de avisos de seguridad de Drupal.org, lo que significa que los problemas de seguridad serán atendidos por el Equipo de Seguridad de Drupal.