一、點陣圖
點陣圖也叫點陣圖，是由一個個的方形的畫素點排列在一起拼接而成的，點陣圖在放大時，影象會失真。下面講的5種影象都屬於點陣圖。
1、psd
psd是photoshop的專用格式，UI設計師使用photoshop設計效果圖，最後會將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，而且保留了圖層、透明和半透明等圖片資訊，所以這種圖片格式的容量相對來說是很大的，前端工程師使用這種格式的效果圖來切圖製作網頁，但是網頁中不會使用這個格式的圖片，它的作用一是儲存圖片的原始資料，二是方便圖片的修改。
2、jpg
jpg是一種有失真壓縮格式，壓縮效率高，容量相對來說最小，網路傳輸速度快，它不能存為透明背景，在網頁中應用最廣，一般在不需要透明背景的時候就使用這種圖片。
3、gif
gif是一種無失真壓縮格式的圖片，最多隻有256種顏色，顏色豐富的圖片轉化為這種格式會顏色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的影象，如果邊緣輪廓是曲線的，會產生鋸齒，它還可以儲存為動畫格式。
4、png
png的目的是為了代替gif圖片，無失真壓縮，背景可以是透明或者半透明的，透明影象邊緣光滑，沒有鋸齒，網頁中需要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也可以包含圖層資訊。firework是另外一款可以和photoshop相比的影象處理軟體。也有少量的UI設計師使用這種軟體來設計網頁效果圖，他們設計的效果圖就是帶圖層的png格式的，碰到這種設計師，如果我們習慣了photoshop切圖，可以將帶圖層的png效果圖轉化成psd圖片再處理。
5、webp
它是由谷歌於2010年推出的新一代圖片格式，在壓縮方面比當前jpg格式更優越，在質量相同的情況下，WebP格式影象的體積要比jpg格式影象小40%，不過這種圖片還沒有得到廣泛的瀏覽器支援，僅在Chrome和Opera上支援，在其他瀏覽器上需要安裝外掛才可以顯示，目前還沒有大規模使用。
二、向量圖
向量圖和點陣圖組成影象的原理不同，它的影象輪廓是由函式曲線生成的，當放大影象時，實際的原理就是將曲線乘以一個倍數，影象可以輕易地放大，而且不會出現畫素塊，影象邊緣也不會出現鋸齒。
1、svg
svg是一種向量二維圖形格式，它是基於xml標記語言描述的，可以透過任何文字編輯器建立。它的優點是檔案容量小，放大不失真，而且背景也可以是透明的。目前大量使用這種格式來製作網頁圖示或者網頁地圖，由於它是向量的，所以在不同終端螢幕上(pc、手機)都有很好的顯示效果。
2、flash
flash是一種向量動畫檔案格式，曾經在網路上風靡一時，如今已逐漸退出歷史舞臺，原因是它的技術更新跟不上發展，這種格式既可以是靜態的圖形，還可以是多媒體動畫，還可以加入使用者互動和資料，這是它曾經很流行的原因，這種格式名為swf，flash是對它的統稱。這種格式在網頁中已經很少使用了，它的很多優秀特性，可以用HTML5取代。swf檔案中衍生出一種影片格式flv，它是一種流媒體影片格式，由於它有檔案容量小，可以邊下載，邊觀看等優點，目前廣泛應用在影片網站中。
一、點陣圖
點陣圖也叫點陣圖，是由一個個的方形的畫素點排列在一起拼接而成的，點陣圖在放大時，影象會失真。下面講的5種影象都屬於點陣圖。
1、psd
psd是photoshop的專用格式，UI設計師使用photoshop設計效果圖，最後會將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，而且保留了圖層、透明和半透明等圖片資訊，所以這種圖片格式的容量相對來說是很大的，前端工程師使用這種格式的效果圖來切圖製作網頁，但是網頁中不會使用這個格式的圖片，它的作用一是儲存圖片的原始資料，二是方便圖片的修改。
2、jpg
jpg是一種有失真壓縮格式，壓縮效率高，容量相對來說最小，網路傳輸速度快，它不能存為透明背景，在網頁中應用最廣，一般在不需要透明背景的時候就使用這種圖片。
3、gif
gif是一種無失真壓縮格式的圖片，最多隻有256種顏色，顏色豐富的圖片轉化為這種格式會顏色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的影象，如果邊緣輪廓是曲線的，會產生鋸齒，它還可以儲存為動畫格式。
4、png
png的目的是為了代替gif圖片，無失真壓縮，背景可以是透明或者半透明的，透明影象邊緣光滑，沒有鋸齒，網頁中需要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也可以包含圖層資訊。firework是另外一款可以和photoshop相比的影象處理軟體。也有少量的UI設計師使用這種軟體來設計網頁效果圖，他們設計的效果圖就是帶圖層的png格式的，碰到這種設計師，如果我們習慣了photoshop切圖，可以將帶圖層的png效果圖轉化成psd圖片再處理。
5、webp
它是由谷歌於2010年推出的新一代圖片格式，在壓縮方面比當前jpg格式更優越，在質量相同的情況下，WebP格式影象的體積要比jpg格式影象小40%，不過這種圖片還沒有得到廣泛的瀏覽器支援，僅在Chrome和Opera上支援，在其他瀏覽器上需要安裝外掛才可以顯示，目前還沒有大規模使用。
二、向量圖
向量圖和點陣圖組成影象的原理不同，它的影象輪廓是由函式曲線生成的，當放大影象時，實際的原理就是將曲線乘以一個倍數，影象可以輕易地放大，而且不會出現畫素塊，影象邊緣也不會出現鋸齒。
1、svg
svg是一種向量二維圖形格式，它是基於xml標記語言描述的，可以透過任何文字編輯器建立。它的優點是檔案容量小，放大不失真，而且背景也可以是透明的。目前大量使用這種格式來製作網頁圖示或者網頁地圖，由於它是向量的，所以在不同終端螢幕上(pc、手機)都有很好的顯示效果。
2、flash
flash是一種向量動畫檔案格式，曾經在網路上風靡一時，如今已逐漸退出歷史舞臺，原因是它的技術更新跟不上發展，這種格式既可以是靜態的圖形，還可以是多媒體動畫，還可以加入使用者互動和資料，這是它曾經很流行的原因，這種格式名為swf，flash是對它的統稱。這種格式在網頁中已經很少使用了，它的很多優秀特性，可以用HTML5取代。swf檔案中衍生出一種影片格式flv，它是一種流媒體影片格式，由於它有檔案容量小，可以邊下載，邊觀看等優點，目前廣泛應用在影片網站中。