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

介绍

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

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

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

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

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

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

srcset属性

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

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

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

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

说起图片的srcset属性，估计有不少与时俱进的小伙伴会在心中不由自主念想道：“这个我知道的，可以根据屏幕密度现实对应尺寸图片，例如……”

上面代码对应demo轻戳这里。当然，我们也可以简写成：

由于我们都不是“别人家”的公司，因此，我们的办公PC显示器默认设备像素比都是1，因此，这些显示器呈现的图片默认都是128像素宽度的。下面问题来了，（不是挖掘机哪家强），如何让

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！