Webp Image Converter

Image WebP Converter enhances Drupal's image handling by converting uploaded images to the efficient WebP format, improving site performance. It supports site-wide and per-node conversion with flexible settings.

Features

Basic Functionality

• Converts uploaded images to WebP format automatically.
• Provides site-wide settings to configure WebP conversion behavior.
• Allows optional per-node control for more granular conversion choices.
• Supports multiple conversion tools (cwebp, Imagick, and GD).
• Converts inline images embedded in CKEditor fields.

Unique Features

• Flexible Conversion Options – Choose different conversion tools based on your server capabilities.
• Per-Node Control – Site administrators can allow content editors to enable or disable WebP conversion on specific nodes.
• Logging & Debugging – Logs conversion status for troubleshooting and performance monitoring.

When and Why to Use This Module

• Use this module if you want to optimize your site's images for faster loading times without manually converting them.
• Ideal for Drupal websites with high image usage, such as blogs, e-commerce stores, and media-heavy portals.
• Helps improve Core Web Vitals and SEO rankings by reducing image file sizes.

Use Cases

• E-commerce Websites: Optimize product images to reduce load time and enhance user experience.
• News & Blogs: Automatically convert article images to WebP without extra effort from editors.
• Portfolio & Photography Sites: Maintain high-quality images with efficient compression.
• Content-Rich Websites: Reduce server bandwidth and storage consumption while delivering optimized images.

Post-Installation

Note: If the .webp extension is not allowed in your file or image fields, you need to manually add it in the field settings. Navigate to Structure → Content types → [Your Content Type] → Manage fields, edit the file or image field, and add webp to the list of allowed file extensions.

After installing the Image WebP Converter module, follow these steps to configure and use it effectively.

1. Verify Module Installation

Ensure the module is enabled by running the following Drush command:

drush pm:list | grep image_webp_converter

Alternatively, navigate to Extend in the Drupal admin panel and confirm that the module is enabled.

2. Required Library

The module requires the rosell-dk/webp-convert library. Install it using Composer ( if not installed with the module):

composer require rosell-dk/webp-convert:^2.9

3. Configure the Module

Go to Configuration > Media > Image WebP Converter Settings (admin/config/media/image-webp-converter) and configure the following options:

• Converter Selection: Choose between cwebp, Imagick, or GD.
• Image Quality: Set a value between 0-100 to balance compression and image clarity.
• Lossless Conversion: Enable if you want WebP images without quality loss.
• Per-Node Checkbox: Allow content editors to decide WebP conversion on a per-node basis.

Click Save Configuration after making changes.

4. Test WebP Conversion

Upload an image to a content type that supports image fields or CKEditor. If conversion is enabled:

• The uploaded image should be converted to WebP format.
• You can check the WebP file in public:// or your defined file directory.

5. Site wide Image Conversion

For converting images sitewide after configuring the converter settings visit the page /admin/config/media/image-webp-converter and start the conversion process by clicking the Start Conversion button, which will start the conversion process in batches.

6. Enable Per-Node WebP Control (Optional)

If the per-node setting is enabled, content editors will see a checkbox labeled Convert images to WebP in the node add/edit form. Ensure it is checked to apply WebP conversion.

7. Verify WebP Image Delivery

To confirm that WebP images are served correctly:

• Right-click on an image and select Inspect in your browser.
• Check the file extension in the image URL. It should end with .webp.

8. Clear Cache

If you face any issues, clear the Drupal cache by running:

drush cr

Additional Requirements

• Drupal core: 10.x or 11.x
• Required modules: image, file
• Required library: rosell-dk/webp-convert must be present on the site. You can find the library here: rosell-dk/webp-convert on GitHub
• Allowed file extensions: Ensure .webp is added to the allowed file extensions in file and image fields to enable WebP conversion.