在这篇文章中讨论的新特性 — srcset/sizes/<picture>
— 都已经被新版本的现代浏览器和移动浏览器所支 持(包括Edge,而不是IE)。
解决的问题
- 分辨率切换问题:小屏手机屏幕上显示网页,那么没有必要在网页上嵌入pc端的大图片,浪费带宽
- 艺术方向问题:当网站在狭窄的屏幕上观看时,显示一幅包含了重要细节的裁剪版图片,而不是显示pc端的大图,这样会显得图片缩小,重要地方不突出
分辨率切换问题
不同分辨率加载不同尺寸的图片
需要说明的几点如下:
-
srcset
语法: "图片路径 物理像素, 图片路径 物理像素, ....." -
size
: "媒体查询 css像素" -
src
: 当浏览器不支持上面的属性的时候,默认加载这里
加载的流程如下:
- 查看设备宽度
- 检查sizes列表中哪个媒体条件是第一个为真
- 查看给予该媒体查询的槽大小
- 加载srcset列表中引用的最接近所选的槽大小的图像
在很多pc端上,1px=1w
不同的分辨率加载相同的尺寸
img { width: 320px;}
一般情况下当我们给img
设置固定的宽的时候,为了在不同的dpr
设备上显示相同的大小,可以配合x
来,例如1.5x
代表dpr为1.5的设备
艺术问题
需要说明的几点:
- source当中的也可以使用
srcset
、sizes
属性 - 必须提供一个
img
元素,以备浏览器不支持的时候使用
为什么不使用css
和javaScript
来完成图片替换
因为你不能先加载好 <img>
元素后, 再用 JavaScript
检测视图的宽度,如果觉得大小不合适,就动态地加载小的图片替换已经加载好的图片,这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说,是很糟糕的。
另一种方式svg
位图由以像素为单位的宽和高表示,如果位图显示的尺寸大于原始尺寸,一张较小的位图看来会有颗粒感(然而矢量图不会这样)
但是它不适用于所有的图片,在某种程度上是这样的——它们无论是文件大小还是比例都合适,无论在哪里你都应该尽可能的使用它们。
虽然在简单图形、图案、界面元素等方面较好,但如果是有大量的细节的照片,创建矢量图像会变得非常复杂。加载会消耗更多的带宽。
使用现代图像格式
有很多令人激动的新图像格式(例如WebP
和JPEG-2000
)可以在有高质量的同时有较低的文件大小。然而,浏览器对其的支持参差不齐。
为了兼容老旧浏览器,我们可以在<source>
标签当中指定MIME
类型,使用type
属性,并在srcset
当中指定相应格式的图片