处理网页图片最多见的10个错误及其解决方案

(mark 码农网)
对于任何一个现代网站来讲图片都是最重要的部分。当前，据统计图片已经占到网站总带宽的60%。在处理前沿网站设计时更加明显。在一个图像丰富的社交网站上使用类图钉的布局，这个数字能高达85%。

不幸的是带宽很贵。对于高流量的网站，带宽极可能要为你的IT花费负主责，轻松超越虚拟主机和存储花费。另外，如此大量的流量须要花时间，因此在浏览你的网站时，访问者极可能要花很长时间来等待图片的载入。

咱们列举了其中的咱们每每天天会遇到的与他们如何能够（并应该）来解决的问题。

1.奢侈的在浏览器端调整图片大小

咱们经常观察到开发者所使用的一个快捷方式就是使用浏览器端的图片大小调整，而不是在服务器端就把图片的大小调整好、.

状况经常是同样的 – 网站中拥有许多特定尺寸的缩略图，而后图形的设计发生了变化. 新的图形设计要求缩略图尺寸有一点轻微的变化，而咱们的开发者，有时是随意，有时则是刻意的，就使用原来的大尺寸图片，只是针对浏览器调整一下图片的CSS高度和宽度，使图片看起来是一张缩略图.

在现代浏览器上，最终结果看上去确实是同样的，可是加载图片所耗费的带块倒是不同的. 你的网站访问这须要浪费珍贵的时间来加载一张没必要要的拉图片，而你则浪费了多余的带宽去传输他们. 对于更老的浏览器这一问题会更加的突出，由于他们调整图片尺寸的算法效率是低于平均水品的.

这一问题比你想象的还要广泛许多，它能在咱们平常访问的许多网站中找到. 例如，访问 Yahoo 的前头版页面，你会注意到“热点“新闻这里加载的全部缩略图像素都是你所看到的尺寸的两倍.

如何解决: 对于开发者 / 设计者 – 请确保你要发布的图片完美的契合须要他们的网站的尺寸. 即便是同一张图片，也要用不一样尺寸的缩略图来适配不一样的页面, 建立不一样尺寸的缩略图，而不是全都使用同一张大尺寸图片并依赖浏览器去调整它的大小，这样作是很值得的.

2.不必的高质量JPEG图片

JPEG图片确实为web带来革命性的影响. 多年以来，这一有损压缩格式让web开发者能够值耗费较任何其它竞争对手更低的带宽来加载带有高细节的高分辨率图像.

而咱们仍然不断看到开发者和图形设计师不去尝试对图像进行JPEG压缩. 事实上，在大多数网站中，你均可以在观看质量没有明显损失的前提下安全吧JPEG质量下降一个档次.

而85%的 JPEG 图像质量 彷佛很广泛，咱们看到许多网站中的质量都广泛是在95%，而一个更低的质量水品，其实能够再不损害整个体验的状况下大大解决带宽. 最终结果是更高的带宽消耗，以及网络延时给用户体验带来的影响.

上面这两张图片质量几乎同样，左边是质量 95% 的 JPEG 大小有 34KB，而右边 80% 的 JPEG 则只有 17KB, 只要一半的下载时间，且加载的时间是前者的两倍. 这样微乎其微的质量损失是值得的.

如何解决: 不要惧怕去尝试更低质量的JPEG. 对于某些网站，咱们发现使用 50% 的 JPEG 质量能够为咱们带来一个很是合理的结果. 而更高质量的 JPEG 固然老是看起来更好，但质量上的提高并不老是能值回高质量图片所带来的额外的带宽和等待时间.

3.错误的图片文件类型

当前的网站是 JPEG、PNG 以及 GIF 三分天下。网站中平均起来 JPEG 和 GIF 占大约 40%，PNG 占剩下的 20%。

关于这三种格式的好的（以及坏的）方面是它们每个在网站中都有不一样的角色。使用错误图片格式是浪费访问者的时间以及你本身的钱。

在 Cloudinary 中，咱们最多见的错误是使用PNG来投递照片。对于PNG的一般的误解是它是无损的格式，并认为它是照片最可能的替代品。一般来讲这没错，也确实不必作优化。只须要一点点PNG文件大小就能够得到质量至关的高质量JPEG图片。

左边的是PNG图片，它有110KB大小。右边是一个JPEG图片，看起来差很少，可是只有15KB大小。

怎么破：要时刻注意什么图片格式适合于内容显示。PNG应该被用于计算机生成的图片（图表、logo等），或者你须要图片中有部分透明（图片覆盖）。JPEG应该被用于显示抓取的图片。GIF应该在要显示动画时用（使用Jjax载入动画等）。要注意这些是一般的原则，PNG几乎在全部的方面都要赛过GIF。

4.发表非优化的图片

咱们知道PNG是无损格式，可是你知道它能够进一步压缩吗？发表一样精细的图片，免费的PNG压缩工具能够将PNG大小减小达到50%。一样精细的图片，而只有一半大小？当我脑残嘛。不幸的是，许多开发者和网站设计者跳过了这一步，发表了非优化图片。

怎么破：PNGCrush和OptiPNG是两个开源图片优化库，若是你尚未用过，你确实应该用用了。若是你不须要自动优化进程，你能够前往雅虎的smush。它提供手动压缩PNG服务。

上面是一个雅虎smush使用样例。它起做用了。

5.忘记脱掉图片meta数据

许多现代网站容许访问者上传照片。不管它是用户的轮廓图仍是近期旅行的共享照片，这些都带有现代相机的原始信息，极可能引入许多meta信息到照片中。

meta数据在EXIF/IPTC格式中，包含大量的相机和照片信息，包括相机型号、日期和时间信息、光圈、快门速度、焦长、测光模式、ISO、全球定位和许多其余信息片断。

大多数状况下，脱掉meta信息都是一个很棒的主意。对于隐私保护和减小文件尺寸来讲都很好。不幸的是，咱们不多看到开发者花时间清除meta信息，这增长了带宽同时也损害了用户的浏览体验。

怎么破：确保你清除了你的图片以及用户上传的照片中的meta信息。若是这些信息是必要的，确保它的可用范围，而不是做为你的图片的一部分。提示：即便图片的meta信息对你的网站来讲不是必须的，可是有一个信息片断，那就是图片的原始摄影方向，对于正确显示照片来讲是很关键的。当清除Exif信息时，要确保你在Exif信息基础上将图片旋转到了正确的方向。

6.直接从服务器发表图片

一旦你的网站内容就位了，你的下一个目标就是确保你的全部网站图片尽量快的分发给你的访问者。

在Cloudinary中，一个最多见的网站问题是，开发者在他们本身的服务器中存储图片，并且一般和他们的网站在同一机器上。这里发生了两件事：第一，你的服务器忙着发表图片而不是专一于发表你的独一无二的网站内容；第二，你错过了最惊人的图像分发解决方案之一——内容分发网络（Content Delivery Networks）。

如何解决: 内容分发网络是很容易使用的服务，它管理者你网站的图片，比你网站自身管理这些图片的发布要快不少. CDN 依赖于遍及于全世界的超大数量的服务器，或者说 “边界”. 当访问者浏览你的网站是，它们会自动路由到最近的边界文职, 这样图片就能以及尽量快的速度发布，大幅减小延迟. CDN依据所需的带宽收费，稍微比主机服务商的带框比较贵, 不过现在的CDN价格已经实惠到至关值得一用.

有许多CDN服务提供商可供选择. 只要注册就能开始享受其好处. Amazon 的 CloudFront 算是一个好的开始.

7.静态图标单个分开传送

除了图片和缩略图以外, 网站还有图标和辅助图像(auxiliary image). Logo, 箭头, 星形, 符号, 标志, 这些都能提升网站的用户体验. 组成按钮, 阴影, 边框的图片片断, 以及其余图片片断, 可让你根据美工的要求, 动态建立各类部件(widget).

一个网站的小图片多到你没法相信. 拿 Google 的搜索结果页面来讲. 你要是常常 Google, 可能对它的简洁界面还有印象。 几乎看不到图标, 对吧? 大错特错。Google 搜索结果页面的小图标 80 个都不止 (!)

开发者会犯的一个广泛错误就是把这些小图标原样嵌入到他们的网站中。浏览器须要花在下载如此多图片的时间是至关多的。下载一张图片时，咱们做为访问者须要忍受网络延迟之苦，而由于通常的浏览器平均只支持同时下载不超过6张图片, 因此延时还要乘以图片的下载批次。你的访问者将须要等待他们的浏览器完成对全部这些图片的下载，而你的web服务器可能会由于要应对如此多的下载请求而变得没法响应。你的访问者甚至可能会放弃等待，转而继续他们平常的浏览活动。

如何修复: 一个简单的解决方案是使用CSS Sprite（CSS精灵）， 一个单一的图像包含你全部的小图标。你的网页从你服务器上的这个单一图片上被下载和修改，而且页面的HTML使用了可替代的CSS 类名去指向大图片内部的小图片。

如今，代替80张图片，谷歌的访问者下载的仅仅是一个单一的图像。他们的浏览器将会快速下载并缓存这些从谷歌服务器上的单一图片，而且全部的图片将会当即呈现。

8.在可使用CSS3的时候使用图片

当咱们把一个网站的设计转换成HTML元素的时候，许多开发者仍然将按钮设计成图片式的。由于旧的浏览器不支持使用CSS来实现阴影，圆弧角，和特殊字体，开发者在过去习惯了使用小图片来实现上述的特性，亦即基于图片的方案。

不幸的是，这种解决方案须要大量的图片，最终损害了浏览者的体验，而且也很难管理，增长了开发所需的时间和成本（想一想如何更改一个图片中嵌入的文字）。

现代浏览器支持使用简单的CSS来实现阴影，圆角矩形和特殊字体。然而，咱们仍然看到许多网站依旧在使用基于图片的按钮。这是一类常见的错误。例如，看着这部分CNN的按钮——

这一小技巧是一张可以很容易的使用简单的CSS指令来实现的 61KB 图片, 提高加载时间和用户体验的同时下降带宽消耗.

如何解决: 不管什么时候确保尽量使用CSS3. 若是你的图形设计师能提供基于CSS3的元素可供使用. 若是你想要支持老版本的IE，你也应该确保你的界面能优雅的降级到至少能保证设计的功能可用(尽管不能完美的显示出原来的效果), 或者选择一种像CSS3 PIE这样的CSS3仿真方案.

9.错误的图片缓存设置

通常你的网站图片文化不多改变。HTTP缓存指令可让访问者的浏览器将这些图片缓存起来，任何其余的服务均可以这么干（CDN、proxies等等）。一旦图片被缓存，在从此访问你的网站的时候将会使用缓存而不是一遍又一遍的下载。

正确的缓存设置经过减小页面载入时间来提升用户体验，同时也减小你的网站带宽而减小花费。

不幸的是，我见到许多案例都没有正确的利用好缓存。最多见的是，对于更新图片时漫长的缓存设置的担忧，由于他们认为网站访问者会看到旧的图片而不是新的图片。

这个看似棘手的状况能够经过添加一个指纹（MD五、时间戳等）到图像URL来轻松地避免。经过添加一个指纹到图像的URL你能够知道图像什么时候变化了，已经它的URL。当URL变化时，浏览器会强制从新读取图像。目前的Web开发平台可以自动给全部的图片添加这样一个指纹，从源头上解决这个问题。

如何解决：咱们强烈建议对全站的图片积极使用缓存，若是能够的话设置图片的’Expires’HTTP头。除了图像URL的指纹以外，这样能够当即提高你网站的性能。

10.在全部的输送介质中使用相同的图像尺寸

你的网站正被许多不一样的设备浏览。近年来，随着手机和平板电脑用户量的崛起，看一下你网站的流量分析，其显示了来自这里设备访客量的大幅上升。

网站是否有移动访客，或者你是否打算为你的网站内容提供一个移动版本，你还剩一个决定——如何发送图像，移动设备上的相同图像但在台式机分辨率就过低了。

咱们常看到开发者们图省事，即为不一样备的分辨率提供相同的图像，在客户端缩放图像。尽管图像看起来效果很好，但用户在加载大尺寸图像上浪费了时间，你也要支付额外的带宽费用。这对3G用户和漫游用户是特别不公平，他们须要支付大量高分辨率图片的额外费用。

相对的状况是使用最低的标准，在全部设备中使用很是低分辨率的图像，这使得你的网站在更新更高分辨率的设备上表现地很糟。

如何解决：解决的方式很简单-经过user-agent或客户端的Javascript代码鉴别访客的移动设备和分辨率。获取了准确的分辨率后，在服务器检索的最适合的图像。这固然须要你提供一套原始图像的缩略图。已经有一些不错的JavaScript包将这一过程自动化。

总结

本文中提到的这些最多见的网站图片处理问题, 其实也是咱们在 Cloudinary 上最常碰到的问题. 并非说问题只有这么多, 咱们只是尽可能把影响效率较大的问题提出来, 并给出通俗的解释, 好让你以此为研究起点, 找到合适的解决方案.

若是你没据说过 Cloudinary , 那我能够很高兴的告诉你, Cloudinary 已经把上面提到的, 没提到的问题解决了. 每张上传到 Cloudinary 的图片均可以动态生成任意尺寸, 格式, 质量的缩略图. 所以你能够在各类设置中找到适合本身网站, 知足客户指望的配置. Cloudinary 提供简单易用, 可管理性强的 Sprite . 全部图片都自动剥离(stripped), 按尺寸优化, 并使用缓存配置合理的高速 CDN 传送, 书中提到的最佳实践几乎都用上了. 最后值得一提的是, Cloudinary 的云动态图片尺寸调整能力完美适应相应式设计.