除了高清应景,图片与用户体验的关系还深着呢

1

随着图片和视频在网站和APP上所占比重的持续提高,页面加载时间也变得越来越长了,从用户体验的角度来说,这是个很明显的减分项,值得所有公司关注。财政时报(The Fiscal Times)的一篇文章曾援引互联网数据测量公司HTTP Archive的报告指出,现在的网页平均大小已经达到2.1 MB,而在几年前还只是1.5 MB。这种增长的主要原因之一便是内容的增加,比如视频和炫丽的图片,这些本来是为了给网站带来更多的流量而设计的。

2

从上图可以看到,图片占了近63%的比重(2087 KB中占了1312 KB),排名第二的是视频,占比10%(208 KB)。

网站上的图片可不是好不好看这么简单的,公司不仅需要为其支付昂贵的带宽费,还可能增加网站访问者等待网页加载的时间。每一次的加载等待都会降低网站的整体转化率,影响最终的收益。

如果网站存在加载性能的问题,除了代码问题,别一个可能的问题就是图片了。本文我们就来说说如何通过优化图片来提升用户访问体验,降低带宽与存储成本。

来看看图像管理过程中最常见的那些错误,以及如何避免他们。

没使用更有效、更现代的图像格式

尽管谷歌推出了旨在加快图片加载速度的WebP图像格式,微软也有比JPEG更好的JPEG-XR,与JPEG文件同等大小的情况下,图像质量是后者的两倍,同等质量下只需前者一半的体积。但开发人员好像对此并不感冒。原因可能是平时缺乏对这些细节的关注,或者难以在不同的浏览器和设备上实现适配,不得不放弃。于是,我们只好继续用着JPG和PNG这些常用格式,而不是利用更现代的图像格式来优化自己的网站。

解决方式:将图像转换成WebP或JPEG-XR这些现代图像格式吧,同时通过特定浏览器检测每个图像的打开效率,更甚者可以为不同浏览器提供不同版本的图像格式,在图像的视觉质量与文件大小之间取得平衡。

3
16.9 kb JPG
11
6.9 kb WebP

使用GIF格式来播放短视频
现在几乎所有的新闻网站、媒体网站和社交分享网站都会有大量的GIF图像,使用起来非常方便,效果也很好,但它的问题在于文件太大了,特别是在移动设备上,会导致高额的带宽成本和更高的CPU利用率。

解决方式:如果是面向Chrome浏览器用户,可以使用动态WebP格式,另一种方法是将GIF文件进行有损压缩。但这两个都不是太好的选择。

所以可以把GIF文件转换成MP4或者WebM视频格式,嵌入剪辑标签或HTML5视频标签而不是图像标签。在现在绝大多数的浏览器中都不会有什么问题,网站看起来完全相同但加载更快。通过采取这些步骤,你将能够大幅减少文件大小,减少页面加载时间,提高用户体验和降低带宽成本。

12
6.3 mb GIF
12
311 kb MP4

注:两边的动图均为压缩gif,因为微信有大小及格式的限制,此为模拟效果

为所有用户提供2X (Retina屏)图像

如今的移动设备和笔记本电脑都是高像素比(DPR)的。因为想让你的网站在所有设备上看起来都有很好的显示效果,所以你可能会全部使用双分辨率的图像,许多开发人员也倾向于为所有用户提供同样大小的图片。但是,对于非Retina用户来说,他们加载的是高分辨率的图像,却只能享受一半的分辨率。这无疑延长了页面加载时间,也增加了不必要的带宽成本。

解决方式:通过检测用户设备,提供不同的图像版本给用户。

6
DPR 1.0 – 100×100 – 4.6 kb
6
DPR 2.0 – 200×200 – 12.1 kb

奢侈的浏览器端尺寸调整功能
很多走捷径的开发人员喜欢使用浏览器端提供的图像缩放功能而不是在服务器端调整图片尺寸。在如今的浏览器中这两者最终的显示效果是完全相同的,你根本看不出差别,但所费的流量就不是那么回事儿了。网站访问者浪费宝贵的时间从服务端下载一个大图,在浏览器上看起来却只有那么一点。老版浏览器更不用说了。

解决方式:确保图片的尺寸完全符合网站需要的大小。即使是相同的图像也应该被制成不同大小的缩略图以适应不同的页面,千万不要统一用一个大图并依赖浏览器来调整大小。7

没有必要的高质量jpeg文件

jpeg真正彻底地改变了网络。长久以来,这种有损压缩格式让web开发人员能够以更小的带宽呈现更高分辨率的图像。但是许多开发人员和设计师并没有去对JPEG进行压缩实验,其实是可以做到在不明显损失图像质量的前提下显著减少文件大小的。

当用85%质量的JPEG图像看上去完全合格的时候,我们就没必要用95%质量的图像,那样不会带来什么体验的提升,反而会消耗带宽和削弱访客体验。

解决方式:不要害怕使用低质量的JPEG进行实验。对某些网站来说,使用50%质量的JPEG更具性价比。虽然更高质量的jpeg更好看,但质量的改善并不总是总能带来额外的收益。

8
95% JPEG – 34 kb
13.webp
80% JPEG – 17 kb

错误的图像文件类型

JPEG,PNG和GIF是现在最常见的图像格式,但是每一个都有不同的角色,如果你用错了,浪费的是用户的时间和你的钱。

一个常见的错误是使用PNG格式来保存照片。我们都认为,PNG嘛,无损压缩格式,最能保留照片的细节和质量了吧,话虽没错,但很多时候没必要。相同质量的JPEG比PNG文件小很多。

解决方式:永远记住什么图像格式适用于什么内容。PNG主要用于计算机生成图像(图表、商标等)或当你需要透明图像的时候。

9
PNG – 110 kb
15.webp
JPEG – 15 kb


提供未经优化的图像

PNG是一种无损压缩格式,它可以用免费的压缩工具压缩50%但质量仍然不会降低多少。不幸的是,许多开发人员和web设计人员跳过这一步,不去优化图像。

解决方式:PNGCrush和OptiPNG是两个开源图像优化工具,如果你不使用这些,也有其他的一些工具,比如雅虎的smush.it网站。10

忘记剥离图像元数据

现在很多网站都允许用户上传照片。比如旅行的照片,这些照片都是用现代相机照的,里面带着大量的元数据。在大多数情况下,最好是把这些元数据剥离出来,但开发人员很少花时间去这么做,导致图像需要更多的带宽和更长的加载时间。

解决方式:剥离用户上传的图片的元数据,如果需要这些元数据,你可以把它们放在有用的地方,但不必作为图像的一部分。

好了!

虽然不全面,但本文概述了最常见的几个问题,可以很容易地搞定,避免消耗过多的带宽,也为网站访问者提供一个更好的体验。

2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部