什么是可用的下一代格式？

Question

为了提高Google LightHouse的性能分数，我需要“提供下一代格式的图像”。那么，这方面的可用格式是什么(我知道webp，不是所有浏览器都支持webp，这就是我不想使用这种格式的原因)？

在Rails中是否有将格式转换为下一代格式的方法或gem？

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

Answer 1

使用WebP，在不支持WebP的浏览器中使用jpg，使用<picture>标记。

请参见这个CSS技巧指南：

<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填充，因为它不受任何浏览器的支持。

Answer 2

那么，可用的格式是什么呢？

取自关于next gen格式的web.dev文章

JPEG 2 0 0 0、JPEG XR和WebP是图像格式，其压缩和质量特性优于以往的JPEG和PNG。将图像编码为这些格式而不是JPEG或PNG意味着它们将更快地加载并且消耗更少的蜂窝数据。

由于WebP拥有大多数浏览器兼容性( 86%)，所以我只会为此烦恼(特别是因为Safari是使用JPEG2000的唯一原因，而且他们现在开始支持WebP，如果您需要IE....so中的高性能，那么JPEGXR是有用的--根本没用！)在其他地方侍奉jpeg。

在Rails中，是否有将jpg、png格式转换为下一代格式的方法或gem？

webp-ffi宝石似乎很受欢迎，因为它可以在Ruby中实现到WebP的转换。

跨浏览器显示图像

您可以使用元素并让浏览器决定使用哪个图像，或者.

还是用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();