關於建立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技術的能力和瀏覽器支持程度都提高了不少。