响应式图片使用“srcset”和“sizes”属性 这两种新图片属性是如何提高响应式网页设计的
2015-12-2
作者:轩啸网络
如今的网页，通过使用响应式网页设计的方法建立多设备友好的网站是成功的关键。开发响应式网站的挑战之一就是处理图像。
然而，有很多网页专业人员能部署网站的响应式图像的可用方式，有些多数srcset和sizes属性添加到HTML<img>元素。
这些属性允许网页设计者把不同缩放版本的图像传输到不同大小的屏幕。从性能角度看，加载最大可能性版本的图像是最好的，然后再使用CSS扩展其维度。
有两种使用srcset属性的方法
第一个是使用解决方法说明。下面是关于这种句法的示例：
<img src="logo-sm.jpg" srcset="logo-med.jpg 2x, logo-lrg.jpg 3x" alt="Company Logo">
你会发现这种属性的句法就是添加<img>标记。这个标记指定了图像URL使用src属性。你也应该包括标准的alt属性。你可以通过使用srcset属性添加任何额外的图像。这些图像是用逗号分隔开的，以及包含一个图像本身的URL和有更高的像素密度（2倍、3倍等）的视网屏幕的解决方法说明
当一个图像不需要改变不同屏幕尺寸的时候，Srcset句法版本会经常使用，但是你也不用仅仅只传输品质最好的版本给所有屏幕。
Logo是这个方法的最好的例子。尽管屏幕正在使用，logo可能也会以固定宽度呈现，但是在视网设备上，你得确保能传输一个为原图像两倍的清晰，高品质版本图像。
图像的另外的例子就是从屏幕到屏幕的社交媒体图标可能会保持相同大小。
你也可以使用带有图标图像的srcset句法。另外，你也可以选择使用SVG图像图标。
如何操作
当使用srcset这种解决方法说明时，浏览器会把1倍图像传输到非视网屏幕上。一个双倍像素密度的视网屏幕会获取指定srcset的2倍像素。你也可以指定3倍，4倍等版本的更高像素密度支持。
如果一个浏览器不支持srcset属性（更多在于短期地浏览器支持），他们会回到最初的状态，仅仅是使用src属性的<img>标记的1倍图像。
句法2-使用大小
当你需要有一个随着屏幕尺寸而改变的流线型宽度的图像时，就需要用到Srcset属性的第二个方法。对于这种方法，你需要srcset句法的演变，你会需要包含一种新的尺寸属性。
<img srcset="team-sm.jpg 500w, team-med.jpg 750w, team-lrg.jpg 1000w, team-xl.jpg 1250w" sizes="(max-width: 450px) 100vw, (max-width: 960px) 75vw, 700px" src="team-med.jpg" alt="Team photo of our company">
你会发现这种句法比之前的解决办法要更复杂。在前面的例子当中，你可以包含src和alt属性的<img>，以避免浏览器不支持这种功能，它可能会重新回到指定的这个图像当中。
对于代码中srcset部分，你可以指定一系列的URL图像，而不是增加图像宽度这种解决办法。在这个例子中你会发现图像有500,750,1000和1250这些宽度。
接下来，你添加了有两种值（媒体查询和尺寸）的尺寸属性。当你设置了要应用的尺寸状态，这是由媒体查询决定。在这个例子中，第一个媒体查询设置了屏幕的值为450px宽度，第二个设置了屏幕宽度为960.最终的值不包含用于上面所有屏幕的最终指定值大小的媒体查询（使用过的700px）
对于大小值，你可以使用一个绝对的测量值比如像素，或者你可以使用一个带有”vw”或者”viewport-width”单位的相对值。第一个媒体查询使用了”100vw”，这意味着它会展现出100%的视图宽度。第二个媒体查询使用了75vw，或者75%的视图宽度。注意的是百分比值在这个方法中没有作用，所以如果你需要图像是如何显示的路流线型尺寸，你得使用视图宽度测量值。
在这个示例中，原始的图像将被用作”team-med.jpg”，宽度为常用的750像素。在srcset我们建立了选择性的大小，更小的和比之前更大的，包括500,1000和1250.浏览器自动计算出图像的最合适的显示方式。
如果一个屏幕正在被使用来访问480像素宽度的小型网站（在正常，非视网屏幕上），浏览器会看到可用的尺寸，确定500像素宽的形象是合适的。
如果相同的屏幕是一个两倍像素密度的视网屏幕，浏览器会觉得500像素宽度太小，因此它会查看srcset，最终会传输1000像素宽度的图像。如果设备的屏幕分辨率为1024宽（非视网），它会决定使用最佳的图像是分辨率为最大的，宽度为1250，因为所有其他尺寸都太小。
图像版本一旦确定，尺寸属性的信息就会随着图像显示出来。
值得注意的是，当使用srcset时，你不能图像宽度和解决方法说明都一并使用。你必须任选其一种或者选择其他的方法。
所有的重要问题-“浏览器是怎样支持这种功能的呢?”,就和”我能使用这个功能吗?”一样的意思。
Srcset支持实际上是相当合适的。在Chrome,Firefox和Opera以及Safari更新的版本都是受支持的，它被Microsoft Edge 13支持，但是不被IE的旧版本支持。当然也会受有些旧版本的移动端浏览器的支持，比如Andorid和IOS。为了让这些旧版本的浏览器也支持，会用上Filament组中类似Picturefill的polyfill。
关于艺术方向
Srcset属性不允许响应式图像的艺术趋向。当图像因为各种视图需要裁剪成不同版本的时候，如果你需要控制水平，你最好是使用HTML<picture>元素。
