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字节中的微小开销不会影响速度的提高。

JPG，JPEG2000和WebP

1 个答案:

说明