Question

世界是否已准备好使用新的图像格式WebP？

我正在考虑使用它，规格看起来非常性感，但是，好像它不支持Firefox（谁知道哪些其他网络浏览器），我注意到OkCupid.com正在使用它，但如果你去那里使用Firefox - 似乎他们正在提供JPEG而不是......

我想知道OkCupid是怎么做的 - 他们为每个图像保留了额外的JPEG，还是HttpModule？

我甚至在我的web.config

上添加了这个

<mimeMap fileExtension=".webp" mimeType="image/webp" />

我错过了什么吗？为什么它不适用于所有浏览器？

Answer 1

在与James South（ImageProcessor的创建者）交谈之后，我明白只有Chrome和Opera支持WebP，换句话说 - 世界还没有为WebP做好准备（几年后再试）

Answer 2

世界不一定要准备好-您可以提供两种版本的图像，浏览器将决定采用哪种版本。只需使用<picture>标签：

<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>

如果要在CSS中使用WebP，例如用于背景图像，则可以使用Modernizr来检测浏览器是否支持WebP并设置一个名为“ webp”的CSS类。

另请参阅Using WebP Images，以获得详尽的解释。

Answer 3

世界现在已经准备好进行 webp https://caniuse.com/webp

实现它的更简单的方法是使用重写，而不是图片标签。

<Files *.webp>
Header set Vary "Accept-Encoding"
AddType "image/webp" .webp
AddEncoding webp .webp
</Files>
RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]

Firefox中无法识别WebP MIME类型

3 个答案: