SEO之怎样减小网页体积

本文将介绍优化图片的基础知识。
一般搜索引擎只关心网页的html体积，而用户则关心网页整体的体积，因为则关系到网页的打开速度，前文中提到8秒中原则，如果你的网页在8秒中内不能呈现在用户面前，用户就会产生延迟感，就有可能关闭窗口或标签，放弃你的网页。有些浏览器可以在状态栏中显示页面的打开时间如TT，Firefox装上 Yslow插件后可以看到页面的具体打开时间，精确到0.001s！有兴趣的朋友可以下载下来试试。好了，切入正题，首先我们从介绍网页中常见的图片格式开始！

一、 常见的图片格式
可在网页上显示的常见的图片格式有GIF，JPG或JPEG，PNG，BMP等。

1. GIF：图形交换格式
GIF图片以8位颜色或256色颜色存储单个图像数据或多个图像数据（GIF动画），GIF图像格式是无损压缩格式，支持透明度、压缩、交错和动画。常见的QQ动画表情就是GIF动画，GIF格式适用于存储颜色较少的图片，比如logo，可以达到最佳的优化效果，有最小的图片体积完美的呈现你的图片。

2. JPG或JPEG：联合摄影专家组
JPG或JPEG图片是以24位颜色存储单个光栅图像，是与平台无关的通用图片格式，支持最高级别的压缩，不过这种压缩是有损耗的。一般风景照片，人物相片适合用JPG格式来保存，在对JPG图片进行优化的时候可以对图片效果和图片体积大小之间做一下权衡，争取在保证图片效果的情况下最大程度降低图片体积。

3. PNG：可移植网络图形
PNG图片以任何颜色深度存储单个光栅图像，PNG之所以称为可移植网络图形，主要是因为这种格式与平台无关，可以在Windows、Linux等各种平台中正常显示。PNG图像与GIF类似，支持透明背景，交错，但其提供的压缩量较少，相对于GIF和JPG图像，在相同效果下图片体积较大，且部分老的浏览器不知道PNG透明背景，但PNG受到最新的Web浏览器支持，是最有发展前途的图片格式之一。

4. BMP：Windows 位图
Windows位图可以用任何颜色（从黑白到24位颜色）存储单个光栅图像。Windows图像与其他微软的程序兼容，它不支持文件压缩，会造成文件体积非常大，一般不适用于网页。但一些网页设计者或者编辑没有注意到这一点，仍然使用BMP图片格式来在网站上发布他们图片，所以BMP图片也成为了网页中常见的图片格式，但再次声明一点：BMP图片文件不适用于网页。如果条件容许，请尽量压缩。

二、 图片格式的选择
此处根据利用案例来分析一下：

分析1：本站的logo图片格式的 选择：
本站logo图片效果（GIF格式）：

http://www.hbsem.cn logo

Logo图片颜色构成很简单：只有两种颜色，属于颜色较少的范畴，如果使用jpg格式：如下面图片：

http://www.hbsem.cn logo-jpg

在图片宽度和高度不变的情况下，选择80%的质量度，图片体积为7K（可右击图片查看图片属性信息、包括图片名称、类型、地址、大小、维度等信息），而如果仔细比较两个图片还可以看出这个JPG格式效果稍逊于上面的GIF格式图片。所以对于颜色较少的图片，选择GIF格式是非常合适的。常见颜色较少图片有手绘画、工程图纸等。

分析2：人物图片格式的选择
此处分析人物图片格式选择方法：在限定图片体积大小的情况下，比较各种JPG、GIF、PNG等格式的图片效果。

百度搜索”美女”，下面这个美女的图片排在第一位，没办法就拿这位美女的相片来实验了哦！

下图为JPG格式，26K

美女 JPG 26K

下图为GIF格式，26K

美女 gif 26k

下图为PNG格式，26K

美女 png 26k

有想法了吧？对于风景照、人物相片jpg格式将是比较理想的选择。

三、 插入图片到网页时的注意事项
1. 使用真正的缩略图
这是许多许多网站常犯的错误！我几乎在所有服务过的客户网站上发现了这一毛病。看上去一个小小的图片，等查看其图片文件的时候才知道小小缩略图后隐藏着巨大的秘密——清晰的原图，有些甚至就是直接从数码相机里拷出来的相片，体积达几兆之多。网页上如果有个十张八张这样的缩略图，我想可能要用迅雷才能下载下来了。
要减小网页体积，你得缩略图使用真正的，用图片处理软件缩小了尺寸的图片就显得非常重要！这是你必须要注意的问题。

2. 关于图片交错功能的使用
图片交错是指网页在加载的时候先加载部分图像的内容，然后再慢慢加载，这样用户可以先看到一个大概的较差的效果，但等图片完全加载后图片就会完美展现。图片交错功能的使用可以提高网页加载速度。对于体积较大的图片，又不想做太多的压缩以免影响效果，可以使用交错功能来既保证效果又不影响速度。目前支持交错的主要有GIF格式图像和PNG格式图像。

总结：本文介绍了常见的图片格式、图片格式选择的方法、插入图片到网页时的注意事项，关于为了减小网页体积而优化图片的方法相信大家已经有了眉目。接下来的工作就是多多去实践，网页图片优化推荐使用FireWorks，百度是否更懂中文还有待考证，但FireWorks确实更懂网页（个人使用心得），不过Photoshop毕竟很好很强大，如果对优化要求不高的话，使用Photoshop优化即可。