{"id":5708,"date":"2025-03-27T11:32:46","date_gmt":"2025-03-27T18:32:46","guid":{"rendered":"https:\/\/www.ultimatewb.com\/blog\/?p=5708"},"modified":"2025-03-27T11:32:47","modified_gmt":"2025-03-27T18:32:47","slug":"webp-vs-jpg-png-should-you-use-fallback-images-for-compatibility","status":"publish","type":"post","link":"https:\/\/www.ultimatewb.com\/blog\/5708\/webp-vs-jpg-png-should-you-use-fallback-images-for-compatibility\/","title":{"rendered":"WebP vs. JPG\/PNG: Should You Use Fallback Images for Compatibility?"},"content":{"rendered":"\n<p>Optimizing images for performance is crucial. It is one of the scoring factors on Google&#8217;s <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=pagespeed+insights\">PageSpeed Insights<\/a>, making it important for search engine optimization too. One of the biggest decisions web developers and website owners face is whether to <strong>upload images exclusively as <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=webp\">WebP<\/a><\/strong> or <strong>provide JPG\/PNG fallback versions<\/strong> 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\u2019s break it down.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is WebP and Why Use It?<\/strong><\/h2>\n\n\n\n<p>WebP is an image format developed by Google that offers <strong>better compression<\/strong> than traditional formats like JPG and PNG while maintaining high image quality. Key benefits of WebP include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Smaller File Sizes<\/strong> \u2013 WebP images can be up to <strong>30-50% smaller<\/strong> than equivalent JPG or PNG images.<\/li>\n\n\n\n<li><strong>Transparency Support<\/strong> \u2013 Like PNG, WebP supports transparent backgrounds.<\/li>\n\n\n\n<li><strong>Animation Support<\/strong> \u2013 WebP can replace GIFs with smaller, more efficient animated images.<\/li>\n\n\n\n<li><strong>Improved Page Speed<\/strong> \u2013 Smaller images lead to faster load times and <strong>better SEO rankings<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>With all these advantages, WebP seems like the ideal format. But does that mean you should abandon JPG and PNG altogether?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WebP Browser Compatibility: Is It Universal?<\/strong><\/h2>\n\n\n\n<p>As of 2025, WebP is <strong>supported by nearly all modern browsers<\/strong>, including:<\/p>\n\n\n\n<p>\u2705 Chrome<br>\u2705 Firefox<br>\u2705 Edge<br>\u2705 Safari (since version 14)<br>\u2705 Opera<\/p>\n\n\n\n<p>However, some <strong>older browsers<\/strong> and niche applications may <strong>not support WebP<\/strong>, including:<\/p>\n\n\n\n<p>\u274c Internet Explorer (any version) &#8211; no one really should be using this as Microsoft ended support in June 2022<br>\u274c Older versions of Safari (13 and earlier, Safari 14 was released in 2020)<br>\u274c Some email clients and embedded systems<\/p>\n\n\n\n<p>If your audience still includes users on outdated browsers, <strong>WebP-only images may not display correctly<\/strong> for them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Should You Provide JPG\/PNG Fallbacks?<\/strong><\/h2>\n\n\n\n<p>Here\u2019s when you should consider adding a fallback:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. If Your Website Has a Broad Audience<\/strong><\/h3>\n\n\n\n<p>If your website serves users with <strong>older devices, corporate systems, or outdated browsers<\/strong>, a fallback ensures that they can still see your images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. If Your Content Is Embedded in Emails<\/strong><\/h3>\n\n\n\n<p>Email clients like Outlook may <strong>not support WebP<\/strong>, causing images to break. Using JPG or PNG is often necessary in email marketing campaigns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. If You Want Maximum Compatibility with Third-Party Services<\/strong><\/h3>\n\n\n\n<p>Some third-party platforms <strong>still do not support WebP<\/strong>, so fallback images can prevent broken thumbnails or missing images in shared links.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>When You Can Use WebP Only<\/strong><\/h3>\n\n\n\n<p>If your website traffic is <strong>primarily from modern browsers and mobile devices<\/strong>, 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Serve WebP with Fallbacks Efficiently<\/strong><\/h2>\n\n\n\n<p>If you decide to include fallbacks, here\u2019s how to do it properly:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Use the <code>&lt;picture&gt;<\/code> Element (Best Method)<\/strong><\/h3>\n\n\n\n<p>The <code>&lt;picture&gt;<\/code> element allows browsers to choose the best-supported image format:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;picture><br>  &lt;source srcset=\"image.webp\" type=\"image\/webp\"><br>  &lt;img src=\"image.jpg\" alt=\"Example Image\"><br>&lt;\/picture><br><\/code><\/pre>\n\n\n\n<p>\ud83d\udca1 <strong>How It Works:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If the browser supports WebP, it loads <code>image.webp<\/code>.<\/li>\n\n\n\n<li>If not, it falls back to <code>image.jpg<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>This is the method that the UltimateWB website builder uses. Just click on the \u201cCreate WebP\u201d 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"299\" src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5-1024x299.png\" alt=\"\" class=\"wp-image-5709\" srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5-1024x299.png 1024w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5-300x88.png 300w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5-768x224.png 768w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-5.png 1155w\" sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\" \/><\/a><\/figure>\n\n\n\n<p>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:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-6.png\">    <picture>\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-6.png\"\n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-6.png 626w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/image-6-300x110.png 300w\"             sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\"\n             width=\"626\"\n             height=\"230\"\n             alt=\"image\"\n             loading=\"lazy\"             decoding=\"async\"\n             class=\"wp-image-5710\" >\n    <\/picture>\n    <\/a><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Use <code>.htaccess<\/code> (Automatic Conversion for Apache Servers)<\/strong><\/h3>\n\n\n\n<p>You can configure your server to <strong>serve WebP automatically<\/strong> while keeping JPG\/PNG versions as fallbacks:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">apacheCopyEdit<code>RewriteEngine On\nRewriteCond %{HTTP_ACCEPT} image\/webp\nRewriteCond %{REQUEST_FILENAME} (.+)\\.(jpe?g|png)$\nRewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\nRewriteRule (.+)\\.(jpe?g|png)$ $1.webp [T=image\/webp,E=webp,L]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Use JavaScript for Dynamic Image Switching<\/strong><\/h3>\n\n\n\n<p>If you prefer a JavaScript-based solution, you can detect WebP support and dynamically switch images:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopyEdit<code>function supportsWebP(callback) {\n  var img = new Image();\n  img.onload = () =&gt; callback(true);\n  img.onerror = () =&gt; callback(false);\n  img.src = \"data:image\/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAAABAgCdASoBAAE...\";\n}\n\nsupportsWebP((supported) =&gt; {\n  if (!supported) {\n    document.querySelectorAll(\"img\").forEach((img) =&gt; {\n      img.src = img.src.replace(\".webp\", \".jpg\");\n    });\n  }\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion: WebP-Only or Fallbacks?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Scenario<\/strong><\/th><th><strong>WebP Only<\/strong><\/th><th><strong>WebP + JPG\/PNG Fallbacks<\/strong><\/th><\/tr><\/thead><tbody><tr><td>Your audience uses modern browsers<\/td><td>\u2705<\/td><td>\u2705<\/td><\/tr><tr><td>Your audience includes older browsers (IE, old Safari)<\/td><td>\u274c<\/td><td>\u2705<\/td><\/tr><tr><td>You send marketing emails with images<\/td><td>\u274c<\/td><td>\u2705<\/td><\/tr><tr><td>Your images are embedded in third-party platforms<\/td><td>\u274c<\/td><td>\u2705<\/td><\/tr><tr><td>You want maximum SEO and performance<\/td><td>\u2705<\/td><td>\u2705<\/td><\/tr><tr><td>You prefer simple implementation<\/td><td>\u2705<\/td><td>\u2705 Easy with UltimateWB<br>\u274c (Extra setup required without UltimateWB)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\ud83d\udd39 <strong>Final Recommendation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If your audience is <strong>mostly on modern browsers<\/strong>, <strong>use WebP only<\/strong> to maximize performance.<\/li>\n\n\n\n<li>If you need <strong>broad compatibility<\/strong>, include <strong>JPG\/PNG fallbacks<\/strong> with the <code>&lt;picture><\/code> element.<\/li>\n<\/ul>\n\n\n\n<p>By balancing performance and compatibility, you can optimize your images effectively while ensuring the best user experience for all visitors.<\/p>\n\n\n\n<p>Related: <a href=\"https:\/\/www.ultimatewb.com\/blog\/5627\/power-consumption-and-image-formats-jpeg-vs-webp-vs-avif-which-is-better\/\">Power Consumption and Image Formats: JPEG vs WebP vs AVIF \u2013 Which is Better?<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.ultimatewb.com\/blog\/5472\/should-you-have-two-versions-of-your-images-on-your-website-webp-and-one-of-the-classic-formats-like-jpg-or-png\/\">Should you have two versions of your images on your website \u2013 WebP and one of the classic formats like JPG or PNG?<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.ultimatewb.com\/blog\/5377\/why-doesnt-google-maps-use-webp-a-deep-dive\/\">Why Doesn\u2019t Google Maps Use WebP? A Deep Dive<\/a><\/p>\n\n\n\n<p>Are you ready to design &amp; build your own website? Learn more about&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/\">UltimateWB<\/a>! We also offer&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/web-design-packages\">web design packages<\/a>&nbsp;if you would like your website designed and built for you.<\/p>\n\n\n\n<p><em>Got a techy\/website question? Whether it\u2019s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/ask-david\">\u201cAsk David!\u201d form<\/a>. We will email you when the answer is posted on the UltimateWB \u201cAsk David!\u201d section.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Optimizing images for performance is crucial. It is one of the scoring factors on Google&#8217;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 &hellip; <a href=\"https:\/\/www.ultimatewb.com\/blog\/5708\/webp-vs-jpg-png-should-you-use-fallback-images-for-compatibility\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1034,4,63],"tags":[2588,3894,2589,2132,288,3895,3667,674,10,11,2410,2411],"class_list":["post-5708","post","type-post","status-publish","format-standard","hentry","category-ask-david","category-search-engine-optimization-seo","category-website-design","tag-browser-compatibility","tag-fallback-image","tag-fallbacks","tag-htaccess-2","tag-internet-explorer","tag-modern-browsers","tag-picture-tag","tag-safari","tag-search-engine-optimization","tag-seo","tag-webp","tag-webp-converter"],"_links":{"self":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/5708"}],"collection":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/comments?post=5708"}],"version-history":[{"count":1,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/5708\/revisions"}],"predecessor-version":[{"id":5711,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/5708\/revisions\/5711"}],"wp:attachment":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/media?parent=5708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/categories?post=5708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/tags?post=5708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}