这里我并不想讨论有关于他的写法,我讨论的话题是有关图像格式等一些细节上的话题。

一、关于PNG和GIF格式图像的总结

PNG是目前保证最不失真的格式,我非常喜欢在一些ICO图标、LOGO、菜单背景等等使用PNG图像,她总能帮我显示得非常精细。常用PNG格式分为PNG-8、PNG-24两种:

1、PNG-8和GIF的差别

PNG-8和GIF其实差别并不是非常大,但是针对PNG有两点非常好的地方:

a、相比GIF存储空间略小,但是PNG无法制作成动画。

b、PNG只需要下载1/64的图像信息就可以显示出低分辨率的预览图像。(这一点同样适用PNG-24)

2、PNG-8不支持半透明

PNG-8和PNG-24其实并不是颜色位的区别而是彼此之间的存储格式不同,有关这方面的知识并不宜讨论过多,我们只要知道PNG-8不支持透明,而PNG-24可以。

3、IE6下的PNG

关于这个话题主要是由于PNG-24在IE6下用灰色的底来代替,如果你的图像并没有半透明的我建议你使用PNG-8至少她比GIF有两点非常不错的好处。而唯一可以解决这个问题是在IE6下使用IE特有的滤镜,然而像iepngfixjquery.pngFix.js都是用来解决这个问题的插件。

二、引用地址的方式

这分为绝对地址和相对地址,绝对地址类似于:http://www.google.com/img/logo.png,相对地址类似于:../img/logo.png,两者在正常情况下都没有差别的。因为不管你用哪一种方式引用都是重新一个新的HTTP,然后下载相应的图像信息。

我比较喜欢用绝对地址,也许看起来会比较长一点,但是我认为这种方式比较直接。而针对相对地址在做防盗链你就小心了,因为在不同的浏览器他们彼此之间的referer来源是不一样的。

三、CSS Sprite,中文叫:CSS图像拼合

她并不是什么新技术,只不过是将一些图片拼合在一起,可以大大的减少HTTP请求次数,纵观所有大型网站都采用这种办法,比如yahoo是最为经典的,将所有小图标统一放在一张图像上。这也包括我非常喜欢的淘宝、苹果等等,都有非常经典的设计方案。

好吧,暂时先整理到这吧。