浅谈CSS响应式图片运用中的srcset属性

前端  /  管理员 发布于 7年前   165

介绍

在整个网站的开发中，在管理图片上较为困难。注意，图片要在各种设备上平滑过渡显示，它们将会碰到的问题有：

    适当的优化和减少图片的体积
    注意不要浪费带宽（网站的成败与否加载速度是其中主要因素之一）
    设备使用相应的解决方案

对于第一个问题，使用TinyPng和JPEGmini工具可以帮助减少图片的体积和优化图片。

对于第二个问题，在一些场合下我们可能要使用到强大的媒体查询。多亏了有他们，我们可以很简单的处理背景图片的问题。但是，有些地方使用的是img来显示图片，这也是我们要解决的第三个问题，也是最后一个问题，如何根据设备的分辨率调用合适的图像。

在这种情况之下，有个两个解决方案：使用<picture>元素和<img>元素的srcset属性。

在这篇文章中，我会向大家总体的介绍srcset属性。

srcset属性

使用这个属性主要有什么好处呢？好处就是Web开发人员可以给使用高分辨率的用户显示高分辨的图像源，给其他设备分辨率的用户使用其他的图像源。在第一种情况下使用低PDD(pixel density displays)不需要背负着下载无用的高分辨率图像，而担心浪费带宽；而后者可以享受高清设备带来的不一样的享受。在第二种情况中，我们可以根据不同的屏幕尺寸指定不同的图像，这主要是根据用户的设备来提供一个较好的图像源。

事实上，srcset属性就做了这样的事情，根据像素密度或用户使用的屏幕尺寸大小，指定一个图像源。所以说，srcset属性可以让浏览器提供一套"建议"，让浏览器根据正确的行为匹配正确的图像。通过这样做，我们提高了Web的质量，同时提高了Web页面的加载速度和给用户一个较好的体验。

在这一点上，这个属性的基本特征就是：根据指定的条件来做选择，使其工作。这对于我们编码工作和实现的方法变理更为简易。

W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。

说起图片的srcset属性，估计有不少与时俱进的小伙伴会在心中不由自主念想道：“这个我知道的，可以根据屏幕密度现实对应尺寸图片，例如……”
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
上面代码对应demo轻戳这里。当然，我们也可以简写成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">
由于我们都不是“别人家”的公司，因此，我们的办公PC显示器默认设备像素比都是1，因此，这些显示器呈现的图片默认都是128像素宽度的。下面问题来了，（不是挖掘机哪家强），如何让潘肯允酒髂Ｄ飧呱璞赶袼乇饶兀
方法一：
Chrome浏览器，切换设备模式，如下截图:

然后，选择对应的设备，例如iPhone6 Plus的设备像素比就是3.

此时，刷新页面，加载的就是大尺寸图片，也就是256像素宽度那张。
方法二：

此时设备像素比window.devicePixelRatio为1.5，因此加载的就是256像素宽度的图片。有图有真相：

不同的2x显示策略
还有些时候，使用同尺寸的高清图片作为2x对应图片，虽然两者图片大小差不多，但个人觉得还是2倍尺寸优化大图更好一点，为什么呢？
srcset当初设计的用意是为了高密度屏幕上图片更好的显示，如果世界上就只有“不同设备密度”这一个戏剧冲突的话，2x图片是高清图还是2倍尺寸图其实都无伤大雅。然而，事实上，生活无处不戏剧，现代web布局中，有种布局不可忽略，那就是「响应式布局」，剧本往往会这样，PC浏览器上显示大图，Mobile浏览器上显示小图。发现没，同样是“大小图的要求”，和设备像素比有类似的戏剧冲突。
于是，如果我们2x图片使用的是高清图，结合响应式布局，我们可能需要4张图片资源，即：小图、小图高清和大图、大图高清。但是，2x图片走的是2倍尺寸图片，我们只需要3张图片资源，即：小图、中图以及中图、大图。
在老一代srcset规范成型过程中，其实已经考虑到与响应式布局的纠葛，出现了w描述符，例如，走高清路线的：

CSS Code复制内容到剪贴板

1. <img src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">  

走2倍尺寸路线的：

CSS Code复制内容到剪贴板

1. <img src="small.jpg" srcset="small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x">  

注意啊注意：千万不要去关心上面的w描述符的含义，因为新的srcset属性中w描述符含义与之完全不同，为了避免理解冲突，心中跟我默念3遍：忘掉它、忘掉它、忘掉它，无视它、无视它、无视它。大家可以把精力放在下面，新的srcset规范以及新的sizes属性语法含义等。