1图像优化.docxVIP

WEB图像优化为了提上网站的性能，对网站的图片进行高效的压缩，是非常必要的，在不断开发杀手级功能的同时，确保所有引入的资源都是最精简的，图像优化就是这样一项工作。长久以来，大家认为网站的性能应该包含哪些功能是一个商业问题而非技术问题，所以就算页面懂大小总响应时间影响极大，在性能方面也很少讨论，足够得到重视。网页的响应时间几乎和其大小完全关联，在典型的网页中，图像的大小比重还是比较大的，重要的是，在不删减功能的前提情况下提升性能，图像优化是最易实施的方案。在ALexa的全球排行中前10位的网站中，图像在整个页面中大小所占的比重。（图）1两步实现简单图像优化为了让图片优化工作更简单些，可以拆分为两个步骤，每个步骤都属于网站开发过程中的不同的工作者。在开始对图像进行优化之前，首先要确认图像的色彩数、分辨率和清晰度。对这几个参数的修改有损优化，同时也影响整个图像的质量。图像也许可以拥有更少的颜色，对于JPEG来说，可能意味着减少对图像的编码。对JPEG来说，虽然60%-70%的质量是公认的标准，但确实有些图像或是背景需要更高的或是更低的质量，如何选择根据设计师的创意来决定。一旦决定了需要什么质量的图像，就可以利用无损压缩技术尽可能地消减图像的大小。和上一步不同的是，这一步需要更系统化的解决方案，可以借助很多优秀的开源图像优化工具。2图像格式制作最优化的图像的第一步，就是理解广泛的应用在WEB上的3种图像格式——JPEG,PNG,GIF的特点，再根据实际的情况来选择合适的格式。2.1背景图像 VS 照片不管使用哪种图像格式，优化的方法取决于图像的具体类型：图形网站的LOGO、草图、大部分的图片动画和图标都属于图形。这些图像通常由连续的线条或是其他尖锐的颜色组成，颜色数量相对较少。照片照片通常是有百万数量级的颜色，并且包含平滑的颜色过度和渐变，比如相机拍摄的照片，绘画作品的照片。就图像的格式而言，GIF通常是用来现实图型，而JPEG更适合显示照片。PNG两者都适合，甚至用调色板PNG现实图形比GIF 会更好些。像素和RGB图像是由像素组成，像素是图像的最小单元，然而像素又是由不同颜色模型描述出来，RGB就是颜色模型的一种。（略RGB原理）真彩色图像 VS 调色板图像格式使用RGB颜色模型可以展示1600万种颜色即256*256*256（或2的24次方）种组合。支持如此多的颜色的图像格式就是真彩色图像格式，比如JPEGH和真彩类型的PNG.为了在存储图像信息是节省一些空间，有一项技术是讲图像中的各种不同的颜色提取出来建立一个表，这个表通常叫做调色板（称为索引）。有了这个颜色表，就可以通过将调色板中的条目和每个像素从新匹配，达到重新绘制整个图像的目的。调色板可以包含任意的RGB颜色值，但是最经常使用的调色板图像格式——GIF和PNG8。这两种格式限制调色板中最多只能包含256中颜色。这不是说只可以定义从256种一定义好的颜色中选择，恰恰相反，是从1600万种颜色中选择需要的颜色值，但图像中最多只能包含256种颜色。透明和Alpha通道（RGBA）RGBA并非另一种截然不同的颜色模型，而是在RGB的基础上做了扩展，额外的成分A代表了Alpha透明，只的范围从0-255。Alpha通道描述了透过像素可以看到下面内容的程度即透明度。隔行扫描当网速很慢时，大图像会随着下载的进度逐行显示，从上到下每次显示一行，缓慢地从上到下递进。为了提高用户体验，部分的图像格式支持对那些连续采样的图像进行隔行扫描。隔行扫描可以让用户在完整下载图像之前，看到图像的一个粗略版本，从心里上消除了页面被延迟加载的感觉。2.2不同格式图像的特性GIFGIF是图形交换格式（Graphics Interchange Format）的缩写，是一种调色板图像格式。透明GIF允许一个二进制（是/否）类型的透明，每个像要么是完全透明（不包含颜色）要么是完全不透明（包含一个单色）。这就意味着它不支持Alpha(可变的)透明，取而代之的是，调色板中某个颜色可以被标记为表示透明，而透明像素则会被分配为这个颜色直。所以，如果GIF设置了透明，那么就会“消耗”一个调色板的条目。动画GIF格式支持动画。包含动画的图像由若干帧构成，就像图像同时包含在一个文件中一样。大家普遍认为GIF动画很烦人，是以为在网络发展的初期GIF 被滥用了。GIF动画现在是有些应用，比如广告条（虽然在现在这已经是Flash的天下），还有在在富互联网应用（RIAs）中出现的“加载中”指示符。无损 GIF是无损的，也就是说可以任意打开一个GIF文件，做一些修改，保存关闭时不会损失任何的质量。逐行扫描当生成GIF文件时，会使用一种压缩算法（叫做LZW）来减少文件的大小。但压缩GIF时，会从上到下一行一行地对像素进行扫描。这种情况下，