Firefox 无法识别 WebP MIME 类型

Posted 2023-03-06

【中文标题】Firefox 无法识别 WebP MIME 类型

【英文标题】：WebP MIME type not recognized in Firefox

【发布时间】：2016-09-26 11:20:11

【问题描述】：

世界准备好迎接新的图像格式 WebP 了吗？

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

我想知道 OkCupid 是如何做到这一点的 - 他们是否为每张图像保留额外的 JPEG，或者可能是一个 HttpModule ？？

我什至在我的 web.config 中添加了这个

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

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

【参考方案1】：

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

【讨论】：

2021 年 8 月 14 日在这里 - webp 几乎完全支持！ caniuse.com/webp

【参考方案2】：

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

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

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

有关详细说明，另请参阅 Using WebP Images。

【参考方案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]