【网页设计图片】响应式网页设计中的图像处理

响应式网页设计是一种流行的网页开发思想。它利用灵活的网格系统，使得网页的显示模式可以根据访问设备的屏幕大小自适应。据估计，到2015年，移动用户数量将从8亿增长到19亿，这意味着我们为桌面浏览器设计的网页将在他们的手机和平板电脑上呈现非常糟糕的体验。

然而，随着实际应用的变化，响应式网页设计会出现一系列复杂的问题。本文的其余部分将详细说明如何在响应式网页中放置和处理多媒体元素，如图片和视频。终目标是帮助你建立一个可靠的网站，使这些元素能够在各种手持设备上无缝加载和运行，并改善用户体验。

我们来谈谈如何处理响应性图片。在响应式网页设计中，图像处理的问题与传统的导航栏设计有着或多或少的相似性。随着新型移动设备的普及，屏幕像素密度的提高使得网页的任何缺陷都非常明显。因此，图像处理的核心问题是如何保证网站（尤其是图像）的各个方面尽可能的灵活，并且在高分辨率屏幕下，每个像素都不会模糊。

首先，当网页响应设备时，它不存储特定的图像发布标准。对于这个问题，你有很多选择。然而，此时出现的问题是：在3G模式下，如何在移动设备上处理视网膜屏幕下的图像。在网络速度差的情况下，图片的大小是否应该自动优化（减少）？这就是所谓的“艺术设计”问题。网站提供的图片可以在不同屏幕的设备上显示，这远远不够。小屏幕设备的用户可能根本看不到图片的细节。然后，在“正常显示”的基础上，将一个版本的小屏幕分开裁剪，让用户看到细节。

有人提出，开发人员应提前将所有大小、比例不同的图片上传到网站页面，并设置CSS和媒体查询功能，将过大或过小的图片隐藏起来，以便浏览器能够准确下载与像素匹配的图片。但实际情况并非如此。在浏览器加载CSS类之前，它已经下载了所有相关图片，这使得网页更加臃肿，加载时间更长。

在我们继续之前，先说清楚：没有办法让每个屏幕都显示图片。但我们可以不断探索更可行的解决方案，尽可能提高精度。以下是我们为响应式网页的图像问题找到的可能解决方案：

自举

如果你开始设计一个快速响应的网站，但不知道如何操作它，你应该试试bootstrap的CSS框架。使用bootstrap，您可以轻松实现您的目标。此外，bootstrap提供的样式和在基本HTML元素上扩展的类将使图像响应更易于实现。

焦点

Focalpoint是一个帮助您“植入”图像和控制焦点的框架。这项技术只使用CSS，开发人员只需要将带有目标图像的类添加到相应的标记中。

CSSSprites公司

如果加载时间是您需要考虑的几个因素（它应该是），那么您可以选择CSS精灵，特别是当您需要适应带有视网膜屏幕的设备时。当您将网页调整为高分辨率屏幕（如苹果视网膜屏幕）时，通常会添加更大的图像资源，并使用CSS中的mediaquery来识别和调整大小。但是这样，文件的数量和大小会急剧增加，代码中CSS选择器的数量会增加，更多的文件会被引用。

如果使用CSS精灵，则可以改进此功能。您可以将网页所需的所有图片包含在大图片中，供选择器参考。只需一个HTTP请求，就可以在本地获得多个图片材料。标签引用的图片材料不适合CSS Sprite处理，但是在页眉和页脚中使用的图标材料和按钮样式将由CSS Sprite支持，这很容易使用

请记住，处理图像的所有这些可能性都有其局限性。例如，自适应图片方案需要Apache和PHP的结合，因此有利于内容管理，但不太可能完全适合网站平台或主机服务器。另外，自适应图像依赖于服务器的需求，通过获取图像的大小。Htaccess文件，这意味着获取的图像不在其自己的服务器上，脚本位于。Htaccess是无能为力的。此外，脚本无法检测带宽。如果你使用3G iPad air访问这样的网站，加载速度可能会很糟糕。