I asked ChatGPT to fix a nasty bug: broken images not showing up in Safari

I asked ChatGPT to fix a nasty bug in Safari. It worked

Recent changes in my website’s implementation, now serving WebP images by default to improve its loading speed, had caused a very nasty issue: all the images on my website were broken in Safari, none was showing up. 😢

Everything was fine in Chrome, Brave, FireFox and other browsers but when I tried to open my site in Safari, here’s what I saw.

broken images on Safari
Broken images in Safari

No images, just a white placeholder with a tiny question mark in the middle and the alt tag of the image.

I had to fix this bug. Close to 10% of desktop users are on Safari.

Screenshot 2023 02 03 at 18.18.10

First I thought that the issue could have been caused by a recent move to Ezoic’s Nameservers (NS), which use Cloudflare’s CDN.

I ran a quick network test via Safari Developer Tools and it confirmed that all the images were served in WebP format, supported by 92% of current browsers but not by Safari 15 running on Catalina (or on Mojave on my Macbook).

all images served in webp
all my images were served in WebP in Safari

I opened a ticket with Ezoic’s Support Team (they’re usually very fast to respond) but before I even received any reply from them, I decided to try something new: ask ChatGPT to help me fix this issue.

I had searched for 2 hours on the open web to find a solution. I read many complaints of webmasters unable to come up with a proper fix for the issue.

webflow webp not showing on Safari
In Webflow Community Support, not very helpful
WebP Mojave
In Apple’s official forum, not very helpful

Maybe ChatGPT could succeed where traditional support channels proved rather ineffective…

I started my discussion with ChatGPT with a very broad question:

How to avoid serving WebP images to Safari users?

I immediately received the following answer:

To avoid serving WebP images to Safari, you can use the following approach:

Detect the browser: Use JavaScript or a server-side language to determine the browser type.

Serve alternative formats: If the browser is Safari, serve JPEG or PNG formats instead of WebP.

Here's an example in JavaScript that uses the Modernizr library:
if (!Modernizr.webp) {
  var images = document.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    var src = images[i].getAttribute("src");
    src = src.replace(".webp", ".jpg");
    images[i].setAttribute("src", src);
  }
}

It wasn’t a code specifically targeted to Safari users but one checking any browser’s support for WebP. I asked ChatGPT to give me a code for Safari, checking for the useragent.

I received it 3 seconds later.

if (navigator.userAgent.indexOf('Safari') !== -1 && !Modernizr.webp) {
  // Serve alternative formats for Safari
  var images = document.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    var src = images[i].getAttribute("src");
    src = src.replace(".webp", ".jpg");
    images[i].setAttribute("src", src);
  }
}

But as you can see this code only covered a fallback to .jpg images for Safari users.

What if my pages contained both jpg and png images as original files? I asked ChatGPT to adapt the code. After 2 iterations, my super assistant got it right.

<script>
if (navigator.userAgent.indexOf('Safari') !== -1 && !Modernizr.webp) {
  // Serve alternative formats for Safari
  var images = document.getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    var src = images[i].getAttribute("src");
    if (src.endsWith(".webp")) {
      var jpegSrc = src.replace(".webp", ".jpeg");
      var pngSrc = src.replace(".webp", ".png");
      if (doesFileExist(jpegSrc)) {
        src = jpegSrc;
      } else if (doesFileExist(pngSrc)) {
        src = pngSrc;
      }
      images[i].setAttribute("src", src);
    }
  }
}

function doesFileExist(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', url, false);
  xhr.send();
  return xhr.status === 200;
}
</script>
In this version of the code, both the JPEG and PNG file paths are checked and whichever one exists, its path is set as the new src attribute of the image.

The only thing left to do was to copy-paste this code into the CUSTOM CODE section of my Elementor Pro plugin (in the HEAD section, on all pages), clear the cache on Ezoic, clear the history in my Safari browser and reload the page.

Elementor Custom Code

It worked!

Screenshot 2023 02 03 at 18.54.44

After 2 hours of traditional web searches and a discussion with my tech partner, ChatGPT was the one which provided the solution in less than 3 minutes. Of course, the fact that I had identified the issue and that I could ask the right questions helped the AI to deliver the proper code.

But this experience is a true testimony to the power of Generative AI. And it’s only the beginning!

What an amazing time to be alive!

Feel free to copy-paste the code above and use it on your own site to fix the issue of images not being displayed in Safari.

👉 Important note: never upload WebP images by default to your website, otherwise there won’t be any jpeg or png files to be served as a fallback by the code I’ve just provided. You need to let your optimization software (I’m using Leap provided by Ezoic) to serve the WebP images on the fly to compatible browsers.

Do you have to always use custom code to display WebP images in Safari?

No, some plugins might handle the process automatically, serving the original jpeg / png files to Safari and WebP images to compatible browsers. I had to use custom code because of the way Ezoic handled the images via their caching / CDN configuration.

Can you trust the code generated by ChatGPT?

You should of course always test the code generated by ChatGPT. It might not be correct on the first iteration. You might have to ask the AI assistant to fix the code. It’s a genuine man-machine dialogue. The quality of your prompts is key to obtain the right code.

🚀 Subscribe to my weekly newsletter packed with tips & tricks around AI, SEO, coding and smart automations

☕️ If you found this piece helpful, you can buy me coffee