研究一下响应式图片加载属性srcset和sizes_html/css_WEB-ITnose

元旦过后又长一岁，然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4，就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性：srcset和sizes。比如：

这俩个属性的作用是为不同显示尺寸加载不同的图片源，这样就能在图片本身做到“响应式”，而不仅仅是跟随屏幕尺寸了。

比如上面图中的srcset为

srcset=".../gt-scavenger_1-300x507.jpg 300w, .../gt-scavenger_1-768x1298.jpg 768w, .../gt-scavenger_1-606x1024.jpg 606w, .../gt-scavenger_1-624x1055.jpg 624w, .../gt-scavenger_1.jpg 1407w"

其中每一段的格式为srcset=”[图片URL] [图片宽度], [图片URL] [图片宽度]…”，按最新的标准，单位“w”表示当前显示宽度的像素值。解释起来就是这张图片在低于300px宽度的时候，显示小图“gt-scavenger_1-300×507.jpg”；高于300像素且低于606像素时，显示中等尺寸图片“gt-scavenger_1-606×1024.jpg”；当图片显示尺寸大于1407像素时就显示全尺寸图“gt-scavenger_1.jpg”。另外一个属性sizes的写法

sizes="(max-width: 1407px) 100vw, 1407px"

其格式为sizes=”[media query] [视窗宽度], [media query] [视窗宽度] …”。这里的宽度为视窗宽度，即我们常说的viewport宽度。和我们在媒体CSS中写的媒体查询是一致的，这里最后一个“1407px”指默认状态下，即前面的媒体查询没有描述到的情况下这张图片显示的宽度。以上代码的通俗解释是，这张图片在1407px宽的视窗内撑满视窗（100vw），而视窗宽度超过1407px，图片就按1407px的最大尺寸显示。

srcset和sizes为HTML5的最新属性，合理使用它们，尤其是srcset，可以有效避免资源的过度加载，在移动端通过按需加载，减少图片的加载量，加快网页打开速度。不过在实际开发中这样分级显示图片是很麻烦的，要制作多个尺寸的图片，HTML里还要加那么多代码…想想就头疼。

令人惊喜的是在最新版WordPress中你完全不需要进行任何额外操作，只需像平时那样在文章中插图片即可。WordPress会自动根据你上传的图片给，按照各级缩略图规划出适合的显示分级，真的很强大！

不过在一些旧的WordPress项目中我们也碰到了问题。比如在有些页面中我已经做了“懒加载”，即预先在img的src里放一张空图片，把实际URL写到data-original属性里，再根据页面滚动的高度，把data-original的值放到src属性里。当图片被赋予了srcset属性时，所做的这一切就形同虚设了。页面载入的时候，浏览器已经从srcset属性中读取了一张适配的图片到src属性中：

要避免这种情况，我只能在懒加载和srcset之间二取其一。如果要在WordPress中禁用srcset和sizes，你可以把以下代码加到主题的function文件中：

//disable srcset on imagesfunction disable_srcset( $sources ) {	return false;}add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

最后，如果你想要深挖srcset和sizes，可以看一下 这篇文章 。

本站所有文章均为原创，欢迎转载，但请注明文章出处：http://blog.brain1981.com/1323.html