渐进式 jpg 和 交错式 gif png 提高图片站体验

Posted 2020-09-02 zqifa

渐进式 jpg 和 交错式 gif png 提高图片站体验=

渐进式的JPG比原始JPG还要小！！ 让图片性感的露给你看~
google picasa 和 smashing magazine 都有用到
搞图片站的或者照片站比较适用

直接php GD库就可以再上传时候实现。

打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性<img lowsrc="" src="" width="300" height="200" border="0" />把图片的缩略图 放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！src里填写 原图片！这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来

交错GIF和渐进JPEG
JPEG、GIF和JPEG这三种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

以这种方式保存的文件称为交错GIF、交错PNG或渐进JPEG。尽管叫法不同，但这三种格式的视觉效果类似。交错GIF或交错PNG文件首先是一块一块地显示，下载完后再填补更多的细节。同样，渐进JPEG文件首先是模糊的，然后渐渐清晰起来。

大多数可以处理GIF文件的图像软件都将图像保存为交错或非交错的。例如，在Paint Shop Pro中，可在保存GIF文件前在Save As对话框中单击Option按钮，然后选择单选按钮Version 89a和Interfaces（89a是最新的GIF版本）（见图7.11）。PNG也提供了类似的选项，允许在Save As对话框中指定存为交错的还是非交错的。

要保存为渐进JPEG文件，选择Save As（或Save Copy As），然后选择图像类型JPG JPEG，单击Options按钮，并选择Progressive Encoding而不是Standard Encoding。现在网页上使用的许多较大的GIF和JPEG 图像都是交替和渐进，给Web用户以更好的图像浏览体验