处理网页图片最常见的10个错误及其解决方案 已翻译 100%

0595 投递于 2014/12/19 15:41 (共 23 段, 翻译完成于 12-25)
阅读 10675
收藏 363
26
加载中

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

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

开源中国七里香
开源中国七里香
翻译于 2014/12/21 16:02
1

由于加载时间过长,纵观从一端与访客遗弃的IT成本,你可能想好好看看如何在线管理你的图片。当每一秒传递减少你的网站的整体转换并最终营收-它使得你想尽可能优化你的图片和图片传输而变得非常有意义.

使用Cloudinary,我们想在网站与手机应用程序上的一切相关的图片提供一个结论性的解决方案。通过存贮,你从上传覆盖,操纵,优化并交付。作为一个开发者,你不需要再担心图像相关的R&D和IT.

Cloudinary 解决了大量的共同的图片相关的问题。对于尚未使用Cloudinary的开发者来说,我们认为它很可能有帮助,如果我们列举了其中的我们往往每天会遇到的与他们如何可以(并应该)来解决的问题。

crossmix
crossmix
翻译于 2014/12/22 10:05
1

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

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

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

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

LeoXu
LeoXu
翻译于 2014/12/21 20:31
1

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

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

LeoXu
LeoXu
翻译于 2014/12/21 20:37
1

2. 没必要的高质量JPEG图片

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

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

85%的 JPEG 图像质量 似乎很普遍,我们看到许多网站中的质量都普遍是在95%,而一个更低的质量水品,其实可以再不损害整个体验的情况下大大解决带宽. 最终结果是更高的带宽消耗,以及网络延时给用户体验带来的影响.    

LeoXu
LeoXu
翻译于 2014/12/21 20:58
2

     

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

如何解决: 不要害怕去尝试更低质量的JPEG. 对于某些网站,我们发现使用 50% 的 JPEG 质量可以为我们带来一个非常合理的结果. 而更高质量的 JPEG 当然总是看起来更好,但质量上的提升并不总是能值回高质量图片所带来的额外的带宽和等待时间.

LeoXu
LeoXu
翻译于 2014/12/21 21:06
1

3.错误的图片文件类型

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

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

在 Cloudinary 中,我们最常见的错误是使用PNG来投递照片。对于PNG的通常的误解是它是无损的格式,并认为它是照片最可能的替代品。通常来说这没错,也确实没必要做优化。只需要一点点PNG文件大小就可以获得质量相当的高质量JPEG图片。

开源中国七里香
开源中国七里香
翻译于 2014/12/22 20:30
1

     

左边的是PNG图片,它有110KB大小。右边是一个JPEG图片,看起来差不多,但是只有15KB大小。

怎么破:要时刻注意什么图片格式适合于内容显示。PNG应该被用于计算机生成的图片(图表、logo等),或者你需要图片中有部分透明(图片覆盖)。JPEG应该被用于显示抓取的图片。GIF应该在要显示动画时用(使用Jjax载入动画等)。要注意这些是通常的原则,PNG几乎在所有的方面都要胜过GIF。

开源中国七里香
开源中国七里香
翻译于 2014/12/22 20:44
1

4.发表非优化的图片

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

怎么破:PNGCrushOptiPNG是两个开源图片优化库,如果你还没有用过,你确实应该用用了。如果你不需要自动优化进程,你可以前往雅虎的smush。它提供手动压缩PNG服务。

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

开源中国七里香
开源中国七里香
翻译于 2014/12/22 20:58
1

5.忘记脱掉图片meta数据

许多现代网站允许访问者上传照片。无论它是用户的轮廓图还是近期旅行的共享照片,这些都带有现代相机的原始信息,很可能引入许多meta信息到照片中。

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

开源中国七里香
开源中国七里香
翻译于 2014/12/22 21:09
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(40)

巴拉巴拉啦啦
巴拉巴拉啦啦

引用来自“高阳路人”的评论

有几处错别字,麻烦校对一下
处女座?
南山大山
南山大山
不错,7979
竖着走的螃蟹
竖着走的螃蟹
好文,赞
许雷神
许雷神
怎么在grid中展示图片呢?
fokuaguo
fokuaguo
错别字较多,第一部分第六行在现代浏览器上,最终结果看上去确实是一样的,但是加载图片所耗费的$$带块$$##带宽##却是不一样的
桔子
桔子
缓存和压缩比较管用
做个坏人
做个坏人

引用来自“侯会”的评论

为什么看着看着会突然跳转到首页呢

引用来自“做个坏人”的评论

老是出现,有BUG了
不停的出现
卖爷爷的老红薯
卖爷爷的老红薯
文章已收藏,并且转载到www.yuandekai.cn。
大寂寞
大寂寞
这文章说得不错,大部分都很有用。
对于第4点,我有个疑问,对于 ps 另存为web或设备使用的格式 之后的图片倒底还有没有必要再使用yahoo 或者 优化库做优化。。

我自个作了一个测试, ps 的web格式的png再去做优化400K的图片仅优化了0.61k

ps:这里的400k图片在普通png格式下有800k左右的大小
Feng_Yu
Feng_Yu
这个看似棘手的情况可以通过添加一个指纹(MD5、时间戳等)到图像URL来轻松地避免。<b>通过添加一个指纹到图像的URL你可以知道图像何时变化了,已经它的URL。</b>当URL变化时,浏览器会强制重新读取图像。目前的Web开发平台能够自动给所有的图片添加这样一个指纹,从源头上解决这个问题。
==============================
已经它的URL???这是怎么翻译的?
返回顶部
顶部