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像素宽度的。下面问题来了，(不是挖掘机哪家强)，如何让屌丝显示器模拟高设备像素比呢?

方法一：

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复制内容到剪贴板

走2倍尺寸路线的：

CSS Code复制内容到剪贴板

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

CSS响应式图片运用中的srcset属性相关推荐

响应式图片img中的srcset和sizes
响应式图片img中的srcset和sizes 参考链接如果是在小屏手机屏幕上显示网页,那么没有必要在网页上嵌入很大的图片.这被称之为分辨率切换问题(resolution switching prob ...
分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...
CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）
什么是响应式图片? 响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片. 具体表现为: 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰) 低分辨率的屏幕,显示低分辨率 ...
【CSS】响应式图片
原图:(宽1680px,高1050px) 可是,我们平时做网站的时候当<img src="***">中的图片大于可视窗口(viewport)时,就会出现横的滚动条.图片 ...
响应式图片srcset未生效
<imgsrcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"sizes=" ...

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

CSS响应式图片运用中的srcset属性相关推荐

最新文章

热门文章