Optimizing images for performance is crucial. It is one of the scoring factors on Google’s PageSpeed Insights, making it important for search engine optimization too. One of the biggest decisions web developers and website owners face is whether to upload images exclusively as WebP or provide JPG/PNG fallback versions for compatibility. The UltimateWB website builder makes it easy to create WebP images and include JPG/PNG fallback versions in the code with the click of a button. WebP is widely known for its superior compression and quality, but is it enough to rely on it alone? Let’s break it down.
What Is WebP and Why Use It?
WebP is an image format developed by Google that offers better compression than traditional formats like JPG and PNG while maintaining high image quality. Key benefits of WebP include:
- Smaller File Sizes – WebP images can be up to 30-50% smaller than equivalent JPG or PNG images.
- Transparency Support – Like PNG, WebP supports transparent backgrounds.
- Animation Support – WebP can replace GIFs with smaller, more efficient animated images.
- Improved Page Speed – Smaller images lead to faster load times and better SEO rankings.
With all these advantages, WebP seems like the ideal format. But does that mean you should abandon JPG and PNG altogether?
WebP Browser Compatibility: Is It Universal?
As of 2025, WebP is supported by nearly all modern browsers, including:
Chrome Firefox Edge Safari (since version 14) Opera
However, some older browsers and niche applications may not support WebP, including:
Internet Explorer (any version) – no one really should be using this as Microsoft ended support in June 2022 Older versions of Safari (13 and earlier, Safari 14 was released in 2020) Some email clients and embedded systems
If your audience still includes users on outdated browsers, WebP-only images may not display correctly for them.
Should You Provide JPG/PNG Fallbacks?
Here’s when you should consider adding a fallback:
1. If Your Website Has a Broad Audience
If your website serves users with older devices, corporate systems, or outdated browsers, a fallback ensures that they can still see your images.
2. If Your Content Is Embedded in Emails
Email clients like Outlook may not support WebP, causing images to break. Using JPG or PNG is often necessary in email marketing campaigns.
3. If You Want Maximum Compatibility with Third-Party Services
Some third-party platforms still do not support WebP, so fallback images can prevent broken thumbnails or missing images in shared links.
When You Can Use WebP Only
If your website traffic is primarily from modern browsers and mobile devices, you may not need JPG/PNG fallbacks. Web analytics tools like Google Analytics can help you determine if most of your users are on WebP-supported browsers.
How to Serve WebP with Fallbacks Efficiently
If you decide to include fallbacks, here’s how to do it properly:
1. Use the <picture> Element (Best Method)
The <picture> element allows browsers to choose the best-supported image format:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Example Image">
</picture>
How It Works:
- If the browser supports WebP, it loads
image.webp. - If not, it falls back to
image.jpg.
This is the method that the UltimateWB website builder uses. Just click on the “Create WebP” button on the Add/Edit Pages to automatically convert your images to WebP and automatically update your coding to use the new generated WebP image and your classic image format such as JPG or PNG as the backup image.
Super easy! To convert your images used in your CSS Stylesheet automatically to WebP and have your code updated for you, just activate the option in the built-in UltimateWB Styles Manager:
Choose the WebP convert option at the top. You can choose between converting your background image fields only, or your background images and those you include the Extras sections.
2. Use .htaccess (Automatic Conversion for Apache Servers)
You can configure your server to serve WebP automatically while keeping JPG/PNG versions as fallbacks:
apacheCopyEditRewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=webp,L]
3. Use JavaScript for Dynamic Image Switching
If you prefer a JavaScript-based solution, you can detect WebP support and dynamically switch images:
javascriptCopyEditfunction supportsWebP(callback) {
var img = new Image();
img.onload = () => callback(true);
img.onerror = () => callback(false);
img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAAABAgCdASoBAAE...";
}
supportsWebP((supported) => {
if (!supported) {
document.querySelectorAll("img").forEach((img) => {
img.src = img.src.replace(".webp", ".jpg");
});
}
});
Conclusion: WebP-Only or Fallbacks?
| Scenario | WebP Only | WebP + JPG/PNG Fallbacks |
|---|---|---|
| Your audience uses modern browsers | | |
| Your audience includes older browsers (IE, old Safari) | | |
| You send marketing emails with images | | |
| Your images are embedded in third-party platforms | | |
| You want maximum SEO and performance | | |
| You prefer simple implementation | | Easy with UltimateWB (Extra setup required without UltimateWB) |
Final Recommendation:
- If your audience is mostly on modern browsers, use WebP only to maximize performance.
- If you need broad compatibility, include JPG/PNG fallbacks with the
<picture>element.
By balancing performance and compatibility, you can optimize your images effectively while ensuring the best user experience for all visitors.
Related: Power Consumption and Image Formats: JPEG vs WebP vs AVIF – Which is Better?
Why Doesn’t Google Maps Use WebP? A Deep Dive
Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.
Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.
