制作網(wǎng)頁常見圖片格式及特性介紹

  作為前端開發(fā)人員，了解一些常見的圖片格式是必不可少的，接下來就簡單地介紹一些常見的圖片格式，方便日后查閱。圖片是網(wǎng)頁制作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，了解這些特性可以方便我們在制作網(wǎng)頁時選取合適的圖片格式。常見的圖片格式及一些特性如下：

1. psd

photoshop的專用格式，網(wǎng)頁上一般是不用這種格式的，它一般被用來輔助我們做網(wǎng)頁，ui設計師給我們的就是這種格式的圖片。

優(yōu)點：完整保存圖像的信息，包括未壓縮的圖像數(shù)據(jù)，圖層，透明等信息，方便圖像的編輯。

缺點：應用范圍窄，圖片容量相對比較大。

2. jpg

網(wǎng)頁制作及日常使用最普遍的圖像格式，如果網(wǎng)頁中不需要透明背景，一般就會用這種圖。

優(yōu)點：圖像壓縮率高，圖像容量相對最小

缺點：有損壓縮，圖像會丟失數(shù)據(jù)而失真，不支持透明背景，不能制作成動畫。

3.gif

制作網(wǎng)頁小動畫的常用圖像格式，比如平時經(jīng)常發(fā)的動態(tài)的表情一般都是gif格式的。

優(yōu)點：無損壓縮，圖像容量小，可以制作成動畫，支持透明背景。

缺點：圖像色彩范圍最多只有256色，不能保存為色彩豐富的圖像，不支持半透明，支持透明圖像但是圖像邊緣有鋸齒，如下圖所示：

4. png

網(wǎng)頁制作及日常使用比較普遍的圖像格式，如果能支持動畫則它完全可以取代gif。

優(yōu)點：無損壓縮，圖像容量小，支持透明背景和半透明背景，透明圖像的邊緣是光滑的，這是和gif相比它的一大優(yōu)點，如下圖所示：

缺點：不能制作成動畫。

5. webp

將要取代jpg的圖像格式。

優(yōu)點：和jpg格式相同，但是容量相對比jpg還要小。

缺點：和jpg格式相同，但是目前只有極少數(shù)的瀏覽器支持，像一些主流的瀏覽器谷歌，火狐，IE等都不支持這種格式。

接下來說一下和上面圖片實現(xiàn)原理不同的另一種類型的圖片。上面介紹的5中圖像都屬于位圖。位圖，也叫點陣圖，是由一個個的方形的像素點排列在一起拼接而成的，位圖在放大時，圖像會失真。

矢量圖和位圖的成像原理不同，它的圖像輪廓是由函數(shù)曲線生成的，當放大圖像時。實際的原理就是將曲線乘以一個倍數(shù)，圖像可以輕易地放大，而且不出現(xiàn)像素塊，圖像邊緣也不會出現(xiàn)鋸齒。一句話說就是位圖放大會失真，矢量圖放大后不會失真。下面介紹一些常見的矢量圖格式。

1. svg

目前選的網(wǎng)頁矢量圖格式。

優(yōu)點：圖像容量小，圖像放大不失真，支持透明背景和半透明色彩，圖像邊緣光滑。

缺點：色彩不夠豐富。

2. flash

即將退出歷史舞臺的重量級網(wǎng)頁矢量圖格式，注意它的后綴是.swf并不是.flash，而且想要在網(wǎng)頁中插入flash圖片時需要用embed元素而不是img元素，即使在網(wǎng)頁中插入了，只有瀏覽器安裝了相應的插件才能夠顯示，

優(yōu)點：圖像容量小，圖像放大不失真，支持透明和半透明色彩，圖像邊緣光滑，還可以制作動畫，可編寫交互，以前的一些網(wǎng)頁直接就是用flash寫的。

缺點：不支持搜索引擎，比如說用百度搜索某個flash格式的圖片根本搜不到它，運行慢，瀏覽器需要裝插件才能支持。

總結：

在網(wǎng)頁制作中，如何選擇合適的圖片格式呢？

1. 使用大幅面圖片時，如果要使用不透明背景時，選jpg圖片，因為它的容量相對最小；如果要使用透明或半透明背景的圖片時，就使用png圖片。

2.使用小幅面圖片或圖標圖片時，如果圖片含多種顏色，可以使用gif或png圖片；如果圖片的色彩很單一，而且要求有很好的顯示效果放大不失真，可以使用svg圖片；如果要求圖片是動畫的，可以使用gif。

標題名稱：制作網(wǎng)頁常見圖片格式及特性介紹
分享網(wǎng)址：http://m.kartarina.com/news17/315217.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站設計、域名注冊、品牌網(wǎng)站設計、建站公司、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)