如何获得最快的浏览器图像加载

Picture 元素的使用允许浏览器从可能由不同文件类型和大小组成的列表中选择单个最佳图像进行下载和显示。对 picture 元素的广泛支持使我们能够轻松构建与浏览器无关的响应式图像显示页面

这里给出的具体例子是一本网络漫画书，它的图像非常密集。该示例使用 picture 元素从三种流行的文件类型中提供选择，即AVIF 、 WEBP和JPG图像格式。这些文件类型中的每一种都以五个维度的范围呈现，从而使浏览器可以从十五个单独的图像中进行选择。浏览器将选择图像列表中满足其可接受性确定的第一个条目。

此屏幕显示了演示示例图像之一的图片元素<picture>代码。在我们的演示中，每个图片元素后跟一个空行分隔符，如下所示。

picture 元素内部是一个source元素列表，每个元素都反映了可供浏览器选择的图像的可能选择。 source元素是一个void元素，也就是说它没有结束标签，没有</source>标签。取而代之的是，source 元素更多地用于提供指向由srcset属性的内容（图像文件名）标识的资源的链接。

在我们的示例中，每个源元素还有两个附加属性。一个属性被标记为media ，其内容表示对最适合srcset指定图像的视口尺寸的媒体查询。第二个属性是type标签，它的内容表示srcset图像的MIME 类型。如果浏览器不支持特定的 MIME 类型，则该源项目将被忽略。例如，此时Microsoft Edge浏览器不支持 AVIF MIME 类型，并且该浏览器会忽略 AVIF 文件选择。

picture 元素内容中的最后一个条目是img元素，如果列出的源图像都不可接受，则名义上指定为后备元素。除了指向图像文件的src属性指针之外，该 img 元素还具有用于图像替代文本的alt属性和允许用户使用TAB键轻松在图像之间导航的tabindex属性。

至于为尺寸选择的幻数，最初我为宽度断点制作了 3 个图像尺寸。这工作得很好，促使添加了两个更多的 srcset 大小，并重新调整了断点和大小以获得更多的粒度。这些值基于 Bootstrap 断点选择。

• 断点名称 X- Small Small Medium Large X- Large XX- Large
• 断点 <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• 容器 100% 540px 720px 960px 1140px 1320px
• 图片尺寸 576px 768px 992px 1200px 1400px

但是加载的 HTML 的 Chrome 调试屏幕显示上面显示的 img 元素的源代码与此处显示的浏览器获取的内容之间存在一些差异。

当浏览器扫描源列表并选择它认为最好的一个时，它将将该 srcset 值分配给变量this.currentSrc ，如此调试捕获所示。

请注意，此图像是浏览器从提供的列表中选择的图像，它是浏览器认为最好的图像。鉴于图像具有固定尺寸以覆盖一定范围的视口大小，因此图像可能不是完美契合，进行一些调整可能会有所帮助。示例演示使用 JavaScript 将浏览器选择的图像缩放到视口尺寸，这些值（即缩放到视口尺寸的图像尺寸）将按此处所示保存。我们从 JavaScript 中得到了一些其他用途

在这台台式电脑上，Chrome 调试器说演示漫画，42 张图片，消耗 2.5MB 的资源，有 56 个请求和 2.1MB 的传输，并在 1.22 秒内完成。您可以在Hyenas2查看演示漫画。请关注我的 GitHub 存储库，了解生成漫画的应用程序的代码库。你可以在我的漫画页面上找到更多漫画。

一如既往地欢迎评论、批评和建议