Is there a code that can be used in Webflow to revert all webp images to jpg in Safari without having to readd the code for every single div/image URL on the website?

Published on
September 22, 2023

Yes, there is a code that can be used in Webflow to revert all webp images to jpg in Safari without having to re-add the code for every single div/image URL on the website.

You can use custom code to target all the webp images on your website and replace them with jpg format for Safari users. Here's how you can do it:

  1. Go to your Webflow project and navigate to the Page Settings for the page where you want to add the custom code.
  2. Click on the "Custom Code" tab.
  3. In the "Head Code" section, add the following code:
<script>  (function() {    // Check if the browser is Safari    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {      // Get all the images with webp format      var webpImages = document.querySelectorAll('img[src$=".webp"]');            webpImages.forEach(function(image) {        // Replace the .webp extension with .jpg in the src attribute        var jpgUrl = image.src.replace('.webp', '.jpg');                // Update the src attribute to use the jpgUrl        image.src = jpgUrl;      });    }  })();</script>
  1. Publish your site to see the code in action.

This code snippet will only target Safari browsers (excluding Chrome) and replace all the images with the ".webp" file extension to ".jpg" format.

Please note that this code should be used with caution and tested thoroughly to ensure it works as expected. Additionally, make sure to optimize your jpg images for web to maintain good performance and loading times.

Additional Questions

  1. How can I revert webp images to jpg in Webflow for Safari?
  2. Is there a way to replace all webp images with jpg in Webflow without manually editing each image URL?
  3. Can I use custom code in Webflow to convert webp images to jpg for Safari users?