HTML5 处理响应式图片

CSS「image-set」 解决了背景图片的响应式问题，但是 HTML中的 img 元素如何处理？

<picture alt="">

<source src=hires.png media="min-width:800px">

<source src=midres.png media="min-width:480px">

<source src=lores.png>

<!-- 不支持的浏览器降级处理 -->

<img src=midres.png alt="">

</picture>

于此同时，其他的一些想法如雨后春笋般涌现出来，于是 W3C 社区讨论组 Responsive Images Community Group 应运而生。最新的规范在这里：http://picture.responsiveimages.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文发布时间，最近一次更新是 2013年4月24日，规范示例：

<picture width="500" height="500">

<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="small-1.jpg" alt="">

<p>Accessible text</p>

可以看到这里的「srcset」属性类似「image-set」，通常情况下，「srcset」里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。但是 Apple 的 eoconnor 提出的方案是这样的：

<img src="foo-lores.jpg"

    srcset="foo-hires.jpg 2x, 

    foo-superduperhires.jpg 6.5x"

    alt="decent alt text for foo.">

任何一个新标准的提出，都会存在各种不同的声音，这是好事，作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。

我们可以在CSS 中使用「image-set」属性值，因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的，如果有特殊的需求可以使用 Media Queries。

查看原文请参考网址：http://mingkr.com/html5-response-img

查看原文网站首页：http://mingkr.com