JPG，JPEG2000和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>，它将回退到<img />具有 jpeg 源的标签。

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