关于创建Web图像时应记住的五个要素

1. 格式与下载速度

当前，web上用的最广泛的三种格式是gif、png和jpeg。我们的目标是选择质量最高，同时文件最小的格式。

webp图像格式

谷歌建立了另一种图像格式，名为webp。

这种格式既支持有损压缩也支持无损压缩，它产生的文件大小也远小于jpeg和png。跟png一样，它还支持alpha透明。

 

2. 颜色

大多数计算机显示器可以显示数以百万计的颜色 ，但也有例外的情况。

有的图像格式的调色板是有限的。gif和png-8图像只有256种颜色，对标志和图标来说通常这已经足够了。

jpeg、png-24和png-32均支持超过1600万种的颜色，因此照片和复杂的插图应选择这些格式。

不过，需要指出的是，对于这些图像，大多数情况下应使用jpeg。

3. 大小（尺寸）

对于网站上的图像，多大合适呢？

简单地说 ，通常应控制在几百个像素宽。

可缩放矢量图形（svg）

对于使用svg图像语言创建的图像，无论放大还是缩小都不会影响其质量（以及其他的一些参数）。

而且，对于某个svg图像来说，无论它在页面中显示的尺寸是多大，其文件大小总是恒定的。

目前，几乎所有的现代浏览器都提供基本的svg支持

 

4. 透明度

可以利用透明度为图像创建非矩形的边缘，在图像的下面设置背景色或图案。

png和gif都支持透明度，jpeg则不支持。

在gif格式中，一个像素要么是透明的，要么是不透明的。这称作索引色透明（index transparency）。

而png则既支持索引色透明，又支持alpha透明（alpha transparency）。alpha透明可以控制一个像素透明的程度。

也就是说，一个像素可以部分透明，而非要么透明要么不透明。

这意味着具有复杂透明背景的图像使用png的效果要好于使用gif的效果，因为使用png可以让边缘变得平滑，避免产生锯齿。

png-8既支持索引色透明，也支持alpha透明 ，但需要使用fireworks这样的程序才能将图像保存为png-8格式。

photoshop不支持alpha透明的png-8，但支持alpha透明的png-32。

这也是万维网上大多数透明png都 是png-32的原因。总之 ，对于透明图像，应使用png-8或png-32。后者允许使用超过256种颜色。

 

5. 动画

动画可以保存为gif，但不能是jpeg或png。实际上，使用图像表现动画已经用得越来越少了。

（一种例外的情况是那些好玩的gif动画，它们在tumblr这类网站相当流行。）

我们通常使用css动画、javascript、html5 canvas、svg和flash创建动画。

近几年，使用flash创建的动画越来越少了。这主要是由于ios不支持flash，且其他标准的web技术的能力和浏览器支持程度都提升了很多。