图片都处理不好，谈何留住客户？Methods to Handle Picture Problem【第1003期】

When customers click into our store page, the first point to catch their sight is your“store design”. Because the appearance and function can leave them to have a look, the products will attract their attention. So if the web page is not smooth to browse, what else can you offer to customers?

为什么要关注网站性能？

Why should we attach importance to web performance?

据统计，在一般情况下，图片的大小往往会占到网页的一半以上；但在旺铺中图片占到75%以上！

According to statistics, in general, the size of picture tends to cover over half of web page; but in some winports, pictures account for 75%.

大量未经优化的图片会严重拖累网站的加载速度，试想如果到访页面后图片还在迟迟加载中势必会导致买家的流失，所以图片优化是基础。

A lot of undressed pictures will severely influence the loading rate of web. Try to imagine that if pictures keep loading when customers visit your web, it will be bound to lose your customers, so pictures processing is essential.

1、JPEG (JPG)：适合平滑的颜色过渡的渐变的图片，也就是照片和一些有平滑色彩过度的图片

JPEG (JPG): it suits for glossy, gradually varied pictures,that is the pictures and some pictures with glossy vision and gradually varied colors.

2、PNG：适合大区域颜色相同的图形，通常是素材图形

PNG: it suits for the pictures with large part of the same color, usually the textures and pictures. 

其中PNG分为png8和png24两种，png8可展示256种颜色，png24可展示1600万色，但PNG24的文件尺寸会大一倍，所以在不会显著影响画面效果的前提下应尽量使用PNG8。

There are two kinds of PNG, including png8 and png24 while png8 can show 256 kinds of colors and png24 can show 16 millions colors, but the documental size of png24 is bigger, so you should choose png8 first if there is nothing to influence the picture effect evidently.

1、http://kraken.io/

2、http://www.punypng.com/

Kraken支持多种图片格式和批量操作，允许从本地上传(UPLOADER)和粘贴图片URL (URL PASTER) 建议优先使用LOSSY模式进行优化，会达到图片质量和图片大小的最佳平衡：

Kraken can support many picture formation and a batch of operation, and it supports the local upload and URL paste. But we recommend to use LOSSY mode to perfect the pictures first, because it can keep a best balance between the quality and size of pictures.

可以看到，优化前是796K，优化后是176K，并且图片质量没有明显变化。

We can see before processing the documental size is 796k, but after that, it is 176k, and there is no difference of picture quality.

注：假如用LOSSY模式获得的图片效果有明显下降后，可以使用LOSSLESS无损模式进行优化，图片质量不会有任何损失，但图片尺寸会相对上一种模式增加不少。

Note: if the pictures effect decreased significantly after using the LOSSY mode, you can use LOSSLESS mode to optimize, and it won’t influence the picture quality, but the size will become smaller.

如果访问上面的在线工具速度慢的话，还可以用下面的这种离线工具

If the rate is too low with the above tools, you can use the following offline explorer.

Windows: Riot: http://download.criosweb.ro/Riot-setup.rar?

Mac OSX:ImageOptim

以Riot的使用为例 Takeing the Riot for example:

在Quality一项里可以设定jpg的品质，最佳实践：建议从60开始，逐渐增加数值直到效果满意为止 该工具除了可以优化图片外，还可以转换图片格式， 建议勾选Progressive，不仅图片会更小，而且会使浏览器渐进加载图片（先显示一个粗略的轮廓，再逐渐变清晰）

You can set the jpg quality in the Quality option, the best practical mean: I suggest you can set from 60 and gradually increase the number to meet your needs. It can not only be use to improve the pictures, but also can transfer the picture formate, so I recommend you to choose the Progreesive option, because it can make the picture size smaller and make the loader quicklier .

来源：环球大学