什么是响应式图片?
响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片。
具体表现为:
- 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰)
- 低分辨率的屏幕,显示低分辨率图像(提升移动端网速较慢时的访问速度)。
高清屏是怎样让图片变模糊的?
此时需要学习一个新概念 —— 设备像素比
设备像素比 = 物理像素(设备像素) / 独立像素(CSS像素)
- 普通屏上1个css像素对应1个物理像素
- 高清屏上1个css像素对应4个或更多物理像素
以css像素为200px*300px
的 img标签为例,普通屏幕下对应的物理像素为200*300
,而高清屏(如苹果的retina屏幕)对应物理像素为400*600
即4个物理像素显示一个css像素
若图片资源的分辨率为200*300
-
在普通屏幕上,1个css像素刚好对应1个物理像素,则图片能清晰显示
-
在高清屏幕上,1个css像素对应4个物理像素,而位图像素不可分割,屏幕便只能就近取色,导致图片模糊
为了解决高清屏导致图片模糊的问题,便需要使用更高分辨率的图片,如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 属性内对源图片的数量没有限制
<img src="source_1x.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x, source_4x.jpg 4x">
在设备像素比为1时会显示图片source_1x.jpg
在设备像素比为2时会显示图片source_2x.jpg
在设备像素比为3时会显示图片source_3x.jpg
在设备像素比为4时会显示图片source_4x.jpg
浏览器的缩放,也会改变设备像素比,如把页面放大到200%时,设备像素比会变为2,此时便会显示图片source_2x.jpg
srcset 属性实现屏幕宽度自适配
<img src="source.jpg" width="100%" srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">
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
<img src="source.jpg"
sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
srcset="source_375.jpg 375w, source_768.jpg 768w, source_1024.jpg 1024w">
- 当屏幕宽度为 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 标签是专门针对响应式的需求设计的标签,用于实现在不同的设备上显示不同的图片。
<picture>
<!-- 页面宽度为 0-640px -->
<source
media="(max-width: 640px)"
srcset="small@2x.jpg 2x, small.jpg 1x"
/>
<!-- 页面宽度为 640-960px -->
<source
media="(max-width: 960px)"
srcset="medium@2x.jpg 2x, medium.jpg 1x"
/>
<!-- 页面宽度 >960px,图片大小变为视口的三分之一 -->
<source
srcset="large@2x.jpg 2x, large.jpg 1x"
sizes="calc(100vw / 3)"
/>
<!-- 浏览器不支持 picture时 -->
<img src="small.jpg" />
</picture>
media="(max-width:640px)
表示在页面宽度不足640px的情况下,使用该<source>标签所提供的图片来源作为它所在<picture>元素显示图片的图片来源。srcset="small@2x.jpg2x,small.jpg1x
告诉浏览器,该来源同时又为同一素材图片提供了两种清晰度的版本small@2x.jpg
和small.jpg
,分别供高清设备与标清设备选择。浏览器可以根据实际情况自主选择。sizes="calc(100vw / 3)"
会动态改变图片的大小,最终图片宽度始终为视口的三分之一calc(100vw/3)
- 最后的
img
标签不能省略,<source>标签只决定图片源,最终图片的渲染还是需要 img 标签,同时,在浏览器不支持 picture 标签的情况下,会使用 img 标签。