一、點陣圖
點陣圖也叫點陣圖,是由一個個的方形的畫素點排列在一起拼接而成的,點陣圖在放大時,影象會失真。下面講的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,它是一種流媒體影片格式,由於它有檔案容量小,可以邊下載,邊觀看等優點,目前廣泛應用在影片網站中。