处理网页图片最常见的10个错误及解决方案(2)

时间:2014-12-25  来源:酷遨网络

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等等)。一旦图片被缓存,在今后访问你的网站的时候将会使用缓存而不是一遍又一遍的下载。

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

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

这个看似棘手的情况可以通过添加一个指纹(MD5、时间戳等)到图像URL来轻松地避免。通过添加一个指纹到图像的URL你可以知道图像何时变化了,已经它的URL。当URL变化时,浏览器会强制重新读取图像。目前的Web开发平台能够自动给所有的图片添加这样一个指纹,从源头上解决这个问题。

如何解决:我们强烈建议对全站的图片积极使用缓存,如果可以的话设置图片的'Expires'HTTP头。除了图像URL的指纹之外,这样可以立即提升你网站的性能。

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

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

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

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

相对的情况是使用最低的标准,在所有设备中使用非常低分辨率的图像,这使得你的网站在更新更高分辨率的设备上表现地很糟。

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

总结

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

 

Copyright Right © 2009-2023 kuaonet.com Powered By 上海网站建设 酷遨网络 Inc