有哪些可用的下一代格式？答案

【问题标题】：What are available next-gen formats?有哪些可用的下一代格式？
【发布时间】：2021-02-21 12:50:02
【问题描述】：

要提高 Google LightHouse 中的性能得分，我需要“以下一代格式提供图像”。那么，有哪些可用的格式（我知道webp，并非所有浏览器都支持webp，所以我不想使用这种格式。）？

是否有任何方法或 gem 可用于将 jpg, png 格式转换为 Rails 中的下一代格式？

或者在 javascript 中，是否有任何方便且强大的方法来处理“以下一代格式提供图像”？请提出建议。

【问题讨论】：

标签： javascript ruby-on-rails spree lighthouse image-formats

【解决方案1】：

使用 WebP，在不支持 WebP 的浏览器中使用 <picture> 标签回退到 jpg。

见this guide on CSS-tricks：

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

另外，BPG 几乎可以取代所有其他格式的 a**，因为它基本上是超高效的 x265 视频编解码器，适用于静止图像。但它需要一个 JS polyfill，因为任何浏览器都不支持它。

【讨论】：

在示例页面上，在我检查的大约 50% 的图像中，BPG 大于 WebP（公平地说，所有图像都在大约 1% 以内，因此尺寸差异可以忽略不计），并且图像质量与我能看见。 BPG 有什么好处（即，如果我比示例中的压缩得更远，我会开始在类似的基础上看到收益/更好的性能吗？）。显然它对生产没有任何用处，因为图像的 JS 解码会超级慢但很有趣，因为以前从未听说过这种格式。

【解决方案2】：

那么，有哪些可用的格式呢？

取自the web.dev article on next gen formats

JPEG 2000、JPEG XR 和 WebP 是图像格式，与较早的 JPEG 和 PNG 对应物相比，它们具有出色的压缩和质量特征.以这些格式而不是 JPEG 或 PNG 对图像进行编码意味着它们将加载更快并消耗更少的蜂窝数据。

由于 WebP 有 most browser compatibility (at 86%)，我只会为此烦恼（尤其是 Safari 是使用 JPEG2000 的唯一原因，而且它们现在开始支持 WebP，如果您需要 IE 中的高性能，JPEGXR 很有用....所以基本上根本没用！呵呵）并在其他地方提供 jpeg。

是否有任何方法或 gem 可用于在 Rails 中将 jpg、png 格式转换为下一代格式？

webp-ffi gem 在 Ruby 中转换为 WebP 似乎很受欢迎。

跨浏览器显示图片

您可以使用<picture> element 并让浏览器决定使用哪个图像，或者....

还是在javascript中？

您可以使用 JavaScript 查看浏览器是否支持 WebP 并动态交换 URL。我只会在您延迟加载图像并且仍然使用 JavaScript 时才这样做。

var supportswebP = false;

supportsWebPFunction = function () {
    var WebP = new Image();
    WebP.onload = WebP.onerror = function () {
        if (WebP.height == 2) {
            supportswebP = true;
            // or call your function to change the URLs here etc.
        }
    };
    WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
}

supportsWebPFunction();

【讨论】：