Замена изображений WebP

Моя конечная цель - определить, способен ли браузер отображать изображения WebP.Если это так, замените все изображения на странице их эквивалентами webp (расположенными в том же каталоге с тем же именем, только с другим расширением)

В настоящее время у меня есть сценарий, который успешно определяет, может ли браузер отображать webp

(function(){
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      console.log("You do not have WebP support.");
    } else {
      console.log("You do have WebP support.");
    }
};
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        })();

В случае наличия поддержки webp я попробовал следующий код, но безуспешно.

// replace .gif with .webp
var allImages = document.body.getElementsByTagName("img");
var length = allImages.length;
var i;
for(i = 0; i < length; i++){
  allImages[i].src.replace("png", "testtest");
  console.log(allImages[i]);
}

При размещении в заголовке консоль правильно отображает все теги изображений, но исходный код не был изменен с filename.png, каким он был изначально.

Есть идеи, что делается неправильно?

Редактировать: Я обнаружил проблему, почему не загружались изображения, благодаря wsanville. Однако, глядя на вкладку сети в Chrome, я все же загружаю и png, и изображение webp. Как вообще предотвратить загрузку изображения png?