What javascript code can I use to replace all html images with webp extension to png when the browser is Safari?

You don't need javascript for this!

You can use the tag picture and place the two images (webp and png), so if the first image fails to load, the browser itself understands that it should look for the second and so on.

Using the picture element

Follows a example of using the picture element:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Note that it was necessary to pass 2 elements source and one element img into this example. In this case, as they are two uri and different image types, we define this with the first 2 source, in the order in which we want it to be loaded and leave a tag img that the browser will "inject" the first source that works.

You can use tag picture:

<picture>
  <source srcset="path/imagem.webp" type="image/webp">
  <img src="path/imagem.png">
</picture>

Or

You can put an attribute on your images like this: <img data-img ... /> and do something like this:

window.onload = function() {
    if (navigator.userAgent.indexOf("Safari") != -1) { 
        var sources = document.querySelectorAll("[data-img]"); 
        for (var i in sources) {
            var url = sources[i];
            if (url.src.indexOf('.webp') !== -1) {
                url.src = url.src.replace(/\.webp/gim, ".png");  
            }
        }
    }
}

Or you can put a rule if an interpretation error occurs in the image like this:

<img onerror="this.src='path/arquivo-alternativo.png'" src="path/arquivo-alternativo.webp">

Or you can create a folder for safari and point the path of your images:

 var dir = '/images/'
 if (navigator.userAgent.indexOf("Safari") != -1) { 
     dir = '/safari-images/';
 }

Certainly using the elements <picture> and <source> is the most canonical method since modern browsers already support it and decide properly which format to use.

However, using JavaScript is a good option if you want to avoid having to manually modify all entries in all documents on your site.

Once you already have a duplicate of the formats you should:

• 1: check format support (if not supported)
• 2: Search all element References <img>
• 3: iterate over this list and check if the src contains ".webp '
• 4: modify all attributes .src found

Something like this:

// no topo do seu script checar se o navegador supoorta o formato
var BrowserSupportWebpCheck = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0

// se o navegador não suportar o formato ".webp"
if ( !BrowserSupportWebpCheck ) {
    // buscar todos os elementos "<img>"
    var images = document.querySelectorAll('img')
    // ES5 usa "forEach" ... suporta IE 9 em diante
    images.forEach((item, index, array) => {
        if ( item.src.indexOf('.webp') !== -1 ) {
            // substituir o "src" do elemento
            item.src = item.src.replace('.webp', '.png')
            // apenas para este exemplo, mostrar
            console.log(item.src)
        }
    })
}

<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">
<img src="path/to/image.webp">

The code snippet above will "print" in the console all attributes src found and modified to .png ... of course, it will only do so in fact if the Browse does not support the format .webp

It should also be noted that it is not only Safari that does not support the format.webp and the element <picture>, old browsers and some "mobile" also do not support.

Support references:

• Format support .webp

• Element Support<picture>

• Method supportArray.forEach()

• Support basic ao Canvas.toDataURL()