8/13

为您的设计
寻找专业的前端切图服务。

CCTV7小七去哪儿项目:巧妙利用photoshop为png图片瘦身

切图网(qietu.com)——最专业的web前端技术服务商讯:最近在为CCTV7旗下农业频道的《小七去哪儿》专题提供网页切图制作的时候,碰到的问题——因为设计需要,切图的时候会用到1920宽的大尺寸背景图片,我们采用保存png格式,png对图片像素还原的很好,但是缺点是体积大,整个网站下来,用到了大小不等十几张大图背景,这个在放到线上访问的时候问题就出来了,放到线上会加载很慢,本地很难看出来,严重影响用户体验,所以这个问题是很严重的。

在考虑是否对大图片进行预加载的时候,我们先采用了对png图片进行压缩的方式处理,在保持图片不失真情况下,这个方法是非常有效和实用的也是最科学的解决方案。经过压缩实践效果很好,原图1.6m的图片经过压缩不到600k,整整缩小了一半还多,图片基本看不出任何失真异样。

附:photoshop压缩png的方法

1. 用PhotoShop打开一张PNG图片,在网上随便找了一张。

图片尺寸:43.6kb

2. 该图片应该处于RGB模式下,点击图像->调整->色调分离,会弹出一个对话框,对话框中有一个可以拖动的滑块,拖动滑块并观察图片的变化,如果仔细观察就会发现某些颜色被丢弃了,这就是压缩PNG的原理。数值越小,图片尺寸越小。

3. 拖动滑块,调整图片的质量,调整到自己可以接受的程度,然后点击文件->存储为Web和设备所用格式保存图片为PNG格式。

压缩后的图片,尺寸35.8kb

进一步降低质量,尺寸29.2kb,但明显能看出条纹。

如果将此方法用于比较大的背景图片上,尺寸减少的效果很明显。