常用的圖片格式
阿新 • • 發佈：2018-08-31
ali ott 點陣 網頁 for 如何 tex 矢量動畫 nbsp
常用圖片格式
圖片是網頁制作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，了解這些特效，可以方便我們在制作網頁時選取適合的圖片格式，圖片格式及特性如下：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上支持，在其他瀏覽器上需要安裝插件才可以顯示，目前還沒有大規模使用。
位圖和矢量圖 位圖也叫點陣圖，是由一個個的方形的像素點排列在一起拼接而成的，位圖在放大時，圖像會失真。上面講的5種圖像都屬於位圖。 矢量圖和位圖組成圖像的原理不同，它的圖像輪廓是由函數曲線生成的，當放大圖像時，實際的原理就是將曲線乘以一個倍數，圖像可以輕易地放大，而且不會出現像素塊，圖像邊緣也不會出現鋸齒。
svg svg是一種矢量二維圖形格式，它是基於xml標記語言描述的，可以通過任何文本編輯器創建。它的優點是文件容量小，放大不失真，而且背景也可以是透明的。目前大量使用這種格式來制作網頁圖標或者網頁地圖，由於它是矢量的，所以在不同終端屏幕上(pc、手機)都有很好的顯示效果。缺點是顏色單一.
flash flash是一種矢量動畫文件格式，曾經在網絡上風靡一時，如今已逐漸退出歷史舞臺，原因是它的技術更新跟不上發展，這種格式既可以是靜態的圖形，還可以是多媒體動畫，還可以加入用戶交互和數據，這是它曾經很流行的原因，這種格式名為swf，flash是對它的統稱。這種格式在網頁中已經很少使用了，它的很多優秀特性，可以用HTML5取代。swf文件中衍生出一種視頻格式flv，它是一種流媒體視頻格式，由於它有文件容量小，可以邊下載，邊觀看等優點，目前廣泛應用在視頻網站中。
總結 在網頁制作中，如何選擇合適的圖片格式呢？ 1、網頁制作中，如果要使用不透明背景的圖片，就使用jpg圖片；如果要使用透明或者半透明背景的圖片，就使用png圖片； 2、制作網頁圖標時候，如果圖標含多種顏色，可以使用gif或png圖片；如果圖標是單色，而且要求有很好的顯示效果，可以使用svg；如果是動畫圖標，可以使用gif。
常用的圖片格式