如何设计响应式网页中的图片和图库

响应式网页设计已经是如今网站当之无愧的标准配置了，我们需要响应式的技术来应对日渐碎片化的屏幕尺寸，网页设计师也力图做好这件事情，而网页中的图片和图库的响应式设计，也是其中的重点难点，它们是网页中最常见，也是最直观可见的元素。

打开一个漂亮精致的网站，然而其中的图片和图库看起来怎么都和页面不匹配，这样的情况恐怕是最让人抓狂的了。

如果要设计好响应式的图片和图库，接下来要聊的一些方法技巧，兴许能给你提供一个明确而系统的思路，它们并不涉及到具体代码实现，更多牵涉到设计过程和处理手法，做好了这些工作，具体实现起来就不难了。

1、考虑高宽比

桌面端的图片浏览体验和移动端是完全不同的，这一点毋庸置疑。对于绝大多数的网站而言，图片展示的位置都很相近，大同小异。而设计师的任务，是要确保网站随着屏幕和设备变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。

这个时候，就要始终牢记图片的高宽比，并且始终控制高宽比不会改变。

回到桌面端网页中，大幅的背景图或者置于页面顶端的图片看起来非常漂亮，可是当它切换到移动端设备中的时候，首先屏幕比例和方向就不同了，那么它是否还那么好看呢？图片被缩小之后，信息的呈现是否会丢失？它是否会被拉伸？

这个时候，图片的高宽比的控制就显得特别重要了，控制原始图片不被拉伸，同时让图片所展示出来的部分的高宽比能够尽可能合理地匹配对应的屏幕，这样也就不必担心响应式断点过多，导致你需要上传过多的图片。

2、尺寸和比例的一致性

响应式设计就不能不说断点，为了照顾不同的屏幕，我们需要将图片裁剪成不同比例不同尺寸的大小，而这也直接影响着整个设计与开发的设计流程。

许多人仅仅只是将图片上传到CMS系统中，就希望它能以完美的样式呈现出来，这是不现实的！

每张图片都应当被裁剪为合理的尺寸，并且放置在理想的位置上，确保它们会以用户期望的样子呈现出来，后端可能会在这件事情上花费相当的时间和精力，但是这些努力是值得的。

3、使用轮播图或者图库

轮播图控件和图库控件是网站中最常见的图片载体，并且也可以更加自如的管理图片，尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候，控制图片元素的粗活重活基本上都会被这些控件接手过去。

不过，我们之前提到的图片长宽比和尺寸大小的控制同样也是要注意的，否则一样会让网页的展示效果变尴尬。

除此之外，你还需要什么场合使用什么样的控件，如果你拥有若干高品质的图片或者需要推荐特定的文章和专题，那么你需要使用幻灯片轮播图控件。

如果你拥有大量有待展示的图片，可以缩小展示也不存在可读性问题的话，不妨使用图库类的控件来展示，许多作品集类的网站常常会使用图库控件（具体可查看马海祥博客《响应式网页图片库设计的基本规则和技巧》的相关介绍）。

4、只使用高素质的图片

虽然这个道理不言自明，但是它仍然必须反复提醒，如果你没有高素质的图片，那么还不如干脆不要用图片得了。

现在，高素质、高分辨率的图片比以往任何一个时代都显得必需和重要，用户不会花费时间去看一个图片素质低下的网站，大家的屏幕都已经是视网膜屏幕了，低素质的图片在这样的屏幕上显得更加无法直视。

既然大家都在追求顶尖的视觉效果，那么高素质图片无疑是必需品。

5、尽量避免使用图片说明(Captions)

虽然图片说明能够让你的图片的信息更加丰富，但是它会非常直接地影响到网页的运作，尽量避免使用它们，如果实在是需要，尽量用其他的方式来呈现。

图片的Caption属性加入之后，确实能在桌面端拥有良好的渲染效果，但是小屏幕上常常问题不断，为了不让这些细小的可用性的问题影响用户体验，尽量避免使用就好了，因为这种小问题而让用户无法忍受并且离去，并不划算。

6、创建新图像格式

针对响应式图片创建一种新的图像格式，该新的格式包含了几种不同大小版本的图片，比如100k的文件里有75k的版本、20k的版本和5k版本的图像。

从某种意义上讲就像.mp3格式那样，该种文件格式既存储了歌曲也存储了歌曲的meta信息，这里的图像版本信息就好比MP3的meta信息，然后依据既定的一组标准选择该里面最为合适设备的一个图片版本。

这种解决方法的缺点是必须放弃一些可控性能，新文件格式会自行决定什么时候使用哪个版本的图片，只是当然对于不支持该种格式的浏览器也失去了后向兼容（具体可查看马海祥博客《响应式网页设计的基本原则布局》的相关介绍）。

7、图片和视频混用要小心

如果网站中同时存在图片和视频类的多媒体，用户和设计者应该都是能够接受的，甚至许多用户已经习惯了这样的设计。

但是要注意的是，即便是在同一个页面中，也尽量不要让图片和视频同时存在于同一个控件或者区块中，也许这样看起来很炫酷，也许一部分图片和视频能够搭配起来，但是更多的视频和图片很难在尺寸上保持一致，导致总会有一部分图片或者视频会留下空白和间隙。

最好的方案还是将两者分开展示，避免了媒体属性和尺寸上的差异与冲突，这几乎适用于任何设计元素，而图片和视频尤甚。

8、削减不必要的元素

虽然轮播图和图库控件非常好用，但是许多设计师常常会往其中添加许多垃圾的内容，最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮，这样的例子不胜枚举。

一般情况下，用户其实是熟知如何同轮播图这类控件进行交互的，除非你的设计和我们的认知有着巨大的差异，以至于必须使用其他的导航方式来引导用户。

尽量只保留用户需要的元素，把事情简单化，不要给予太多的选择，其实简单化之后的设计可以提升你的转化率（具体可查看马海祥博客《如何使简单的设计变得更为简单》的相关介绍）。

9、创建一个新的（html）元素

图片响应式化的第一步是让它自适应，移除高、宽属性然后设置max-width属性为100%。然而这并不能从根本上解决问题。主要的问题在于，那样做会不得不创建一张大尺寸高分辨率的图像，很明显这种图片并不利于移动终端设备的接收。

一种有效的解决方法是使用新的HTML语法，告知浏览器应当使用那张合适的图片；也许我们应当创建新的图像格式，那样也能解决现在的问题。

该方法已经在使用了，不过在使用方式上存在一些争议。这些争议主要来自两方面：业界的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>

其中的img元素是默认情况下显示的图片源，在其上面的两个source元素则是在特定媒体查询（media queries）条件下显示的图片——这也是开发者所喜欢的一种解决方案。

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">

以srcset的一个值为例讲解：

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

（1）、path-to-another-image.jpg 是不言自明的，当符合下述条件时就使用该图片。

（2）、依据media queries要求，设备最小尺寸为600w和200h

（3）、浏览器有以2x像素密度显示的能力

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

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

不过为今之计，还是不得不借助现有的技术实现图像响应式。这些技术的思想是提供移动端版本的图像，然后探测其是否还能处理更大的图像，如果可以则使用Javascript脚本将更大的图片替换默认的小图。

10、使用特定技术手段

上述的方法固然简单，然而面前还未正式标准。如果你想为不同的设备提供不同的合适图片，可以考虑使用下列多种方法之一，很多博文都将在一节篇幅中叙述所有这些技术。

我们可以模仿Filament Group的做法，他们针对Boston Globe网站提供响应式图片的做法如下：

（1）、Markup —默认是用img元素标签。

（2）、javascript — 决定viewport的尺寸，将存储在cookie中的相关信息传给服务器，而后再改变img标签的src属性。

（3）、Server — 获取初始图片请求，读取cookie，如果不是移动终端设备则返回1x1大小的空白占位图，然后等待JS脚本将真正的图片填充进去。

这种方式并没有想期望中那样完美，却也给出了一种解决思路，可以让其他人在上面继续发挥。

许多后续的方法其思路与此相仿，默认都是提供移动端图片，继而尝试探测设备属性后再发送合适大小的图片。

Chris Coyier 和 Christopher Schmitt创建了一张电子表格，你可以据此作为你项目中选用何种技术的参考，Chris也基于这张电子表格写了一篇技术文章回答大多数疑问——你应当使用哪种自适应图片技术？我在上面所提及的技术也许给你一些大概的印象，你不妨看看Chris的那篇文章和电子表格，以了解这些技术的细节实现。

Foresight.js是在给服务器发送请求之前用JavaScript去探测该设备是否支持高分辨率图片，同时也探测该设备所在网络的网速，依据探测结果才向服务器请求合适的图片资源。

Images redux使用空白的1x1GIF（转成base64格式），它将该图片设置为所有图片的初始背景或占位符，提供更好的用户体验，由于图片是依据CSS设置的，所以可用media queries改变响应样式。

Adaptive images项目灵感来源于Filament Group重构Boston Globe网站的工作。不过它需要诸如Apache 2, PHP 5.x, 和 GD 库等的支持，好在这些工具都比较常用。该技术首先在cookie中保存屏幕分辨率，然后决定使用哪种合适的图片尺寸。如果JavaScript和cookie被禁用了，它就检测user agent字符串。如果发现“Mobile”字符，就发送最低分辨率（定义在$resolutions里）的图片给终端，否则就默认假设你使用大设备终端并发送高分辨率图像。

HiSRC是一个jQuery插件，它能探测网络速度与分辨率，默认情况下只提供最小的图片，但是HiSRC能够探测设备更多的能力，然后提供更多不同类别的图像。

Jeremy Keith在文章里提出Conditionally Loading Content的方法，也是关于如何向不同设备提供不同图像。由于探测了viewport的宽度，Jeremy其实是提供了自定义的解决方案。Jeremy在后续的文章中也提出了Conditional CSS方法，展现了如何在前人的基础上进行改进的方案。

马海祥博客点评：

我们都希望能够搭建出让用户能够操作、愿意使用的优质网站，而优秀的图片是其中最关键的元素，绝对不能疏忽。

当你的网站还处于想框图绘制阶段的时候，最好将多种设备的展示效果都纳入考虑中来，虽然这样看起来有点麻烦，但是会让后期省心很多，从长远来看是相当值得的。

图片响应式和响应式设计其实还有很长一段路要走，我还会继续就这个话题展开叙述，下次应该主要涉及矢量图像方面的内容，由于这方面的内容和此篇文章主题关系甚微，所以就单独展开。