PNG-24可以显示真彩色,但不支持透明,颜色丰富的图片推荐使用(如屏幕截图、界面设计图)
PNG-32可以显示真彩色,同时支持256阶透明,效果最好但尺寸也最大
图片尺寸的选择
尺寸,曾经是最不需要讨论的话题,但自从Retina出现之后世界就变得复杂多了。
这里只说我们关心的部分和结论,我们需要分清不同类型的像素:CSS像素和设备像素。一个 CSS像素可能包含多个
设备像素。对于图片来说,在高DPI的屏幕上需要使用分辨率更高的图片,如果我们讨论的是Retina,那么就需要2倍
分辨率(几乎4倍尺寸)的图片。这几乎没有取巧的空间,屏幕就是那么大,需要的图片也就是那么大。(鸽子为什么
那么大?^_^)
我们能够控制的地方是“恰好”显示所需尺寸的图片。例如在屏幕中通过CSS或者标签的wihth/height属性,将一副
200x200的图片调整为100x100大小,那么这其中就有(200x200)-(100x100)=30000个像素是浪费的,这占到了图片尺
寸的75%!
之所以有这么大的浪费,是因为图片的尺寸与面积基本成正比,与宽高的平方成正比。因此良好的计算客户端实际显
示的图片尺寸,能够大大减小图片的大小。即使只有长和宽都只有10px被浪费,但是当图片足够大时,这部分也将产
生很大影响。
响应式图片
上面提到“恰好”显示客户端所需大小的图片,听上去很容易不是吗?但当响应式布局出现后,这就变得极其困难。我们
要支持上至1920宽度,下至320宽度的无数种设备,如果使用1920宽度的图片,那么在小型设备(这类设备往往对网
速和流量更加敏感)上每个用户都要付出额外的带宽和等待时间,如果使用320宽度的图片,那么在1920的屏幕上就
像是在高清屏上使用DOS那么让人难以接受。
很自然的,我们需要图片也能“响应式”加载,根据所在设备的不同,加载不同尺寸的图片。响应式图片尚没有写入Web
标准,实现起来也有诸多不便和兼容性限制。
响应式图片虽然尚未成为标准,但这是Web图片优化的一柄利器,一旦被广泛支持,再没有比缩小图片尺寸更有效的
优化方法了。
优化JPG和PNG
选择了正确的图片格式,按照正确的大小生成了图片后,我们还需要对图片进行进一步优化,这种优化一般分两步进
行:
1.有损优化,删除没有出现或极少出现过的颜色,合并相邻的相近颜色。这一步并不必须,如PNG格式就直接进入下
一步
2.无损优化,压缩数据,删除不必要的信息
JPG和PNG格式的图片生成后,一般还有进一步优化的空间,例如JPG格式的照片中,可能携带有相机的Exif信
息,PNG格式的图片中可能带有Fireworks等软件的图层信息等。去除这些额外信息后,还可以通过减小图片的调色
板,去除没有出现过的颜色,以及合并相邻的相同颜色等手段来进行优化。原理性的内容这里不再赘述,仅介绍工程
中可用的优化工具。
不同格式的图片有一系列工具,这些工具有有更多种参数调节方案,常见的几种调节工具有: