WebP图像更换

Question

我的最终目标是检测浏览器是否能够显示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]);
}

当放置在标题中时，控制台确实正确显示了所有图像标签，但是源尚未从最初使用的文件名中更改。

关于错误所做的事情有什么想法吗？

编辑： 由于Wsanville，我发现了为什么没有加载图像的原因发现了一个问题。但是，查看Chrome中的“网络”选项卡仍然显示我正在加载PNG和现在的WebP图像。如何首先防止PNG图像加载？

Answer 1

这 replace 功能 返回字符串, ，它不会突变。您只需要分配后值：

allImages[i].src = allImages[i].src.replace("old", "new")

编辑以评论：所有浏览器将在 src 图像的属性。作为您方法的替代方法，我建议将文件名存储在其他属性中 img 标签。

您的图像标签看起来像：

<img alt="" data-png-source="/path/to/image.png" />

相应的JavaScript可以设置 src 属于正确的版本。

var supportsWebP = true; //set this variable properly

for(i = 0; i < length; i++)
{
    var image = allImages[i];
    var pngSource = image.getAttribute('data-png-source');
    image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}

Answer 2

我知道这是一个非常古老的问题，但是当我寻找一种用相应的JPG替换WebP映像的方法时，我发现没有太多。

和 这个帖子, ，我将其放在一起，似乎在IE 9中起作用。

（实际上，它可能会使用较旧的jQuery版本来返回，但是我正在使用jQuery 2.1.1，它突破了IE <= 8，所以我不确定）

它检查了.webp支持，然后如果浏览器不支持.webp，则用.jpg等效替换所有出现。

$(function() {
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      $('img[src$=".webp"]').each(function(index,element) {
        element.src = element.src.replace('.webp','.jpg');
      });
    }
  };
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});

Answer 3

如果您（某些）控制服务器，则可以使用内容协商而不是JavaScript。看 http://httpd.apache.org/docs/2.2/content-negotiation.html 对于Apache的完成方式。

Answer 4

实际上，您正在尝试解决经典响应图像问题的变体。

更改图像SRC属性的问题是，现代浏览器将展望并开始下载图像 错误的扩展名. 。您可能不想下载您不会使用的图像。

诀窍是将图像放入 noscript 标签，然后在阅读时通过更改路径来逐步增强它 文本符号 标签。在较旧的浏览器中，您需要一个 简单的多填充 读取NoScript标签的内容。

您可以在响应式图像和WebP支持上查看我的系列 这里. 。查看一个示例 这里 基于Ethan Marcotte的经典响应设计。