一.压缩图片质量

JPG：可在保真图片色彩度的基础上压缩大小，在网页中只能保持矩形的形态，无透明度，常用于栏目背景、主视角、大背景等，一般可压缩到50-60%，需综合对比压缩比率效果，对于颜色比较少的图片建议压缩至70%或者保存为gif格式。
GIF：最高色彩只有256，只能用于颜色较为单一的图片，可透明，对于gif而言，色彩越少，文件也就越小。在肉眼可可接受的范围内，尽量将gif色彩数量降低，能够对gif图大小进行有效的优化，常用于小图标、圆角边框、按钮等。
江湖上的传说：
* 用firework替代photoshop ，fireword出的图片更优。
* 将 Dreamweaver 的默认图像编辑器设为 Fireworks ，那么在 Fireworks 里修改的文件将立即在 Dreamweaver 里更新，不需要用Photoshop 等软件，切换来切换去的了。
* Fireworks很完整的支持网页16 进制的色彩模式，提供安全色盘的使用和转换，支持背景透明，导出的图片又小又漂亮。
* 在线视频(参考)：Adobe Fireworks CS4 网页原型设计流程与习惯

二.减少图片数量

减少图片数量，从而减少CSS background images请求
解决方法：CSS Sprite
css sprite是一种网页图片应用处理方式，将icon小图标、按钮、栏目背景图进行分类，然后拼接到一张大图上，具体操作请看第四章。
使用css sprite应注意的事项：
* 在合并图片的时候，要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止有效的空间里（或者说固定的高度内）不出现其它背景。
* 开发比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；网上也有一些Css 背景图合并工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，黏贴就OK了！
* 护的时候比较麻烦，如果页面背景有少许改动，就要改动这张合并的图片，如果在原来的地方放不下，最好往下面加图片，这样图片的字节就增加了，还要改动css。
* CSS Sprites非常值得学习和应用，特别是页面有一堆ico图标的时候 。总之很多时候大家要权衡一下利弊，再决定哪些图片需要应用CSS Sprites。

三.图片命名规则

按图片的用途、功能命名：
公用：public.jpg
标题：title.jpg
按钮：btn.jpg
小图标：icon.gif
按html结构命名：
大背景：full_bg.jpg
头部主视觉背景：header_01.jpg header_02.jpg
导航：nav.jpg nav_on.jpg nav_li.jpg
主体： main.jpg
侧边栏：sidebar.jpg
底部：footer.jpg
按模块命名：
即同个模块下的所有图片拼在一张大图上
严禁以下图片命名：
（.jpg
+.jpg
123.jpg
中文.jpg

四.实例讲解

略……

五.页面分析工具

雅虎Yslow（基本）
用于火狐，必需先装firebug才能使用。
谷歌Monster（推荐）
* 检测https协议页面，是否使用了http协议的图片、JS、CSS等；
* 检测CSS、JS、background-image文件是否为404；
* 如果background-image超过6个（可设置检测数量），则提示所有背景图片及大小，超过30KB，标红显示；
HttpWatch (集成在Internet Explorer工具栏 )
谷歌Page Speed
Smush.it（基于 YUI 的在线图片优化工具 ）

扩展阅读：
12个基于网页的图片优化工具
SEO优化技巧：16个方法优化网页中的图片