聊聊网页中的图片

warn: 这是一篇没有一张图片的讲图片的文章

1. 图片格式

通常在网页中使用的图片有三种格式，jpg，png和gif。
jpg是有损压缩格式，就算你在ps里用100%质量保存，保存多次会产生质量损失，而png和gif则不会。因此如果开发者相对图片进行微处理，改动jpg不是明智的选择。
png支持透明和半透明，png8不保存alpha半透明通道，而png24可以。但是png24的半透明在IE6下存在兼容性问题，所有半透明的部分会被展现为不透明底色。
gif可以保存动画，gif也支持透明，而且兼容性很好，支持IE6，但它和png8一样，透明的边缘由于没有虚化，会有比较难看的锯齿。
另外一个比较炫酷的技术是base64图片，就是用base64编码方式对图片进行编码，然后在css的background里载入，如下：

background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

其中data表明用数据的方式加载背景图，img/gif是图片格式，base64是编码格式，最后是编码本身。
base64并没有想象中的那么优雅，你随便拿一张图片转成base64会大的惊人，从体积上来讲也要大于一般图片，而且容易阻塞页面，图片不易修改和查看，兼容性还不好（IE7以下）。
关于base64的利弊查看这里：
base64利弊

2. 图片大小

jpg作为位图，对于复杂颜色和复杂结构的图片有很好的压缩，类似照片或卡通形象，jpg保存下来要比png和gif硬盘容量小很多。但如果是简单图形颜色较少，png的表现更好。基于现在页面设计越来越扁平，越来越简洁，所以png使用的比例越来越高，像按钮，小组件这类的基本都由png来保存，一个颜色少，二个质量无存，三个支持透明。jpg使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。
我个人的经验是，页面中的一些大图尽量控制在100k左右，通过ps保存jpg的质量来控制，不到100k的可以提高质量，大于100K的适当降低质量。

3. 图片的载入方式

大家都知道，一个是html里的img标签，另外一个是css的background，当然canvas也可以加载图片，而且可以控制每个像素点的属性,但是没有人会为了在页面中放一张图片使用canvas。
img标签的图片可以缩放，所以可以做一些自适应效果，比如一个全屏的背景自适应效果，可以通过在底层绝对定位一张img，缩放的时候改变它的尺寸来实现。
background的优势更多比如可以使用sprit，可以重复背景，控制展现位置，但是它不能缩放图片，除了使用css3的background-size。
当然了，使用img和background也要从语义角度去考量，img里的图片就是作为html内容的图片，也有利于SEO。background就是页面中的背景，并不是内容，修饰作用。
img标签有一个坑，就是空的src标签，这样：

浏览器会把空的src当做页面本身，页面中所有的资源会被重新加在一起。

4 background和sprit

作为全局样式的图片，还是有必要放在sprit里的。保存sprit有不少工具，也可以自己手动处理，手动处理的灵活性高一些，可以在做的过程中调整图片的位置。
曾几何时我喜欢把sprit做的很极致，中间不留一个像素的缝隙，后来发现这种做法其实没什么必要，节省这点有可能让图片调整变的很麻烦。
前期尽量做好规划，html结构，css repeat，都会对sprit图产生比较大的影响。排布好的sprit图可以简化html结构。
background-color属性可以透过png透明的位置，我们可以利用这个做一些简化，比如按钮上的icon做成透明的png，这样改变background-color就可以实现不同的按钮，而只使用了一张图片。
background-repeat 可以做无缝贴图，这个很有意思，类似马赛克，或者瓷砖。一些看起来很炫酷的背景，一些噪点之类，你去看其实只是一张3*3像素的循环之类。