惊人的 HTML5 图片元素

图片元素是一个 HTML 元素,用于根据不同的屏幕尺寸或视口来声明图像,而无需编写“CSS”媒体查询。它有两个属性,一个是使用该srcset属性来指定基于不同屏幕尺寸的不同图像的标签,以及一个在浏览器不支持图片元素时充当后备图像的强制标签。 用例 在一些用例场景中,图片标签非常有用,下面是这些场景的三个示例。 图像类型支持 图像有多种格式,如 AVIF 和 WEBP,它们有很多优点,但可能并非所有浏览器都支持。在这种情况下,图片标签非常适合使用标签提供替代格式。来源:MDN 文档 图像宽度 根据不同的屏幕尺寸决定要显示的图像。如果您想在桌面屏幕上预览大图像而在移动设备或平板电脑屏幕上预览较小的图像,这一点尤其重要。 节省带宽 图片标签可以很好地节省带宽,从而通过加载最适合查看者显示的图像来加快页面加载时间。
阅读全文 gblog_arrow_right