响应式图片的3种解决方案

个人总结：在当前响应设计和自适应设计的流行下，很多web 应用往往都兼容手机、平板和PC，其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。

响应图片和响应媒体是响应式网站的三大基础重点之一。表面上看这是一件非常简单的事情，只要把图片元素的高、宽属性值都移去，然后设置max-width属性为100%即可。不过在这么做之前还需要考虑很多情况。

设计响应式图片的难点

原文链接：http://caibaojian.com/3-solutions-for-responsive-image.html

去年Filament Group在重构Boston Globe网站时也是通过设置max-width属性使得图片能够自适应。不过这么做的前提是你必须要创建一幅尽可能高分辨率的图片。原文来自：http://caibaojian.com/3-solutions-for-responsive-image.html

除非是真正需要那么大的图片，否则这就是一种浪费。智能手机和平板电脑通过移动网络浏览该网站时，并不需要那么大尺寸的图片——大尺寸图片意味着大的带宽。即使不考虑带宽也应该考虑同一幅图片以不同尺寸显示时的问题，在图片原始大小是300px的情况下以1000px尺寸显示无疑会损失很多的细节。最好的解决方法则是使用大图的一部分或者干脆完全用不同尺寸的图片。

同时我们不应当忘记高分辨率的显示需求。Apple 设备的retina技术显示图片要求更多的图片，考虑到其他设备也会跟随Apple的高分辨率显示技术（不过可能显示的像素尺寸不同）。我们若将所有不同尺寸的图片都预加载进来，此乃饮鸩止渴之举，万不可取——毕竟我们的目标只是是减少带宽而非增加。

我们需要更强大的能力为不同的设备环境提供合适的图片和多媒体。

原文链接：http://caibaojian.com/3-solutions-for-responsive-image.html

3种解决方法

v目前已经有几种备选的解决方案解决这些问题，Chris Coyier在他的博文里归纳总结如下：原文来自：http://caibaojian.com/3-solutions-for-responsive-image.html

1. 创建一个新的（html）元素
2. 创建新的图像格式
3. 使用特定技术手段

下面我们一一简述各种方案。

 创建新元素（或属性）

该方法已经在使用了，不过在使用方式上存在一些争议。这些争议主要来自两方面：业界的web开发者和浏览器制造者。web开发者提议创建一个新的picture元素（类似HMTL5中的video这样的元素），该元素中包含其他的图片源，示例代码如下：

<picture alt="image description">  <source src="/path/to/medium-image.png" media="(min-width: 600px)">  <source src="/path/to/large-image.png" media="(min-width: 800px)">  <img src="/path/to/mobile-image.png" alt="image description"></picture>

原文链接：http://caibaojian.com/3-solutions-for-responsive-image.html

via其中的img元素是默认情况下显示的图片源，在其上面的两个source元素则是在特定媒体查询（media queries）条件下显示的图片——这也是开发者所喜欢的一种解决方案。原文来自：http://caibaojian.com/3-solutions-for-responsive-image.html

Scott Jehl针对图片元素创建了polyfill项目，就是利用了这种思想，你现在可是就可以使用它了。

 <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">        <span data-src="small.jpg"></span>        <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>        <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>        <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->        <noscript>            <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">        </noscript>    </span>

浏览器开发者则是通过给img元素标签增加srcset属性来解决此问题的，功能一样，然而直觉上不好理解。

<img src="path-to-default-image.jpg" alt=""  srcset="path-to-default-image.jpg 600w 200h 1x,                   path-to-another-image.jpg 600w 200h 2x,                   path-to-a-third-image.jpg 200w 200h">

原文链接：http://caibaojian.com/3-solutions-for-responsive-image.html

via以srcset的一个值为例讲解：原文来自：http://caibaojian.com/3-solutions-for-responsive-image.html

path-to-another-image.jpg 600w 200h 2x

• Ÿ   path-to-another-image.jpg 是不言自明的，当符合下述条件时就使用该 图片
• Ÿ   依据media queries要求，设备最小尺寸为600w和200h
• Ÿ   浏览器有以2x像素密度显示的能力

因此这里所表达的意思是，当浏览器能够处理2x像素图片，且设备至少是600px宽、200px高的情况下，使用此图片源显示。此种解决方法从浏览器开发者角度看是非常合适的，毕竟能够让浏览器自己通过算法获取设备的兼容性和像素密度。

上述两种方法各有优点，此篇文章也并未认为其中一方的方法要好于另一方的。如何你想了解更多的讨论细节，可以点击链接。作为网站开发者我比较喜欢用picture元素，然而使用srcset属性的img元素有更强的兼容性。这场讨论现今仍在进行，大多数人希望能够找到一种吸取两者优点的方法。