網頁圖片格式分為2種：一種是位圖，另一種是矢量圖。
位圖，又稱為點陣圖像，是由稱作像素（圖片元素）的單個點組成的。
通常位圖又分為8位、16位、24位和32位。
所謂8位圖並不是圖像只有8種顏色，而是28（即256）種顏色，8位圖指的是用8個bits來表示顏色。從人眼的感覺來說，16位色基本能滿足需要了。
24位色又稱為“真彩色”。224，大概是1600萬之多，這個數字差不多是人眼可以分辨顏色的極限了。
32位色並不是232的發色數，其實也是224種顏色，不過它增加了28階顏色的灰度，也就是8位透明度，因此就規定它為32位色。
在制作頁面的時候，設計者一般選擇24位圖像。32位圖像雖然質量好，但同時也帶來更大的圖像容量。如果一個頁面使用體積過大的畫，會使得浏覽器加載頁面速度變慢，事實上，一般肉眼也很難分辨24位圖和32位圖的區別。
放大原始位圖，會使圖像效果失真，縮小原始位圖，同樣會使圖像效果失真，這是因為縮小圖像，減少的是圖像中像素的數量。
位圖3種格式：“.jpg”、“.png”、“.gif”。
JPG可以很好處理大面積色調的圖像，如相片、網頁一般的圖片。
PNG支持透明信息。所謂透明，即圖像可以浮現在其他頁面文件或頁面圖像之上，如圖1。可以說，PNG是專門為web創造的圖像，通常大部分頁面設計者在頁面中加入lLogo或者是一些點綴的小圖像時，都會選擇使用PNG格式。
由於JPG格式容量較大，在保證圖片清晰、逼真的前提下，網頁中不可能大范圍使用文件較大的jpg格式圖片。PNG格式圖片體積小，而且無損壓縮，能保證網頁的打開速度，所以PNG格式圖片是很好的選擇。
由於PNG優秀的特點，PNG格式圖片可以稱為“網頁設計專用格式”。
舉例：JPG格式圖片與PNG格式圖片區別
我們在同一個網頁中放入同樣的jpg圖片與png圖片。為了明顯區分，我們為每個圖片加了一個邊框，效果如下：
圖1 JPG圖片和png圖片
GIF只支持256色以內的圖像。所以，GIF格式的圖片效果是很差的。但是，GIF有一個最大的特點，就是可以制作動畫，圖像作者利用圖像處理軟件，將靜態的GIF圖像設置為單幀畫面，然後把這些單幀畫面連在一起，設置好一個畫面到下一個畫面的間隔時間，最後保存為GIF格式就可以了。可以說，這就是簡單的逐幀動畫。目前這種格式的動畫在互聯網上廣為流行。
：當處理色調復雜、絢麗的圖像時，如照片、圖畫等，使用使用JPG格式；而處理一些logo、banner、簡單線條構圖的時候，適合使用PNG格式；GIF格式通常只適合表達動畫效果。
（1）Adobe公司的Photoshop軟件；
（2）Windows系統的畫圖；
矢量圖，又稱為“向量圖”。矢量圖是計算機圖形學中用點、直線或者多邊形等基於數學方程的幾何圖元表示圖像。
矢量圖是以一種數學描述的方式來記錄圖像內容的圖像格式。如一個方程y=kx，當這個小方程體現在坐標系上的時候，設置不同的參數可以繪制不同角度的直線，這就是矢量圖的構圖原理。
矢量圖最大的優點是無論放大、縮小或旋轉等不會失真；最大的缺點是難以表現色彩層次豐富的逼真圖像效果（圖片效果差）。
在網頁中，比較少用到矢量圖，一般在網頁logo和矢量插圖我們才有可能用到矢量圖。矢量圖主要用於印刷行業，因為矢量圖放大並不會失真，這樣在印刷時就不會出現毛邊或者模糊的情況，這一點是Photoshop都比不上的。隨著3D和Flash發展，我們主要利用矢量圖來造型，然後導入到3D MAX放樣或者在Flash動畫中使用。
動畫矢量圖
風景矢量圖
人物矢量圖
矢量圖的後綴一般有“.ai”、“.cdf”、“.fh”、“.swf”。“.ai”後綴的文件是一種靜幀的矢量文件格式，“.cdf”後綴的文件多以工程圖為常見。而“.swf”格式文件其實指的是flash，flash也是頁面中最常見的一種動畫。
（1）Adobe公司的illustrator
（2）Corel公司的CorelDRAW
1、位圖受分辨率的影響，而矢量圖不受分辨率影響。因此，當圖片放大時，位圖清晰度會變低，而矢量圖清晰度不變。
2、位圖組成單位是“像素”，而矢量圖組成單位是“數學向量”；
3、位圖適用於色彩豐富的圖片，而矢量圖卻不適用於色彩豐富的圖片；
4、位圖常用於網頁中的照片等，容量較大；矢量圖常用於印刷行業、網頁logo或矢量插圖。
疑問1、如果我從事網站開發，對於圖像處理這些要掌握到什麼程度呢？
一個真正的前端工程師或者站長，都得掌握基本的圖片處理技術，不過不需要太過於深入，只需要掌握基本的PS技術（如切圖、圖片壓縮、格式轉換、基本操作等）即可。
不過在這裡得說一句，盡量多學吧。真正的大牛都是盡量多學，而那些急於求成的人才會盡量少學，能不學就不學，看看你是否這種心態？
總結雖然這一節知識比較多，不過大家也得了解就一下，不過現在我們只需要掌握.jpg、.png和.gif三種圖片格式的區別即可。
1、JPG可以很好處理大面積色調的圖像，如相片、網頁一般的圖片。
2、PNG格式圖片體積小，而且無損壓縮，能保證網頁的打開速度。最重要的是PNG格式圖片支持透明信息。PNG格式圖片可以稱為“網頁設計專用格式”。
3、GIF格式圖片圖像效果很差，但是可以制作動畫。
軟件下載各種版本的Photoshop下載