JPG vs JPEG2000 vs WebP

Question

我正在使用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。但我正在尝试优化我的网站，并使用更好的图像文件类型。有没有办法使用这几种类型的文件，或者是我遗漏了什么？

Answer 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字节中的微小开销并不会抵消速度的提高，除非在极端情况下，例如非常小和简单的图像。