psd

1. photoshop的專用格式，用作效果圖，不壓縮，保留了圖層、透明、半透明等圖片信息；
2. 保存了圖片的原始數(shù)據(jù)，方便對(duì)圖片的修改，相對(duì)地，psd圖片的容量也很大；
3. 前端工程師使用psd格式的效果圖進(jìn)行切圖，制作網(wǎng)頁(yè)，而不是在網(wǎng)頁(yè)中直接使用psd圖片。

jpg

1. 一種有損壓縮格式，壓縮效率高，容量小，網(wǎng)絡(luò)傳輸速度快；
2. 不能保存為透明背景，在網(wǎng)頁(yè)中應(yīng)用廣泛。

gif

1. 一種無(wú)損壓縮格式，最多只有256種顏色，對(duì)于顏色豐富的圖片轉(zhuǎn)化為gif格式會(huì)失真；
2. 背景可以透明，但不能是半透明；
3. 對(duì)于透明背景中的圖像，如果邊緣輪廓使曲線，會(huì)產(chǎn)生鋸齒；
4. 還可以保存為動(dòng)畫格式。

png

1. 無(wú)損壓縮格式，用于替代gif；
2. 背景可以是透明或半透明，且透明背景中的圖像邊緣光滑，沒(méi)有鋸齒；
3. png也是firework的專用格式，可以包含圖層信息，firework也是一款圖像處理軟件。

webp

1. 谷歌于2010年推出的新一代圖片格式；
2. 在壓縮方面比jpg格式更優(yōu)越，在質(zhì)量相同的情況下，webp圖像的體積比jpg的小40%；
3. 尚未得到瀏覽器的廣泛支持，只在Chrome和Opera上有效。

位圖和矢量圖

1. 位圖：也稱為點(diǎn)陣圖，由一個(gè)個(gè)的方形像素點(diǎn)排列拼接而成，放大時(shí)會(huì)失真；
2. psd、jpg、gif、png、webp都是位圖；
3. 矢量圖：與位圖的原理不同，其圖像輪廓是由函數(shù)曲線生成的；
4. 放大矢量圖時(shí)，其原理就是將曲線乘以一個(gè)倍數(shù)，不會(huì)出現(xiàn)鋸齒。

svg

1. 一種矢量二維圖片格式，基于xml標(biāo)記語(yǔ)言描述的，可以通過(guò)任何文本編輯器創(chuàng)建；
2. 文件容量小，放大不會(huì)失真，背景可以是透明的，很適合做高質(zhì)量、單色調(diào)的圖標(biāo)；
3. 目前，網(wǎng)頁(yè)圖標(biāo)/地圖大量使用svg格式，這種矢量圖在不同終端屏幕上的顯示效果都很好。

flash

1. 一種適量動(dòng)畫文件格式，很多優(yōu)秀特性都可以用HTML5取代，如今已逐漸退出歷史的舞臺(tái)；
2. 既可以是靜態(tài)圖片，也可以是多媒體動(dòng)畫，還可以加入用戶交互和數(shù)據(jù)；
3. 格式名為swf，flash是對(duì)它的統(tǒng)稱，swf文件中衍生出一種流媒體視頻格式flv；
4. flv格式的容量小，可以邊下載、邊觀看，廣泛應(yīng)用于視頻網(wǎng)站。

總結(jié)

1. 網(wǎng)頁(yè)制作中，不透明背景的圖片就使用jpg，透明或者半透明背景的圖片就使用png；
2. 制作網(wǎng)頁(yè)圖標(biāo)
    1. 多顏色的圖標(biāo)使用gif/png格式；
    2. 單色且對(duì)顯示效果要求高的圖標(biāo)使用svg格式；
    3. 動(dòng)畫圖標(biāo)使用gif格式。
3. 雪碧圖/精靈圖：HTML網(wǎng)頁(yè)中的圖片需要網(wǎng)絡(luò)請(qǐng)求，為了減少網(wǎng)絡(luò)請(qǐng)求的次數(shù)，將裝飾性圖片
   按照一定的距離，排列在一張透明背景的圖片上，這樣只需要做一次網(wǎng)絡(luò)請(qǐng)求即可；
   HTML在使用時(shí)，通過(guò)CSS的定位取出對(duì)應(yīng)圖片的位置。