JPG vs JPEG2000 vs WebP答案

【问题标题】：JPG vs JPEG2000 vs WebPJPG 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} alt=""/>
 </picture>

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

【问题讨论】：

就个人而言，我认为提供 3 个不同文件的开销抵消了更好格式可能提供的任何优化。坚持使用 jpg 直到有更好的支持。
坚持使用 jpg 绝对是更简单的方法。我对导入 3 种类型的文件并不感到兴奋，我开始怀疑我是否真的在优化。感谢您的意见！

标签： reactjs image jpeg webp srcset

【解决方案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} alt="" />
</picture>

说明

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

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

【讨论】：