JPG vs JPEG2000 vs WebP

Posted 2023-03-25

【中文标题】JPG vs JPEG2000 vs WebP

【英文标题】：

【发布时间】：2019-05-22 06:08:45

【问题描述】：

我正在使用 React 构建我的网站，并且要显示多个图像。在使用 Google Chrome 审核功能运行审核后，我收到了“以下一代格式提供图像”的机会消息。

在阅读了各种格式（WebP、JPEG2000、JPEGXR）之后，似乎只有选定的浏览器支持每种格式。例如，我不能将所有图像都转换为 WebP，因为它们不会显示在 Safari 浏览器上。所以我的问题是如何根据所使用的浏览器“提供”每种类型的图像？这是我尝试过的：

我有 3 种类型的文件，jpg、JPEG2000 和 WebP。每个都像这样被导入：

import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'

然后在我的班级中，我有一个包含图像的对象数组。要使用图像：

 <picture>
      <source>
          srcSet=`
            $project.Imagejpg,
            $project.ImageJPEG2000,
            $project.ImageWebP,
      </source>
     <img src=project.imageWebP />
 </picture>

现在，如果我只使用 jpg 图像，它在所有浏览器上都可以正常工作，因为大多数浏览器都可以使用 jpg。但我正在尝试优化我的网站并使用更好类型的图像文件。有没有办法使用这几种类型的文件，或者我缺少什么？

【问题讨论】：

就个人而言，我认为提供 3 个不同文件的开销抵消了更好格式可能提供的任何优化。坚持使用 jpg 直到有更好的支持。

坚持使用 jpg 绝对是更简单的方法。我对导入 3 种类型的文件并不感到兴奋，我开始怀疑我是否真的在优化。感谢您的意见！

【参考方案1】：

解决方案确实在<picture> 元素中，但使用了多个来源。

语法正确的代码如下所示：

<picture>
    <source srcSet=project.ImageWebP type="image/webp" />
    <source srcSet=project.ImageJPEG2000 type="image/jp2" />
    <source srcSet=project.Imagejpg type="image/jpeg" />
    <img src=project.Imagejpg  />
</picture>

说明

看到图片元素，浏览器将下载它可以支持的第一个源。如果它是一个完全不支持<picture> 的旧浏览器，它将退回到具有jpeg 源的<img /> 标签。

这是提高页面速度的快速简便的方法。额外 html 字节的微小开销并不会抵消速度的提升，除非在极端情况下，例如非常小和简单的图像。