惊人的 HTML5 图片元素

Jun 27, 2022 1 min read HTML

图片元素是一个 HTML 元素，用于根据不同的屏幕尺寸或视口来声明图像，而无需编写“CSS”媒体查询。它有两个属性，一个是使用该srcset属性来指定基于不同屏幕尺寸的不同图像的标签，以及一个在浏览器不支持图片元素时充当后备图像的强制标签。

用例

在一些用例场景中，图片标签非常有用，下面是这些场景的三个示例。

图像类型支持

图像有多种格式，如 AVIF 和 WEBP，它们有很多优点，但可能并非所有浏览器都支持。在这种情况下，图片标签非常适合使用标签提供替代格式。来源：MDN 文档

图像宽度

根据不同的屏幕尺寸决定要显示的图像。如果您想在桌面屏幕上预览大图像而在移动设备或平板电脑屏幕上预览较小的图像，这一点尤其重要。

节省带宽

图片标签可以很好地节省带宽，从而通过加载最适合查看者显示的图像来加快页面加载时间。

这个怎么运作

我将通过这个简单的示例演示图片元素如何工作，该示例gif在桌面上显示 483KB 图像，在平板电脑屏幕上显示 250KB 图像，最后PNG在移动设备上显示 32.7KB 图像。这只是图片元素可能实现的示例，您可以使用它更有创意。

<picture>
<source media="(min-width: 768px)" srcset="desktop-image.gif" />
<source media="(min-width: 500px)" srcset="tablet-image.png" />
<img src="mobile-image.png" alt="Banner image" />
</picture>

使用该media=““属性，我们为要显示的每个图像指定断点。在 768 像素或更高时，我们希望显示桌面图像。那么在 767px 会发生什么？好吧，即使我们没有明确指定这个特定的断点，图片元素也足够聪明，可以使用下一个源标签，如果它没有看到，它会切换到移动屏幕 500px 的默认后备图像. 如果这让您有点困惑，请查看一个现场示例以获得更清晰的信息。 https://picture-element.netlify.app/ 尝试调整屏幕大小以查看效果。

浏览器兼容性

除了老式的“Internet Explorer”之外，大多数浏览器都支持图片元素，但我不会为此烦恼，因为微软宣布他们将于2022 年 6 月 15 日停止使用 IE 。所以可以肯定地说，所有主流浏览器都将从下个月开始支持图片标签。

最后

因此，您可以看到 HTML 图片元素的强大功能。希望这能给你一些关于如何使用它的想法。对于关心艺术方向的开发人员来说，图片元素非常适合这样做。总体而言，它可以用来做几件事，包括优化图像以为移动用户创造更好的体验，从而提高 SEO 和性能。我很想知道您是否听说过或使用过图片元素，请在下面的评论中告诉我。感谢您的阅读，我们在另一篇文章中再见。