什么是响应式图片？

响应式图片关键之一就是让浏览器能够自动调节图片尺寸。为了能自动调节图片尺寸，就需要准备大尺寸图片。一些网站为了适应高清屏设备的要求，都需要准备超大大尺寸图片，例如： http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition_large_2x.jpg

此图尺寸：5144px x 1698px，体积是398K。问题：把这样一张尺寸过大的图片传送到一些低分辨率设备上，会造成资源浪费。

什么情况下需要使用到响应式图片？

一般情况下，需要使用到响应式图片的情况有两种：分辨率切换和艺术指导，以下分别详细说明：

分辨率切换：硬式切换

最常见的情况，不改变图片高宽比的情况下显示不同尺寸，这个很好理解

艺术切换：软式切换

很多情况下，设计师和产品会要求在尺寸改变的同时，改变图片的高宽比，以达到修改图片的内容，聚焦点等等。这种情况主要是为了迎合人类主观视感受的要求。我们把这种情况称为艺术指导，或相对于分辨率切换：硬式切换，也可以称之为软式切换。

当照片以大尺寸显示时，显示出背景里的汽车工厂是有意义的。背景可以在图像上说明这个事件发生的地点。然而试想如果我们把图片缩小来适应小屏幕的时候呢？照片被缩放到宽度为100px。

在这个尺寸上，你无法辨认出人物的脸部，背景更是一片模糊。因此，我们不应该简单得缩放图片，而应该合理裁切图片, 去掉一些背景从而把焦点放到奥巴马身上。最终结果这张图片在小尺寸上的表现变得更好。

来看一下更加复杂的例子：最常见的场景是图文并茂的设计

这个图像包含了三个照片，两个带有文字的logo，一个描边邮戳和文本。如果我们只是简单粗暴地把这个图像调整到320px宽，文本将会变得太小而无法辨认。

更理想的结果是这样的：

响应式图片解决方案

响应式图片解决方案，最经典的有元素，其它比较新近的例如和srcset，等，不管采用哪种方案，元素必不可少。

img 的currentsrc属性

方法：用JavaScript来监控img元素上currentSrc的变化

来看一个例子

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;
    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };
  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

在示例中，你可以改变浏览器尺寸来观察currentsrc的变化。将你的浏览器慢慢的缩小，你将看到如下图的一个变化效果：

其它更强大的方法，比如说想要支持高分辨率屏幕，我们需要扩展元素。

SRCSET

自从苹果发布带retina显示屏的iPhone 4，网页设计人员一直在找一个处理高分屏的方案。于是引入了srcset和它的显示密度。

srcset密度描述

语法：在元素上添加srcset属性。srcset的值是一个用逗号分隔的列表。列表中的每个项包含一张图片的路径并且按倍数（例如,1x,2x,3x...）提供多张分辨率的图片

问题： 1x,1.5x,2x,3x !!!! 我们需要为多种像素密度提供相应的设置吗？好难维护！！！

Srcset宽度描述

语法与屏幕密度描述符类似。srcset属性值是逗号分隔的图片源和描述列表。区别是我们在这边列出了图片源宽度。

问题：当图片开始下载时浏览器知道的只有视窗尺寸

SRCSET密度描述和宽度描述结合

也有人提到混合SRCSETSRCSET结合显示密度描述和宽度描述的方法，在CHROME模拟器上测试失效

智能的srcset和sizes属性

以上写法都会有各种问题，最新的建议SRCSET写法是这样子的：

非常方便：只需要提供图片资源、以及断点，其他都交给浏览器智能解决，什么响应宽度啊、设备像素比啊，都不要关心了，浏览器会自动匹配最佳显示图片。例：

<img src="kebile-s.jpg" srcset="kebile-s.jpg 320w, kebile-m.jpg 640w, kebile.jpg 1280w"
         sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, 900px">

上面的例子提供了三种尺寸的图片源，SIZES设置的意思是：指定三种BREAKPOINT，屏幕小于480时图片WIDTH=100%， 481-900时图片WIDTH=50%，然后是901之后图片永远是显示900PX。 100vw是指图片的宽度值设置，1vw等于 1%，33vw就是33%，当然也可以使用其它的单位，em, px, cm, vw, 等等，甚至可以用CSS3的calc计算，例如：sizes="(max-width: 360px) calc(100vw - 20px), 128px"。

PICTURE标签

之前的内容都是针对“分辨率切换”的使用情况来进行的讨论。下面来讨论一下怎么应对“艺术指导”的情况。这就需要用到元素。

YIXUNFE / blog

响应式图片 #25