图片优化技巧.docx

图片优化技巧文档主要包括以下几方面内容：基本概念位图实际应用什么时候应该使用PNG什么时候应该使用JPG总结Photoshop中各种参数的含义及设置技巧1、基本概念位图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一 样的像素点（如下图）。在web页面中所使用的JPG、PNG、GIF格式的图像都是位图。优点：利于显示色彩层次丰富的写实图像。缺点：文件大小较大，放大和缩小图像会失真。JPG和PNGJPG和PNG的一些特性对比：格式压缩模式交错支持透明支持动画支持JPG有损压缩支持不支持不支持PNG无损压缩支持支持不支持JPG的特性??? 1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。??? 2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。??? 3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。PNG的特性??? 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。??? 2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。PNG8与PNG24提到PNG格式可分为PNG8和PNG24，两者后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而PNG24则支持8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。格式最高支持色彩通道索引色编辑支持透明支持PNG8256色支持支持布尔透明PNG24约1600万色不支持支持8位（256阶）alpha透明GIF由于GIF现在使用率偏低，常适用于GIF动画，由于PNG本身是开发者为了代替GIF而衍生出的图片格式，所以透明图片建议采用PNG8。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。 GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。2、实际应用什么时候应该使用PNG案例1：下图为京东商城header部分用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：1、JPG保存的文件大小比是PNG保存的文件大2、JPG文件出现了噪点造成结果的原因分析：1、 首先我们发现文字颜色和描边等都是采用纯色， 图像所包含的色彩信息非常有限。当用PNG存储这个图像时，只需要保存很少的色彩信息就可以真实还原这个图 像。而对于JPG格式来说大小主要决定于图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件大小。案例2：下图用PNG8和JPG进行了保存，发现当用PNG8保存时不仅保证了图像的质量且图像文件的大小仅有8.3K，而当用JPG 100%保存时文件大小则增加到44.2K，如果不经放大可能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到PNG8的压缩 率采用JPG 45%进行保存，则图像会出现较严重的失真。结论?具备以下条件的图像更适合用PNG8格式进行存储：1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。什么时候应该使用JPG案例1：下图用JPG 60%（左上）、PNG8 256色 无仿色（右上）、PNG8 256色 扩散仿色（左下）、PNG32（右下）分别进行了存储。可以看出当用JPG存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。而采用PNG8进行保存时图像文件大小更大，失真也较严重。只有在PNG24的格式下才能保证品质，然而文件大小却比JPG要大很多。造成结果的原因分析：产生这种结果的原因也与JPG和PNG各自的压缩算法有关。1、对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。比如巴士车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异的区域，如果用PNG去保存，则需要不同明