浅谈CSS样式png、gif、jpg图片优化的方法

1、PNG、GIF、JPG图片对比

     在咱们进行图像优化技术前，须要学习有关的图片格式的一些技术细节，每一个图形格式都有本身的优点和拖弱点，知道他们会使你获得更好的视觉质量和压缩品质。

网页图片优化是网页加速中很是重要的一步，对图片进行压缩，不只可以节约带宽，而且加快网页的速度，咱们经常使用的图片编辑软件能够在压缩图片。

PNG-8的高压缩比

切图时，有时选择PNG-8能够得到更高的压缩比，注意，是PNG-8，不是PNG-24，不过有些状况下仍是GIF或JPG会小一些，须要根据实际状况调试以选择最佳方案。

对比大小：

一、图型类、照片类

对于图像格式的选择，咱们还须要考虑图片的使用场景或功能，归纳为两类：图形类、照片类

图型类：图形符号，具备高度浓缩并快捷传达信息、便于记忆的特性，颜色数量较少。

图型类通常能够使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32，若是色彩有损失可采用品质64或者128.

例如：首页左导的图标、feed区图标、勋章图、表情动画都属于图形。

照片类：照片一般含有百万数量级的颜色，包括平滑的颜色过分和渐变，若是是图形较为复杂，图中有时会出现真实的照片。

照片类通常用PNG和JPG。能够根据图片色彩的丰富程度而定。

PNG的品质通常要到128.JPG的品质通常要在70-80之间，以躁点的程度肯定。

例如：皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。

二、通用类、随机类

按照首页图片出现的频率分红：通用类、随机类

通用类：每一个人首页都会看到，图标、按钮、小背景

例如：顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操做类图标、状态类图标、按钮。尽量的采用PNG的格式保存，文件会相对来讲较小一些。

下图为微博的按钮盒左侧导航icon小图的，使用GIF和PNG格式的大小对比：

下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比：

随机类：根据本身定义和发布的内容而定。

A、表情GIF

能够使用FireWork或者ImageReady，建议使用ImageReady.

最好是手动一张张的调整，由于这些表情图的色彩值都比较少，若是使用比较大的颜色时会存储量较大。

B、换肤类图片

采用JPG格式或者PNG格式

皮肤的主要背景图中如含有真实的照片或者文字，可采用JPG格式，为了保证更接近设计图须要采用85以上的品质压缩图片，若是色彩跨度不大的背景图片，可采用PNG格式。

C、勋章类

目前有GIF和PNG两种格式，GIF的是小图，PNG的是中图和大图，品质选128便可。

D、各类广告：

发布器下方tips、右侧广告，底部广告，采用JPG格式或者PNG格式。

E、用户相关图：

头像、用户发布的图这个须要在后台控制压缩品质，采用JPG格式或者PNG格式。