网站用户体验：图片格式的选择与用户体验

这是我10年的时候写的一篇博客，偶尔翻出来，觉得挺好玩的。貌似当时是因为莫名其妙的去看了jpeg的压缩算法，但是看的云里雾里。进而想到为啥要出这么多图片的格式呢?他们肯定各有所长。而在软件开发的时候B/S项目用什么格式、C/S项目用什么格式、logo图片用什么格式、背景图片用什么格式等等。所以写了一篇文字。今天拿出来，重新编辑一下，不知道各位是怎么想的，老肥非常恳切的希望与您交流。

要写这个东西，我们先设定一个范围，我们对比就拿常见的gif、png、jpeg三种格式来说说。

首先我们看一下三种格式的对比。

以上是对于三种常见格式的对比，其实还有bmp等格式，但是对于我们在做设计的时候这种格式其实应用不是特别多，所以暂就不怎么讲了，不过坦率的说这个格式还是不错的，因为这玩意它不压缩文件，但是比同样的一张图其他格式的大很多，所以在页面上其实用的比较少的。而jpeg格式还有一种jpg的写法，很多人都以为这是一回事，不过如果从单纯使用角度也算是一回事，实际上jpg是使用jpeg文件交换格式存储的编码图像文件扩展名。而jpeg是一种压缩标准。

那么明白了这三种格式的定义、优点、缺点，我们什么时候该使用这三种格式的图片呢?

老肥建议如果你的图片色彩较为单一、只是由色块或者文字组成的时候可以考虑使用gif，因为这样可以减少很大的体积。但是反过来说png可以说是gif格式的替代品，而且着实表现很优秀。同样的表现，png的更小。所以这种情况下你还是能用png就别用gif了。有人说了，你说这么多废话就直接说让我们用png好了。但是要考虑一点，如果你设计的产品面对的用户他们通常采用的浏览器比较老套或者一些旧的移动设备，比如非智能机等。或者说图像质量较差的机器。那你还是得用gif，因为这些老物件不支持png。gif最多不会多于256种颜色。如果你的图片有很多过渡色、渐变色等依然得选择png。

那jpeg和png对比呢?

jpeg适合储存有很多颜色的图片，因为通过压缩后可以在网络上较快地加载。那么图片要是含有图形或者文字的话可以考虑用png，反之亦然。否则jpg压缩以后就会变得比较模糊。

对于jpeg其实咱得单独拿出来说说，有些同学可能知道可能不知道，这玩意其实有两种保存方式，一种是标准型，用鸟语讲就是Baseline JPEG，还有一种是渐进型也就是Progressive JPEG。这是一对双胞胎，什么都一样，但是纵使是我们生活中的双胞胎，很多都一样也必然有不一样的地方，这哥俩不一样的地方就是他~们~的~显~示~方~式~不~同。

标准型的jpeg文件存储方式是按照从上到下的扫描方式存储的。每一行顺序的保存在文件中。打开这个文件的时候，就按照存储时候的顺序从上到下一行一行的显示。直到所有的都打开。所以如果你的文件很大或者用户网络一般、去想象一下效果吧。其实这种显示方式没啥太大的有点。所以推荐后者。

而渐进型的是多次扫描。在你打开的时候会先显示整个图片的轮廓。然后多次扫描，图片主见清晰。这个好处无需多言，同时用户在使用的时候可以根据轮廓大致知道这个图片是什么。如果你的图片很大，可以考虑用这种。

对比两种方式，看看后者，这样你的用户体验不就提升很多了么?其实只是你保存的时候一个小动作是不是?但是对于用户来讲，那个体验是什么?前者：什么破玩意啊，半天出不来，要不就是一条条的，关掉关掉关掉!后者：哎，出来个框了，等一下，越来越清晰，激动啊!而这个，是不是也和我们在研究用户体验时，跟进度条的道理差不多呢?

当然如果你的图片是JPEG的标准型的话，你想转化成渐进型，可以这样做：在ps中打开图片后，

存储为web所用格式】，然后勾选【连续】就是渐进型了。

写在最后，其实这篇文章无论你是设计师还是产品经理我觉得都可以看一下，虽然是从使用的维度上来说设计师应用更多一些。但是我们是透过现象看实质。因为你的图片如何使用会对你的产品的用户体验产生很大的影响。这个无需多言，我相信不同产品的设计师肯定都会有自己的感受。所以我还是给这篇文章归于用户体验这个范畴的。作为产品经理的我们，这一点基本的知识应该去明确。老肥坚定的认为，只有心中具有完美主义倾向的产品经理才有可能设计出真正好的产品，那种经常觉得“凑合吧，可以了”，这样的产品经理做不出什么好东西，我也不想做，也不喜欢。