页面图片处理技巧

页面上主要使用三种图片格式：jpg、png、gif。选用合适的图片格式和处理方法，有利于更好的图片清晰度以及更快的页面加载速度。
同时，我们知道不同图片的格式，使用的场景是有区别的，您可以按照以下方法来确认使用到什么格式：
1、使用gif：
1.1、图片的背景是透明的。虽然png格式也可以实现透明背景并且不会产生锯齿，但是使用IE6浏览png格式时，会被加上背景色。
1.2、照片的颜色比较简单，gif使用256种颜色来保存图片。
1.3、图像各像素间色差较小。
1.4、如果不清晰度时，请尽量使用尺寸更小的gif格式来保存图片。
1.5、gif还有一个重要的优势是，经过交织处理的gif图形，可以先以低清晰度全部下载，然后再慢慢变清晰。
2、使用png还是jpg：
2.1、通常，最容易困扰页面制作者的情况就是不清楚该选择png格式还是jpg格式。
2.2、采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。
2.3、另一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

包含图片的页面如何处理：
1、使用高度和宽度标签来为页面预留图片位置，在图片下载完成前，不会影响访问者浏览网页内容。
2、如果需要，可以反复使用一张图片。比如大面积相同色块部分在切割时只需切割一小段，充分利用背景重复的特性，提高页面加载速度。
3、尽量保证切线的水平对齐从而方便页面布局。
4、如果页面某张图片内容较大，可以对图片进行切图分割，切割时以色块为单位尽量保持页面元素相对独立。（你可以使用HSPACE=0以及VSPACE=0的图片标签，通常这个工作都有切图软件帮您自动处理了）
5、背景图片的处理：
5.1、如果想在某个图片上添加文字，则可以将该图片设计为背景图片。除此功能外，灵活设置网页背景图片还能大大加快网页的加载速度。对于大面积相同色块的背景图片，我们可以只切割狭小的长条，然后利用背景图在水平和垂直方向上自动重复的特性设置背景图片。对于单一颜色的背景，我们则可以利用html单元格背景属性直接设置相应的背景颜色。