关闭

png格式的图像无损压缩的小技巧--实战篇

732人阅读 评论(0) 收藏 举报
最近在研究如何能够使得本站blog.proudeng.com 的访问速度能够得到提高。看了一些这方面的文章,也总结了一些心得。
其中网页中图像的优化是很重要的一环,毕竟图像的文件大小相对于网页中的其他的大多数的文件来说,要大很多。
图像的优化有好多的做法,比如图像格式的转换,降低jpeg图像的质量,调整图像的分辨率。等等等等。
我们可以按照我们想做的操作去对图像进行操作。
然后,最后的一步,就是将图像上传到支持外链的服务器上,或者上传到自己的博客中,准备实用此图像了。
且慢!!!
且慢!!!
在你想上传图像之前,你需要看一看本文所讨论的内容!!
你会发现经过了图像的无损压缩之后,再上传到服务器上的图片比起原先的图片,大小会少很多,而图像的质量一点都不会受到改变!!
是么??有这么神奇??
是的,这就是图像的无损压缩所做的事情,也是本博文所想讨论的问题。
一般的无损压缩,就是放在图像优化的最后一步来完成的,当我们手动完成了对图像的修改,优化之后,我们所应该做的,不是立即上传此图片或者立即使用此图片,而是将此图片交给无损压缩工具,让工具对其进行进一步的压缩。这应该成为我们修改图像的一个思维定势。你会发现,采用此思维定势,是有回报的!!能够极为有效的减小图像的大小,并且完全不会降低显示的质量!!


说到这里,其实想说的已经很清楚,就是要介绍几个好用的,工具,让工具来对图像进行无损压缩。
原来在我的关于网站优化的文章里面提到了两个无损压缩的工具。
下面的这几个工具其实对png格式的图像来说效果最为明显,jpeg格式的图像效果不是很明显。
不过除了照片之外,网页上的图像,也还是Png格式的居多的。


  1. Smush.it.这个是yahoo提供的老牌的无损压缩工具,很经典的。使用的方法也很简单,上传图片上去,smush.it会自动压缩图像,我们要做的只是将优化好的图像下载下来就OK了。用此工具我试过jpeg和png,都可以进行压缩。

  2. Punypny.此工具的机制能smush.it的差不多,但是根据其官方的说法以及使用下来的感受,压缩效率确实要比smush.it有时候要高很多,可以说是smush.it的升级版。但是由于此工具已经被墙,所以我现在不能验证它能不能对除了png之外的图像格式也能进行压缩。

  3. pageSpeed.此工具乃png格式图像无损压缩的终极武器!!狂有力!


以前我的做法就是使用Smush.it工具对图像做最后的处理,得到优化后的图像,然后该存的存,该使用的使用。后来发现punypny的压缩效率好像有时候更高,所以就一般先用smush.it压缩一下,得到优化后的文件再进行punypny处理,得到最终的文件。再后来,就发现punypny的服务器已经被墙了,悲痛ing.还有再后来的,再后来就是突然发现发现google的PageSpeed工具居然是如此的强大。基本上,我现在的做法就是先用smush.it工具压缩一下,然后将压缩的结果用google的PageSpeed再跑一遍,得到最终的结果。这应该是一个完美的方案了。下面举一个例子来说明。比如下面的这个图片

此图片的大小是9.29K,将此图片经过smush.it后的结果如下:



对于上面经过初步优化得到的8.36KB的图片再经过PageSpeed的处理,得到的结果如下:

可见,再次经过PageSpeed优化过的图像大小,又降低了43%,最终优化版图片的大小为4.36KB.

由此可见一斑了吧,对于png图像来说,PageSpeed的图像优化工具是很强大的。

注:如何使用PageSpeed工具呢?

  1. Firefox下安装firebug工具

  2. 安装PageSpeed工具

  3. 将图像用Smush.it进行优化,优化后会得到一个带有smushit域名的外链图片

  4. 点击此外链图片,在新的tab中打开,然后用开firebug,点击PageSpeed的"Analyze Performance"按钮,进行分析。

  5. 在分析结果栏里面,会有一项叫做"Optimize Images"项,点开就能看到最终优化过的图片了。


over.
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16396次
    • 积分:374
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条