响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）

响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）

什么是响应式图片？

响应式图片即针对不同的设备分辨率和尺寸，显示对应的最佳分辨率的图片。

具体表现为：

高分辨率的屏幕，显示高分辨率图像（确保高清屏上，图片依然足够清晰）低分辨率的屏幕，显示低分辨率图像（提升移动端网速较慢时的访问速度）。

高清屏是怎样让图片变模糊的？

此时需要学习一个新概念 —— 设备像素比

设备像素比 = 物理像素(设备像素) / 独立像素(CSS像素)

普通屏上1个css像素对应1个物理像素高清屏上1个css像素对应4个或更多物理像素

以css像素为​​200px*300px​​​的 img标签为例，普通屏幕下对应的物理像素为​​200*300​​​，而高清屏（如苹果的retina屏幕）对应物理像素为​​400*600​​

即4个物理像素显示一个css像素

若图片资源的分辨率为200*300

为了解决高清屏导致图片模糊的问题，便需要使用更高分辨率的图片，如​​400*600​​的图片，但更高分辨率的图片尺寸也会更大，需要消耗更长的页面加载时间。

对于普通屏，更高分辨率的图片虽然不会模糊，但会少一些锐利度或者色差，同样会造成资源浪费。

所以最佳方案为：​​随屏幕分辨率的不同，加载对应分辨率的图片。​​

响应式图片的实现

通常每个位图图像需要创建至少四个版本：

source_1x.png “正常”尺寸，如​​200*300​​source_2x.png 两倍大小，​​400*600​​source_3x.png 三倍大小，​​600*900​​source_4x.png 四倍大小，​​800*1200​​

而纯矢量图形，导出一个SVG文件即可。因为SVG文件可无限扩展，无论分辨率如何，在所有屏幕上的显示效果都很好，且当前所有浏览器版本均支持。

srcset属性实现设备像素比自适配

srcset 属性内对源图片的数量没有限制

在设备像素比为1时会显示图片https://www.apispace.com/news/zb_users/upload/2022/09/20220904014127_47407.jpg 在设备像素比为2时会显示图片source_2x.jpg 在设备像素比为3时会显示图片source_3x.jpg 在设备像素比为4时会显示图片source_4x.jpg

浏览器的缩放，也会改变设备像素比，如把页面放大到200%时，设备像素比会变为2，此时便会显示图片source_2x.jpg

srcset 属性实现屏幕宽度自适配

​​w​​ 为宽度描述符，以电脑的浏览器为例，设备像素比为1时，当浏览器窗口大小为 400px，则此时图片的实际宽度为 400px*1 = 400w，则会显示图片 source_400.jpg

调整浏览器窗口大小为 600px，则图片的实际宽度为 600px*1 = 600w，显示图片 source_600.jpg

srcset + sizes 属性实现屏幕宽度和分辨率的自适配

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

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

所有的值都是指宽度值，且单位可以为PX, VW, EM甚至是CSS3中的计算值CALC

当屏幕宽度为 0 ~ 376px 时，图片宽度按照375px计算当屏幕宽度为 376 ~ 769px 时，图片宽度按照768px计算当屏幕宽度大于 769px 时，图片宽度按照1024px计算在普通的PC电脑上，浏览器缩放比例为100%时，屏幕的设备像素比是1，当浏览器窗口大小为 0 ~ 376px 时，sizes属性计算值为375px，则图片的实际宽度为​​375*1=375w​​，此时浏览器会加载图片 source_375.jpg。在iphone6/7/8中，屏幕的设备像素比是2，sizes属性计算值为375px，则图片的实际宽度为​​375*2=750w​​，此时，375w < 750w < 768w, 则会加载图片 source_768.jpg 。iphone plus 和 iphone X中，屏幕的设备像素比是3，sizes属性计算值为375px，则图片的实际宽度为​​375*3=1125w​​，加载图片 source_1024.jpg。

picture 标签详解

picture 标签是专门针对响应式的需求设计的标签，用于实现在不同的设备上显示不同的图片。

​​media="(max-width:640px)​​ 表示在页面宽度不足640px的情况下，使用该标签所提供的图片来源作为它所在元素显示图片的图片来源。​​srcset="small@2x.jpg2x,https://www.apispace.com/news/zb_users/upload/2022/09/20220904014127_83782.jpg1x​​​ 告诉浏览器，该来源同时又为同一素材图片提供了两种清晰度的版本​​small@2x.jpg​​​和​​https://www.apispace.com/news/zb_users/upload/2022/09/20220904014127_83782.jpg​​，分别供高清设备与标清设备选择。浏览器可以根据实际情况自主选择。​​sizes="calc(100vw / 3)"​​​ 会动态改变图片的大小，最终图片宽度始终为视口的三分之一​​calc(100vw/3)​​最后的​​img​​ 标签不能省略，标签只决定图片源，最终图片的渲染还是需要 img 标签，同时，在浏览器不支持 picture 标签的情况下，会使用 img 标签。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。