WebP Converter

Download

Step 1: Purchase the Extension

• Purchase the WebP Converter Plugin from the Joomla store.

Step 2: Check Your Email

• You will receive an email with a download link for the extension.

Step 3: Create an Account (Optional)

• Alternatively, create an account in the Joomla store using the same email address used for the purchase (not the PayPal address).
• Log in to your account.

Step 4: Navigate to Downloads Section

• Go to the downloads section of the store.
• Find the option to download the WebP Converter Plugin.
• Note: You can also find the license key here, which is needed for future updates.

Step 5: Download the Extension

• Click on the download link to get the file named WebPConverter_UNZIP.zip.

Step 6: Unzip the Package

• Use an Unzipper or unarchive software to unzip the package.
• The package contains two files:
  1. The installable plugin file - plg_webpconverter.zip
  2. The ReadMe.txt file with version information.

Step 7: Update the Extension (if applicable)

• If you have an active license, you can update the extension directly from the Joomla update manager.

Now, you have successfully downloaded and unzipped the WebP Converter Plugin for Joomla, and you can proceed with the installation and configuration as per your needs.

Installation

Step 1: Log in to Joomla Admin Panel

• Log in to your Joomla website's administrator panel using your credentials.

Step 2: Navigate to Extensions Manager

• From the main menu, select System > Extensions > Manage > Install.

Step 3: Choose the Installation Method

• You will see several options for installing extensions. Choose the "Upload Package File" method.

Step 4: Upload the Plugin File

• Click the Choose File button or drag and drop the plg_webpconverter.zip file into the designated area.
• Click the Upload & Install button.

Step 5: Verify Installation

• Once the installation is complete, you should see a success message confirming the installation.
• You can verify the installation by going to Extensions > Plugins and searching for "WebP Converter."

Step 6: Enable the Plugin

• Find the WebP Converter Plugin in the list and click on the red "X" or the status icon to enable it.
• Configure the plugin settings as needed by clicking on the plugin's name.

Step 7: Test the Plugin

• Visit your frontend pages to see the plugin in action. You can temporarily enable Debug Mode to see which images are being converted.

Compatibility Note: This plugin is compatible with Joomla 4 and Joomla 5 only.

How it works

WebP Converter - Working Principles

Understanding how the WebP Converter plugin works will help you use it effectively and troubleshoot any issues that may arise.

1. Image Detection and Conversion

• Automatic Image Detection: When a page loads, the plugin scans the HTML content for image tags (<img>) and CSS background images.
• Smart Format Recognition: The plugin identifies JPG, JPEG, PNG, and GIF images for conversion to the WebP format.
• Intelligent Processing: If an image has already been converted to WebP, the plugin checks if the original image has been modified since the last conversion. If the original is newer, a new WebP version is generated automatically.

2. WebP Image Storage and Delivery

• Server-Side Storage: WebP images are stored alongside the original images with an additional "_iwebp" suffix in the filename.
• Efficient Delivery: When a page loads, the plugin replaces image paths in the HTML to point to the WebP versions, delivering smaller files to visitors.
• One-Time Conversion: Images are only converted once, not on every page load, which saves server resources. The converted WebP images are reused unless the original image changes.

3. Memory-Efficient Processing

• Lightweight Processing: The plugin uses memory-efficient techniques to handle large numbers of images without overloading your server.
• Resource Monitoring: The plugin constantly monitors memory usage and stops processing if it approaches server limits to prevent crashes.
• Smart Caching: The plugin uses filesystem-based verification to avoid redundant processing of images.

4. Batch Conversion Options

• Folder-Based Processing: You can convert entire folders of images at once, perfect for processing your media library in advance.
• Selective Conversion: Exclude specific images, formats, or site sections from conversion using the comprehensive exclusion settings.

5. Image Update Handling

• Automatic Detection of Changes: When you update an image through the Joomla Media Manager, the plugin automatically detects this change the next time the page containing that image loads.
• Smart Regeneration: The plugin compares the modification timestamps between original and WebP versions, regenerating the WebP version only when the original has been updated.

6. Limitations and Considerations

• Local Images Only: The plugin only processes images stored within your Joomla site's filesystem. External images (from other domains) are not converted.
• Non-Standard Image Display: Some third-party extensions may display images using non-standard methods. In such cases, you might need to use the batch conversion feature instead of relying on automatic detection.

Setup

Configuration Guide

After installation, you can configure the plugin by navigating to Extensions > Plugins and searching for "WebP Converter." Click on the plugin name to access the settings.

General Settings

WebP Quality

• Purpose: Controls the quality-to-size ratio of generated WebP images.
• Range: 5-100 (Low to High quality)
• Recommendation: 70-85 offers the best balance between quality and file size reduction.
• Note: Higher values produce better quality images but larger file sizes, defeating the purpose of using WebP format.

Use Lightweight Processing

• Purpose: Enables memory-efficient processing for pages with many images.
• Recommendation: Keep enabled (Yes) for best performance.
• When to disable: Only if you experience issues with certain complex HTML structures.

Debug Mode

• Purpose: Displays detailed information about image conversion on frontend pages.
• What it shows: Original and WebP image paths, file sizes, compression ratios, total savings, and any errors.
• When to use: During setup or troubleshooting only. Disable in production environments.

Show Errors

• Purpose: Displays conversion error messages on the frontend when debug mode is enabled.
• Recommendation: Only enable during troubleshooting.

Exclusion Settings

Exclude Image Formats

• Purpose: Allows you to exclude certain image formats (JPG, PNG, GIF) from conversion.
• When to use: If certain formats create issues when converted to WebP, or if you want to focus conversion on specific formats only.

Disable for Menu Items

• Purpose: Excludes specific menu items from WebP conversion.
• Usage: Select menu items where you want to keep original image formats.
• Example: When certain pages have compatibility issues with WebP or for testing comparison.

Disable for Components

• Purpose: Prevents WebP conversion within specific Joomla components.
• Usage: Select components where WebP conversion should be skipped.
• Example: When a third-party component has issues with WebP images.

Disable for URLs

• Purpose: Prevents WebP conversion on specific URLs.
• Format: One URL per line. URLs can be partial - any page containing that URL segment will be excluded.
• Example: Useful for test pages or specific sections of your site.

Exclude Images

• Purpose: Excludes specific images from WebP conversion by filename.
• Format: One filename per line (e.g., "my-image.jpg").
• When to use: For images that don't convert well to WebP or need to remain in their original format.

Manage Settings

Select Folder

• Purpose: Choose a specific folder within your site's images directory for batch conversion.
• Options: Select from available folders within your Joomla images directory.
• Usage: Used with the Generate WebP Images button for bulk conversion.

Generate WebP Images

• Purpose: Batch converts all eligible images in the selected folder to WebP format.
• Process: Shows progress of conversion and results for each image.
• Benefit: Pre-converts images rather than waiting for them to be processed when pages load.

Delete Generated WebP Images

• Purpose: Removes all WebP images created by the plugin.
• When to use: When you want to restart conversion with different settings or completely uninstall the plugin.
• Note: This does not affect your original images.

Memory Usage Threshold

• Purpose: Sets the maximum memory usage limit before the plugin stops processing to prevent server crashes.
• Options: 60%, 70%, 80%, or 90% of PHP memory limit.
• Recommendation: 80% for most sites; lower for shared hosting environments.

FAQs

Frequently Asked Questions

General Questions

1. What is WebP format and why should I use it?

WebP is an image format developed by Google that provides superior compression compared to JPEG and PNG formats. Images converted to WebP are typically 25-35% smaller than their JPEG or PNG equivalents while maintaining similar visual quality. This results in faster page loading, better SEO rankings, reduced bandwidth usage, and improved user experience.

2. What are the system requirements for the WebP Converter plugin?

The WebP Converter plugin requires Joomla 4 or Joomla 5. It's no longer compatible with Joomla 3.x. The plugin uses Joomla's native image handling capabilities, so no additional server requirements beyond what Joomla needs are necessary.

3. Will WebP images work in all browsers?

All modern browsers (Chrome, Firefox, Safari, Edge) support WebP images. The plugin only serves WebP images to browsers that can display them correctly. Older browsers will still see the original image formats.

Setup and Configuration

4. What quality setting should I use for WebP images?

For most websites, a quality setting between 70-85 provides the optimal balance between image quality and file size reduction. Higher settings (90+) might not provide significant file size advantages over the original formats. Start with 80 and adjust based on your specific requirements.

5. How do I know if the plugin is working correctly?

Enable the Debug Mode temporarily in the plugin settings and visit your website's frontend. You'll see a detailed table at the bottom of the page showing all processed images, their file sizes before and after conversion, and the space saved. Also, you can check your images directory for files with "_iwebp.webp" suffix - these are the converted WebP images.

6. Why is the plugin not converting some of my images?

Several reasons might cause this:

• The image format may be excluded in your plugin settings
• The image might be from an external website (not hosted on your server)
• The page or component displaying the image might be in your exclusion settings
• The image might be displayed using a non-standard method that the plugin cannot detect
• The image filename might be in your excluded images list

Use Debug Mode to see which images are being processed and why some might be skipped.

Performance and Usage

7. Will the plugin slow down my website?

No, the plugin is designed to be highly efficient. It uses lightweight processing methods and only converts images once, not on every page load. The converted WebP images are stored on the server and reused, which actually improves performance by delivering smaller image files to your visitors. The "Use Lightweight Processing" option ensures minimal memory usage even with many images.

8. What happens when I update an image through the Joomla Media Manager?

When you replace an image via the Media Manager, the plugin automatically detects this change the next time a page containing that image loads. It compares the modification timestamps of the original and WebP versions, and if the original is newer, it generates a fresh WebP version. This ensures your WebP images always stay in sync with your originals without manual intervention.

9. Do I need to delete old WebP images when updating my site?

Generally, no. The plugin intelligently manages WebP versions by checking file modification dates. However, if you're making dramatic changes to your site or if you want to regenerate all WebP images with different quality settings, you can use the "Delete Generated WebP Images" button to remove all WebP files, which will then be regenerated as pages are loaded.

Troubleshooting

10. The plugin is causing high server memory usage. What can I do?

Ensure "Use Lightweight Processing" is enabled in the plugin settings. Adjust the "Memory Usage Threshold" to a lower value (like 60% or 70%). Consider using the batch conversion tool for folders with many images instead of relying on page-load conversion. If problems persist, try excluding components or sections of your site that contain many images.

11. Some of my images look different after conversion to WebP. Why?

WebP is a lossy format (like JPEG), so some minor visual differences may occur, especially at lower quality settings. Try increasing the WebP quality setting to 85-90 for important images. If specific images still have quality issues, add them to the "Exclude Images" list to keep them in their original format.

12. I'm using a third-party extension for galleries/sliders, and the WebP images don't appear. How can I fix this?

Some third-party extensions use custom methods to display images that may bypass the normal HTML image tags. Try these solutions:

• Use the batch conversion tool to pre-convert all gallery images
• Check if the extension has its own WebP support options
• Contact the extension developer to ensure compatibility with WebP images

13. How do I completely disable the plugin for testing?

Go to Extensions > Plugins, find the WebP Converter plugin, and click the green check mark to disable it (it will turn into a red X). This completely stops the plugin from processing any images. To re-enable it, click the red X.

Advanced Usage

14. Can I use the WebP Converter with a Content Delivery Network (CDN)?

Yes, the plugin is compatible with most CDNs. Since the WebP images are created as physical files on your server with predictable naming (original filename + "_iwebp.webp"), they can be cached and delivered by your CDN just like any other image file.

15. How much disk space will the WebP images take?

WebP images are typically 25-35% smaller than their JPEG or PNG equivalents, so the additional disk space required is less than you might expect. For example, if your original images take 100MB, the WebP versions might add approximately 65-75MB of additional storage. The storage benefit is outweighed by the performance improvements and bandwidth savings for your visitors.

16. How can I automate the conversion process for large sites?

For sites with thousands of images, the most efficient approach is to use the batch conversion tool in the plugin settings. Select each folder in your images directory and use the "Generate WebP Images" button to process them all. This can be done in stages for very large image libraries. Once all existing images are converted, the plugin will automatically handle new or updated images during normal site operation.

Advanced Guide

Advanced Usage and Optimization Guide

Optimizing Conversion Performance

Balance Quality and Size

Finding the optimal quality setting is crucial for maximizing WebP benefits:

• Photography-focused sites: Use quality settings of 80-85 to preserve image details
• E-commerce sites: 75-80 works well for product images
• Sites with illustrations/graphics: Lower settings (65-75) often work without noticeable quality loss

Consider using different quality settings for different image types by selectively excluding certain images and processing them separately with different settings.

Memory Management Strategies

For sites with hundreds or thousands of images:

1. Pre-conversion strategy: Use the batch conversion tool to process images before they're needed by visitors. This distributes processing load over time rather than during page loads.
2. Staged rollout: Enable the plugin on less crucial sections of your site first, then expand to busier sections once you've confirmed it's working well.
3. Memory threshold adjustment: On shared hosting with limited resources, set the memory threshold to 60-70% to prevent resource exhaustion.

Integration with Other Performance Plugins

The WebP Converter works well with other performance plugins, but consider these tips:

• Caching plugins: Clear cache after enabling WebP Converter to ensure WebP images are included in cached pages
• Image optimization plugins: Run WebP conversion after other image optimizations for best results
• Lazy loading: WebP Converter is fully compatible with lazy loading techniques

Handling Special Cases

Logos and Icons

For critical brand assets like logos, consider these approaches:

• Use higher quality settings (90+) for logos and important brand images
• For small icons, sometimes PNG remains more efficient than WebP - test both formats
• SVG format is often better than either PNG or WebP for logos and icons

Background Images

The plugin processes CSS background images as well as <img> tags. For complex backgrounds:

• Large, detailed background images benefit significantly from WebP conversion
• Patterns and textures often compress extremely well with WebP
• For gradient backgrounds, consider using CSS gradients instead of images

Monitoring and Maintenance

Regular Checks

To ensure continued optimal performance:

• Enable debug mode periodically to review conversion statistics
• Check unconverted images to see if any patterns emerge
• Monitor server disk space usage if you have a very large image library

Cleanup Procedures

When to use the "Delete Generated WebP Images" feature:

• After changing the quality setting to regenerate all images with new settings
• When updating to a new major version of the plugin
• If you notice inconsistent behavior or outdated WebP images
• Before uninstalling the plugin if you want to remove all generated files

Testing and Verification

Browser Validation

To verify your WebP images are being served correctly:

1. Open your website in Chrome or Firefox
2. Right-click on an image and select "Inspect" or "Inspect Element"
3. In the developer tools panel, look at the image URL - it should end with "_iwebp.webp"
4. Check the "Network" tab in developer tools and filter by "Images" to see that WebP versions are being downloaded

Performance Testing

Measure the impact of WebP conversion on your site:

1. Use tools like Google PageSpeed Insights, GTmetrix, or WebPageTest
2. Run tests before and after enabling the WebP Converter
3. Look for improvements in metrics like "Time to Interactive" and "Largest Contentful Paint"
4. Compare total page size and load time with and without WebP conversion

Troubleshooting Advanced Issues

Missing WebP Images in Specific Components

If certain components don't show WebP images:

1. Check if the component uses AJAX to load content after initial page load
2. Verify if the component manipulates image paths with JavaScript
3. Try pre-converting the images used by that component using the batch tool

Server Timeout During Batch Conversion

For very large image libraries:

1. Process images in smaller batches by selecting subfolders instead of the main images folder
2. Increase PHP execution time limit in your server settings if possible
3. Process images during low-traffic periods

PHP Error Messages

If you encounter PHP errors:

1. Check your PHP version (minimum PHP 7.4 recommended)
2. Verify PHP memory_limit setting in php.ini (recommended 128M or higher)
3. Ensure the plugin has write permissions to your images directories
4. Look for specific error messages in your server's error log

Using WebP Converter in Multilingual Sites

For sites using Joomla's multilingual features:

• The plugin works across all language variations automatically
• Images converted once are available to all language versions
• If using language-specific image variants, ensure all versions are accessible for conversion

Developer Integration

For developers creating custom templates or extensions:

• The plugin processes standard HTML image tags and CSS background-image properties
• For custom image loading techniques (like JavaScript image insertion), use the batch conversion tool to pre-convert images
• The naming convention for WebP files is predictable: original filename + "_iwebp.webp"

Conclusion

The WebP Converter plugin offers a powerful way to optimize your site's images without sacrificing quality. By following this advanced guide, you can maximize its benefits while avoiding potential pitfalls. Remember that image optimization is an ongoing process - regularly check your settings and results to ensure continued performance improvements.