WebP 图像替换答案

【问题标题】：WebP Image ReplacementWebP 图像替换
【发布时间】：2012-01-09 01:31:18
【问题描述】：

我的最终目标是检测浏览器是否能够显示 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 图像加载？

【问题讨论】：

我建议使用更轻量级的解决方案进行 webp 支持检测stackoverflow.com/a/27232658/288906

标签： javascript webp

【解决方案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;
}

【讨论】：

这么简单的错误，我不敢相信我没有看到。谢谢！
其实在Chrome中看网络标签，好像还是在下载png图片，然后是webp图片。如何防止 png 图像被下载？
它现在适用于 Chrome，但是当我尝试在 Firefox 中加载它时，它似乎没有正确添加 src 属性。将控制台日志放入 for 循环表明循环甚至没有运行（对于 firefox 和 IE）。
发现问题。仅当浏览器确实支持 WebP 时，图像加载器才会运行。只好把事情洗牌了。谢谢

【解决方案2】：

我知道这是一个非常古老的问题，但是当我寻找一种将 webp 图像替换为相应 jpg 的方法时，我没有找到太多。

使用this post，我把它放在一起，这似乎可以通过 IE 9 工作。

（它实际上可能与旧的 jQuery 版本一起工作得更远，但我使用的是 jQuery 2.1.1，它在 IE

它会检查 .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';
});

【讨论】：

【解决方案3】：

如果您对服务器有（部分）控制权，则可以使用内容协商而不是 javascript。请参阅 http://httpd.apache.org/docs/2.2/content-negotiation.html 了解它在 Apache 中是如何完成的。

【讨论】：

不幸的是，在这台服务器上我无法控制它。

【解决方案4】：

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

您在更改图像 src 属性时遇到的问题是现代浏览器会向前看并开始下载带有错误扩展名的图像。您可能不想下载不打算使用的图像。

诀窍是将图像放在 noscript 标记内，然后在阅读标记的 textContent 时通过更改路径来逐步增强它。在旧版浏览器中，您需要simple polyfill 才能读出 noscript 标签的内容。

您可以查看我关于响应式图像和 webP 支持的系列here。查看基于 Ethan Marcotte 经典响应式设计的示例 here。

【讨论】：