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

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

1. psd

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

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

缺點(diǎn)：應(yīng)用范圍窄，圖片容量相對(duì)比較大。

2. jpg

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

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

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

3.gif

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

優(yōu)點(diǎn)：無(wú)損壓縮，圖像容量小，可以制作成動(dòng)畫(huà)，支持透明背景。

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

4. png

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

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

缺點(diǎn)：不能制作成動(dòng)畫(huà)。

5. webp

將要取代jpg的圖像格式。

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

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

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

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

1. svg

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

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

缺點(diǎn)：色彩不夠豐富。

2. flash

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

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

缺點(diǎn)：不支持搜索引擎，比如說(shuō)用百度搜索某個(gè)flash格式的圖片根本搜不到它，運(yùn)行慢，瀏覽器需要裝插件才能支持。

總結(jié)：

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

1. 使用大幅面圖片時(shí)，如果要使用不透明背景時(shí)，選jpg圖片，因?yàn)樗娜萘肯鄬?duì)最?。蝗绻褂猛该骰虬胪该鞅尘暗膱D片時(shí)，就使用png圖片。

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

標(biāo)題名稱：制作網(wǎng)頁(yè)常見(jiàn)圖片格式及特性介紹
分享網(wǎng)址：http://www.muchs.cn/news17/315217.html

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

廣告

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