现代 CSS

响应式设计：响应图像

作者：Spy 日期：2014-03-31 点击：3187
Responsive

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

本文由Spy根据Annarita Tranfici的系列教程《Understanding Responsive Web Design》之一《Understanding Responsive Web Design: Responsive Imagery》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-images。

——作者：Annarita Tranfici

——译者：Spy

这是《Understanding Responsive Web Design》系列教程中的第五篇。本文中，我将展示当一个web开发人员在创建响应式网站时都会遇到的典型问题：对图像的处理。或许你已知道，移动终端开发者面临的挑战是多不胜数的，使得图像适应多种屏幕尺寸无疑是最大的困难之一。现在有三种方案可供开发人员去选择开发响应式图像：与浏览器‘对抗’、放弃它、或者依赖服务器。接下来，我们去了解每种方案的优点与缺点。

与浏览器对抗

大部分前端开发人员会选择第一种：与浏览器对抗。这又代表什么意思呢？意思就是尽你最大的努力在浏览器加载“错的”图像（“默认的”或者原本显示在电脑上的图像版本）之前就提供“对的”图像（图像拥有确切的尺寸显示在移动终端的浏览器中）。但这种方案会在实践中难度不断增大，因为用户尝试尽可能快地加载图片。

放弃

有时候，最简单最合适的方案只有一种选择：设置默认值。一般来说，这个方案使得在小的屏幕 也会加载默认的图片；其次，也可以在大的屏幕上加载更大的图片。虽然这种方案是简单、直观，但是不值得推荐的。因为在刚才说的第二种情况下，两条请求都相应到浏览器，但是只有一条是有用的。

依赖服务器

服务于用户的服务器是第三种方案的主角，一种服务器端编程语言和某些基本形式的检测可以决定加载哪些图像。所有的逻辑在浏览器加载成功和解析HTML代码之前就会被执行。不幸的是，这种方案本身有缺陷：面对不断增长的移动终端设备和屏幕尺寸，维护操作就会变得非常复杂，并需要一定的维护成本。

为了让你更好地理解这是一种怎样的技术和如何使用，下面我将使用PHP的例子，但别担心，这例子不是想说明你必须使用PHP才能创建响应式图像。尽管你没有学习过PHP，你还是会理解这个例子。假设你动态地创建一个页面，使用如下代码在页面插入<img>标签元素：

echo '<img src="heavy-image.png" />';

你可能已经知道，移动终端连接到网络的上网速度远不如电脑。因此，为了加快页面的渲染速度，插入更小版本的图片会更加有利...例如iPhone手机，你可以服务器端在请求检查是否iPhone手机，若是，则发送更小的图片。演示代码如下：

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') === false) {
  // Not an iPhone
  echo '<img src="heavy-image.png" />;
}
else {
  // An iPhone
  echo '<img src="light-image.png" />;
}

从上面的代码可以看到，这种方法是很容易实现的，但是，这种方法是不可靠的，原因是user-agent的本身信息不是100%可靠的。如果，这种方法失效了，可能你还会面临其他问题。

有一种方案比其他的都要好

很明显，每种方案都自己独特的优势及局限性，单一的方案不能成为你所有的移动项目的最佳选择。尽管这样，开发人员还是可以使用一些额外的技术来创建响应式图像。

Sencha.io Src

这种方案在操作起来是简单且迅速的。它是由James Pearce开发，应用于你选择的图片，可以适应你额外的需要。它的名字是Sencha.io Src，使用方法如下：

<img src="http://src.sencha.io/http://mysite.com/images/my-image.jpg" />

这种技术还可以把图片缓存在本地，这样子当页面下次加载时，保证图片不会再加载了。

自适应图像

Matt Wilcox 则提出了类似的解决方案。内容包括，首先确定屏幕的大小，然后创建(缓存)一张可缩放的正确图像尺寸版本。这是一种合适可使现有的网站实现响应式图片的方案。下载源码后(在adaptive-images.com可以找到)，为了使该方案操作和正常运行，需要遵循如下三个简单的步骤:

  1. 把.htaccess和adaptive-images.php这个文件放在根目录下；
  2. 创建一个可写入的缓存文件夹；

  3. 在<head>里添加如下代码行：

    <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

这行代码的作用就是获取到屏幕宽高的最大值并使用cookie存储起来。可以adaptive-images.php文件中配置多个选项，主要目的是设置变量resolutions（$resolutions）。

$resolutions = array (800, 480, 320);

这些resolutions是根据屏幕分辨率(像素)的宽度来衡量的图像“断点”。这个工具会小的屏幕中输出320px，或者更小、适合移动终端的图像。如果屏幕超过320像素，值会重新赋值480，就像不断地向数组中获取下一个元素值。

一旦创建，这些图像就会被存储在缓存文件中（你可以修改文件名），之后就不再需要重新生成它们。

另外，我想强调的是对自适应图像讨论的关键是它们的尺寸。这是一个很重要的因素，但是我们经常忘记它并不是唯一的一个因素。例如，在更小的屏幕中调整图像大小会损失图片质量和影响图像的识别。在这些情况下，可能需要修改图像。即使一些多余边界超出边缘，一些简单的剪裁可以帮助图像保留它在一个更小的屏幕中的影响和意义。

总结

在本文中，我从响应式设计的角度介绍了三种处理图像的方案。第一种就是与浏览器对抗——尽最大的努力给浏览器最佳的图像去下载。第二种就是选择第三方插件，例如Sencha.io就是通过请求字符串来检查并决定返回正确的图像。第三种就是自适应图像——在这种情况下，开发者需要确定屏幕的尺寸，然后图片就会自适应。

在上面讨论的三种方案中，自适应图像可以是最好的解决方案，原因是它不需要依赖其他的网站或者链接。在下一篇文章中，我们将研究开发人员可以用来管理一个响应式网站上的所有图像的其他方案。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微博。

上一篇下一篇

如需转载，烦请注明出处：

英文原文：http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-images/

中文译文：http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-images.html

Wmns Air Jordan 1 Retro High OG 'Twist'
返回顶部