經常使用的圖片格式

經常使用圖片格式

圖片是網頁製做中很重要的素材，圖片有不一樣的格式，每種格式都有本身的特性，瞭解這些特效，能夠方便咱們在製做網頁時選取適合的圖片格式，圖片格式及特性以下：

 

一、psd 

psd是photoshop的專用格式，UI設計師使用photoshop設計效果圖，最後會將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，並且保留了圖層、透明和半透明等圖片信息，因此這種圖片格式的容量相對來講是很大的，前端工程師使用這種格式的效果圖來切圖製做網頁，可是網頁中不會使用這個格式的圖片，它的做用一是保存圖片的原始數據，二是方便圖片的修改。

 

二、jpg 

jpg是一種有損壓縮格式，壓縮效率高，容量相對來講最小，網絡傳輸速度快，它不能存爲透明背景，在網頁中應用最廣，通常在不須要透明背景的時候就使用這種圖片。

 

三、gif 

gif是一種無損壓縮格式的圖片，最多隻有256種顏色，顏色豐富的圖片轉化爲這種格式會顏色失真。它的背景能夠是透明的，但不能是半透明的，透明背景中的圖像，若是邊緣輪廓是曲線的，會產生鋸齒，它還能夠保存爲動畫格式。

 

四、png 

png的目的是爲了代替gif圖片，無損壓縮，背景能夠是透明或者半透明的，透明圖像邊緣光滑，沒有鋸齒，網頁中須要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也能夠包含圖層信息。firework是另一款能夠和photoshop相比的圖像處理軟件。也有少許的UI設計師使用這種軟件來設計網頁效果圖，他們設計的效果圖就是帶圖層的png格式的，碰到這種設計師，若是咱們習慣了photoshop切圖，能夠將帶圖層的png效果圖轉化成psd圖片再處理。

 

五、webp 

它是由谷歌於2010年推出的新一代圖片格式，在壓縮方面比當前jpg格式更優越，在質量相同的狀況下，WebP格式圖像的體積要比jpg格式圖像小40%，不過這種圖片尚未獲得普遍的瀏覽器支持，僅在Chrome和Opera上支持，在其餘瀏覽器上須要安裝插件才能夠顯示，目前尚未大規模使用。

 

位圖和矢量圖 

位圖也叫點陣圖，是由一個個的方形的像素點排列在一塊兒拼接而成的，位圖在放大時，圖像會失真。上面講的5種圖像都屬於位圖。

矢量圖和位圖組成圖像的原理不一樣，它的圖像輪廓是由函數曲線生成的，當放大圖像時，實際的原理就是將曲線乘以一個倍數，圖像能夠輕易地放大，並且不會出現像素塊，圖像邊緣也不會出現鋸齒。

 

svg 

svg是一種矢量二維圖形格式，它是基於xml標記語言描述的，能夠經過任何文本編輯器建立。它的優勢是文件容量小，放大不失真，並且背景也能夠是透明的。目前大量使用這種格式來製做網頁圖標或者網頁地圖，因爲它是矢量的，因此在不一樣終端屏幕上(pc、手機)都有很好的顯示效果。缺點是顏色單一.

 

flash 

flash是一種矢量動畫文件格式，曾經在網絡上風靡一時，現在已逐漸退出歷史舞臺，緣由是它的技術更新跟不上發展，這種格式既能夠是靜態的圖形，還能夠是多媒體動畫，還能夠加入用戶交互和數據，這是它曾經很流行的緣由，這種格式名爲swf，flash是對它的統稱。這種格式在網頁中已經不多使用了，它的不少優秀特性，能夠用HTML5取代。swf文件中衍生出一種視頻格式flv，它是一種流媒體視頻格式，因爲它有文件容量小，能夠邊下載，邊觀看等優勢，目前普遍應用在視頻網站中。

 

總結 

在網頁製做中，如何選擇合適的圖片格式呢？

一、網頁製做中，若是要使用不透明背景的圖片，就使用jpg圖片；若是要使用透明或者半透明背景的圖片，就使用png圖片；

二、製做網頁圖標時候，若是圖標含多種顏色，可使用gif或png圖片；若是圖標是單色，並且要求有很好的顯示效果，可使用svg；若是是動畫圖標，可使用gif。