下一代可用的格式有哪些？ 还是在javascript中？

问题描述

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

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

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

解决方法

使用WebP，并使用<picture>标签在不支持WebP的浏览器中使用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几乎可以踢其他所有格式，因为它基本上是适用于静态图像的超高效x265视频编解码器。但它需要JS polyfill，因为任何浏览器都不支持它。

,

那么，有什么可用的格式？

取自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，JPEGXR在以下情况下很有用您需要在IE中具有高性能....所以基本上根本没有用！呵呵），并在其他地方提供jpeg。

在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();