Frontend Delivery
Understand how GetWebP serves WebP and AVIF images to browsers — PHP-based URL rewriting, picture tag insertion, and compatibility notes.
Frontend Delivery
After conversion, GetWebP needs to ensure browsers receive WebP or AVIF instead of the original JPEG/PNG. There are two delivery modes: PHP rewriting (default) and Server Rewrite (via .htaccess). This page covers PHP-based delivery.
Table of Contents#
- How PHP Delivery Works
- Delivery Methods
- Browser Compatibility
- WooCommerce Images
- Lazy-Loaded Images
- Background Images in CSS
- Disabling Frontend Delivery
How PHP Delivery Works#
GetWebP hooks into WordPress's content output pipeline using four filters:
| Filter | What it rewrites |
|---|---|
the_content | Post/page content <img> tags |
post_thumbnail_html | Featured images |
wp_get_attachment_image | Programmatic image calls |
Output buffer (ob_start) | Full-page scan for remaining images |
Each <img> tag pointing to a JPEG or PNG is checked: if a .webp sibling exists on disk, the src is rewritten (or a <picture> element is inserted) to deliver the optimized format.
Delivery Methods#
1. <img src> Rewrite (default)#
The src attribute is replaced with the .webp path. Browsers that don't support WebP will show a broken image — this is rare (>96% of browsers support WebP as of 2025).
2. <picture> Tag Insertion#
The <img> is wrapped in a <picture> element with <source> elements for AVIF and WebP, falling back to the original:
<picture>
<source srcset="photo.jpg.avif" type="image/avif">
<source srcset="photo.jpg.webp" type="image/webp">
<img src="photo.jpg" alt="...">
</picture>This is the safest delivery method. Enable it in GetWebP → Settings → Delivery → Use picture tags.
Browser Compatibility#
| Format | Global support |
|---|---|
| WebP | ~96% (all modern browsers) |
| AVIF | ~90% (Chrome 85+, Firefox 93+, Safari 16.4+) |
Using <picture> tags is recommended when AVIF is enabled, as it provides a clean fallback chain.
WooCommerce Images#
GetWebP rewrites WooCommerce product images, gallery images, and variation thumbnails through the same filters. No additional configuration is needed.
If you use a WooCommerce theme that bypasses the_content filter, enable the Output buffer option in settings to catch all images via a full-page scan.
Lazy-Loaded Images#
WordPress adds loading="lazy" to most images by default. GetWebP rewrites src and srcset attributes while preserving loading, width, height, and all other attributes.
If your theme or plugin uses a custom lazy-load library that replaces src with data-src, enable Output buffer delivery in settings to ensure the rewrite catches these attributes.
Background Images in CSS#
Inline CSS background images (e.g., style="background-image: url(...)") are rewritten by the background scan module when enabled. See the batch conversion settings to enable CSS background scanning.
External CSS files are not rewritten — use Server Rewrite for those.
Disabling Frontend Delivery#
To stop serving WebP/AVIF to frontend visitors (while keeping converted files on disk):
- Go to GetWebP → Settings → Delivery.
- Toggle Frontend delivery to Off.
- Click Save Settings.
Image URLs revert to the original JPEG/PNG paths immediately — no cache clearing needed.