WebP
Generates WebP copies of image style derivatives to decrease page loading times by serving smaller, optimized images to supporting browsers.
webp
Overview
The WebP module automatically creates WebP copies of image style derivatives whenever they are generated. WebP is a modern image format developed by Google that provides superior lossless and lossy compression for images on the web.
When integrated with Drupal's Responsive Image module, the module adds WebP source elements to picture tags, allowing browsers that support WebP to load the smaller WebP versions while falling back to standard formats (JPEG, PNG) for browsers that don't support WebP (like older Safari versions).
The module supports both GD and ImageMagick toolkits for image processing, automatically detecting which is available on your server. It also provides optional integration with the Image API Optimize module for more advanced image optimization workflows.
Features
- Automatically generates WebP copies of all image style derivatives
- Integrates with Drupal core's Responsive Image module to add WebP sources to picture elements
- Supports both GD library and ImageMagick for WebP conversion
- Configurable image quality setting (1-100)
- Automatically serves WebP images to browsers that accept them via Accept header detection
- Flushes outdated WebP derivatives when entities with image fields are updated
- Optional integration with Image API Optimize module as a processor plugin
- Works with both public and private file systems
- Handles various source formats including JPEG, JPG, and PNG
Use Cases
Improving Page Load Performance
A content-heavy website with many images can significantly reduce page load times by enabling the WebP module. WebP images are typically 25-35% smaller than comparable JPEG or PNG images at equivalent quality. The module automatically serves WebP to browsers that support it while maintaining compatibility with older browsers.
Responsive Image Galleries
For sites using Drupal's Responsive Image module to serve appropriately sized images for different screen sizes, the WebP module adds an additional layer of optimization. Each responsive image variant gets a corresponding WebP version, and the browser selects the best format and size combination.
Private File System with Optimized Images
Sites that serve images through Drupal's private file system can still benefit from WebP optimization. The module overrides the file download controller to generate and serve WebP versions on-demand when browsers request them.
Image Optimization Pipeline
For sites using the Image API Optimize module, WebP conversion can be added as a processor in the optimization pipeline alongside other optimizations like compression and resizing. This provides fine-grained control over when and how WebP images are generated.
Tips
- The default quality of 75 provides a good balance between file size and visual quality. Lower values produce smaller files but may show compression artifacts.
- When using with Image API Optimize, the processor's quality setting (default 100) takes precedence over the module's global quality setting.
- WebP images are stored alongside the original derivatives with .webp extension, so they don't replace your original images.
- The module automatically handles uppercase extensions (.JPG, .PNG) and converts them to WebP correctly.
- For development, you can see which images are being served as WebP by checking the Content-Type header in browser developer tools - it should show 'image/webp'.
Technical Details
Admin Pages 1
/admin/config/media/webp/settings
Configure the WebP image generation settings including the quality level for converted images.
Hooks 4
hook_help
Provides help text for the WebP module on the help page
hook_entity_insert
Flushes WebP derivatives when a new entity with image fields is created to ensure fresh WebP copies are generated
hook_entity_update
Flushes WebP derivatives when an entity with image fields is updated to ensure outdated WebP copies are removed
template_preprocess_responsive_image
Preprocesses responsive image templates to add WebP source elements at the top of the sources array, enabling browsers to select WebP when supported
Troubleshooting 5
Verify that your PHP installation has GD compiled with WebP support (check gd_info() for 'WebP Support') or ImageMagick with WebP format support. You can check this on the Status Report page (/admin/reports/status).
The module only generates WebP copies when image style derivatives are created. Flush image styles at /admin/config/media/image-styles or use 'drush image-flush' to regenerate all derivatives with WebP copies.
Ensure you're using the Responsive Image formatter for your image fields, not the standard Image formatter. The WebP sources are only added to responsive images through the picture element.
After changing the quality setting, you must flush image styles to regenerate derivatives. The quality setting only affects newly generated WebP copies.
Your server's GD library was compiled without WebP support, and ImageMagick either isn't installed or doesn't support WebP. Contact your hosting provider to enable WebP support in GD or install ImageMagick with WebP.
Security Notes 3
- The module respects Drupal's image derivative token system to prevent denial-of-service attacks through arbitrary image generation.
- Private file access controls are maintained - WebP versions of private images still require proper permissions.
- The module has Drupal.org security advisory coverage, meaning security issues will be addressed by the Drupal Security Team.