HTML5 响应式图片属性 srcset 和 sizes 的使用方法

网站优化评论1,564字数 1005阅读模式

大家也许对响应式设计这个概念并不陌生,例如,我们在访问某博客页面时,会发现 PC 端和移动端时会呈现不同的表现形式。而所谓响应式图片,即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片。今天为大家简单分享一下 HTML5 响应式图片属性 srcset 和 sizes 的使用方法。

HTML5 响应式图片属性 srcset 和 sizes 的使用方法

响应式图片介绍

HTML5 提供了新属性 srcset 和 sizes,目前主流的浏览器都支持该属性。其中 sizes 定义 img 显示的尺寸,srcset 定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。

srcset

格式一:图片源地址 空格 屏幕像素密度[, 图片源地址 空格 屏幕像素密度, ...],如:

srcset="1.jpg 1x, 2.png 2x"

格式二:图片源地址 空格 图片像素宽度[, 图片源地址 空格 图片像素宽度, ...],如:

srcset="1.jpg 580w, 2.png 618w"

sizes

sizes 用来表示尺寸临界点,语法为:

sizes="[media query] [value], [media query] [value] ... "

具体用法

<img src="avatar.jpg"
    srcset="avatar-small.jpg 500w, avatar-large.jpg 800w"
    sizes="(max-width: 600px) 400px, 900px">

srcset 定义了两个图片源,分别是宽度为 500 像素 avatar-small.jpg 和 宽度为 800 像素 avatar-large.jpg。如果不支持 srcset 属性,默认加载 avatar.jpg。

sizes="(max-width: 600px) 400px, 800px" 表示视口宽度不足 600 像素的时候,图像宽度为 400 像素,此时浏览器依然是加载小的图像(等比缩小),而当视口宽度大于 600 像素的时候,图像宽度为 900 像素,浏览器就会加载大的图像(等比放大)。

响应式图像除了可以适应视口的宽度,还可以适应不同的设备像素比,比如这里,当视口宽度不足 600 像素的时候,如果设备像素比为1,则浏览器还是加载显示小的图像,但是如果设备像素比为2 ,则浏览器会加载显示大的图像。

结束语

本文简单分享了 HTML5 响应式图片属性 srcset 和 sizes 的使用方法,仅供有此需求的朋友参考。通过响应式图片设计,既可以防止网络带宽的浪费,又可以提升网站的用户体验。如果有任何意见或建议,欢迎在下方评论处留言。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2022年10月30日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/225.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证