• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 圖片格式與設(shè)計(jì)那點(diǎn)事兒

圖片格式與設(shè)計(jì)那點(diǎn)事兒

奈薇網(wǎng)站建設(shè) 于2019-06-29 19:15發(fā)表 閱讀次數(shù) 2293次

第一次寫(xiě)技術(shù)博客，有不盡如人意的地方，還請(qǐng)見(jiàn)諒和指正。 　　為什么想整理這方面的類(lèi)容，我覺(jué)得就像油畫(huà)家要了解他的顏料和畫(huà)布、雕塑家要了解他的石材一樣，作為網(wǎng)頁(yè)設(shè)計(jì)師也應(yīng)該對(duì)圖片格式的特性有一定了解，這樣才能更好的表達(dá)你的創(chuàng)意和想法。 　　除此之外，我們?cè)谄綍r(shí)工作中也會(huì)遇到許多與圖片格式相關(guān)的問(wèn)題。比如設(shè)計(jì)師會(huì)奇怪為什么有些頁(yè)面的產(chǎn)出物總是沒(méi)法達(dá)到設(shè)計(jì)稿那樣的品質(zhì)和效果，什么樣的設(shè)計(jì)才更適合Web頁(yè)面；頁(yè)面重構(gòu)師和前端工程師則想知道在切圖的時(shí)候應(yīng)采用什么圖片格式、如何進(jìn)行參數(shù)設(shè)置才能達(dá)到品質(zhì)和性能的最優(yōu)化。 　　有時(shí)候我們可能會(huì)因?yàn)橐粡埜袷讲徽_的圖片而導(dǎo)致設(shè)計(jì)品質(zhì)的下降以及頁(yè)面性能的降低。了解圖片格式的特性就是為解答這些困惑從而讓我們?cè)O(shè)計(jì)的產(chǎn)品更好、更快。 　　本文主要包括以下幾方面內(nèi)容： 　　1、基本概念 　　矢量圖與位圖有損壓縮與無(wú)損壓縮 　　2、實(shí)際應(yīng)用 　　什么時(shí)候應(yīng)該使用PNG什么時(shí)候應(yīng)該使用JPG總結(jié) 　　3、思考與實(shí)踐 　　什么樣的設(shè)計(jì)更適合Web頁(yè)面？我們還可以做些什么？ 　　4、附錄-Photoshop中各種參數(shù)的含義及設(shè)置技巧 　　1、基本概念 　　要了解圖片格式的特性，首先得從一些基本概念開(kāi)始。這部分內(nèi)容讀起來(lái)可能會(huì)比較枯燥，但如果你耐著性子讀完它，相信會(huì)獲益匪淺。 　　矢量圖與位圖 　　矢量圖-完美的幾何圖形 　　矢量圖是通過(guò)組成圖形的一些基本元素，如點(diǎn)、線、面，邊框，填充色等信息通過(guò)計(jì)算的方式來(lái)顯示圖形的。就好比我們?cè)趲缀螌W(xué)里面描述一個(gè)圓可以通過(guò)它的圓心位置和半徑來(lái)描述，當(dāng)然還可以通過(guò)邊框的粗細(xì)、顏色以及填充的顏色等數(shù)據(jù)去描述它的樣式。而電腦在顯示的時(shí)候則通過(guò)這些數(shù)據(jù)去繪制出我們定義的圖像。 　　矢量圖的優(yōu)點(diǎn)在于文件相對(duì)較小，并且放大縮小不會(huì)失真。缺點(diǎn)則是這些完美的幾何圖形很難表現(xiàn)自然度高的寫(xiě)實(shí)圖像。 　　需要強(qiáng)調(diào)說(shuō)明的是我們?cè)趙eb頁(yè)面上所使用的圖像都是位圖，即便有些稱(chēng)為矢量圖形（如矢量icon等）也是指通過(guò)矢量工具進(jìn)行繪制然后再轉(zhuǎn)成位圖格式在web上使用的（區(qū)別于像素繪制的圖形）。 　　位圖-神奇的拼圖 　　位圖又叫像素圖或柵格圖，它是通過(guò)記錄圖像中每一個(gè)點(diǎn)的顏色、深度、透明度等信息來(lái)存儲(chǔ)和顯示圖像。一張位圖就好比一幅大的拼圖，只不過(guò)每個(gè)拼塊都是一個(gè)純色的像素點(diǎn)，當(dāng)我們把這些不同顏色的像素點(diǎn)按照一定規(guī)律排列在一起的時(shí)候，就形成了我們所看到的圖像。所以當(dāng)我們放大一幅像素圖時(shí)，能看到這些拼片一樣的像素點(diǎn)（如下圖）。 　　位圖的優(yōu)點(diǎn)是利于顯示色彩層次豐富的寫(xiě)實(shí)圖像。缺點(diǎn)則是文件大小較大，放大和縮小圖像會(huì)失真。 　　盡管我們?cè)趙eb頁(yè)面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過(guò)記錄像素點(diǎn)的數(shù)據(jù)來(lái)保存和顯示圖像，但這些不同格式的圖像在記錄這些數(shù)據(jù)時(shí)的方式卻不一樣，這就是涉及到有損壓縮和無(wú)損壓縮的區(qū)別。 　　有損壓縮與無(wú)損壓縮 　　有損壓縮-你看到的不一定是真實(shí)的 　　按照我的理解有損壓縮就是在存儲(chǔ)圖像的時(shí)候并不完全真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息，它會(huì)根據(jù)人眼觀察現(xiàn)實(shí)世界的特性（人眼對(duì)光線的敏感度比對(duì)顏色的敏感度要高，生物實(shí)驗(yàn)證明當(dāng)顏色缺失時(shí)人腦會(huì)利用與附近最接近的顏色來(lái)自動(dòng)填補(bǔ)缺失的顏色）對(duì)圖像數(shù)據(jù)進(jìn)行處理，去掉那些圖像上會(huì)被人眼忽略的細(xì)節(jié)，然后使用附近的顏色通過(guò)漸變或其他形式進(jìn)行填充。這樣既能大大降低圖像信息的數(shù)據(jù)量，又不會(huì)影響圖像的還原效果。 　　JPG是我們最常見(jiàn)的采用有損壓縮對(duì)圖像信息進(jìn)行處理的圖片格式。JPG在存儲(chǔ)圖像時(shí)會(huì)把圖像分解成8*8像素的柵格（如上圖），然后對(duì)每個(gè)柵格的數(shù)據(jù)進(jìn)行壓縮處理，當(dāng)我們放大一幅圖像的時(shí)候，就會(huì)發(fā)現(xiàn)這些8*8像素柵格中很多細(xì)節(jié)信息被去除，而通過(guò)一些特殊算法用附近的顏色進(jìn)行填充（為了讓大家看得更清楚我將圖像的壓縮比率調(diào)到很低）。這也是為什么我們用JPG存儲(chǔ)圖像有時(shí)會(huì)產(chǎn)生塊狀模糊的原因。 　　無(wú)損壓縮-最精確的拼圖 　　相對(duì)有損壓縮而言無(wú)損壓縮則會(huì)真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息，但為了壓縮圖像文件的大小會(huì)采取一些特殊的算法。無(wú)損壓縮的壓縮原理是先判斷圖像上哪些區(qū)域的顏色是相同的，哪些是不同的，然后把這些相同的數(shù)據(jù)信息進(jìn)行壓縮記錄，（例如一片藍(lán)色的天空之需要記錄起點(diǎn)和終點(diǎn)的位置就可以了），而把不同的數(shù)據(jù)另外保存（例如天空上的白云和漸變等數(shù)據(jù)）。 　　PNG是我們最常見(jiàn)的一種采用無(wú)損壓縮的圖片格式。無(wú)損壓縮在存儲(chǔ)圖像前會(huì)先判斷圖像上哪些地方是相同的哪些地方是不同的，為此需要對(duì)圖像上所有出現(xiàn)的顏色進(jìn)行索引（如上圖），我們把稱(chēng)這些顏色稱(chēng)為索引色。索引色就好比繪制這幅圖像的“調(diào)色版”，PNG在顯示圖像的時(shí)候則會(huì)用“調(diào)色版”上的這些顏色去填充相應(yīng)的位置。 　　這里大家可能會(huì)疑惑既然PNG采用的是無(wú)損壓縮為什么我們保存的PNG格式圖片還會(huì)有失真呢？這是因?yàn)闊o(wú)損壓縮只是說(shuō)它的壓縮方式會(huì)盡可能真實(shí)的還原圖像，但從它的壓縮原理我們可以知道它是通過(guò)索引圖像上相同區(qū)域的顏色進(jìn)行壓縮和還原的，這就意味著只有在圖像上出現(xiàn)的顏色數(shù)量小于我們可以保存的顏色數(shù)量時(shí)，我們才能真實(shí)的記錄和還原圖像，否則就會(huì)丟失一些圖像信息（PNG8最多只能索引256種顏色，所以對(duì)于顏色較多的圖像不能真實(shí)還原；PNG24則可以保存1600多萬(wàn)種顏色，基本能夠真實(shí)還原我們?nèi)祟?lèi)肉眼所可以分別的所有顏色；PNG格式最多可以保存48位顏色通道）。而對(duì)于有損壓縮來(lái)說(shuō)，不管圖像上的顏色多少，都會(huì)損失圖像信息。 　　JPG和PNG 　　關(guān)于JPG和PNG的基本信息介紹這里就不贅述了，有興趣詳細(xì)了解的同學(xué)可以去這里：什么是JPG、什么是PNG。另外這里我們也不對(duì)GIF進(jìn)行討論，是因?yàn)镻NG就是為取代GIF而生的，而且PNG的壓縮算法也要優(yōu)于GIF，所以只要不是需要?jiǎng)赢?huà)效果的地方強(qiáng)烈建議都采用PNG格式圖片。 　　這里我們不妨把JPG和PNG的一些特性進(jìn)行一個(gè)簡(jiǎn)單對(duì)比： 　　格式壓縮模式交錯(cuò)支持透明支持動(dòng)畫(huà)支持 　　JPG有損壓縮支持不支持不支持 　　PNG無(wú)損壓縮支持支持不支持 　　JPG的特性 　　1、支持?jǐn)z影圖像或?qū)憣?shí)圖像的高級(jí)壓縮，并且可利用壓縮比例控制圖像文件大小。 　　2、有損壓縮會(huì)使圖像數(shù)據(jù)質(zhì)量下降，并且在編輯和重新保存JPG格式圖像時(shí)，這種下降損失會(huì)累積。 　　3、JPG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。 　　PNG的特性 　　1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。 　　2、PNG用來(lái)存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲(chǔ)多到16位的α通道數(shù)據(jù)。 　　3、對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無(wú)損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁(yè)面上。 　　PNG8與PNG24 　　提到PNG格式就不得不提到PNG8和PNG24，這種叫法并非官方定義，不過(guò)由于普遍使用已經(jīng)被大家廣泛接受了。通過(guò)前面的介紹我們知道PNG采用無(wú)損壓縮是通過(guò)索引色去存儲(chǔ)和還原圖像的，PNG8和PNG24后面的數(shù)字則是代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬(wàn)色。 　　不僅如此，PNG8還支持1位的布爾透明通道，所謂布爾透明指的是要么完全透明要么完全不透明。而PNG24則支持8位（256階）的alpha通道透明，也就是說(shuō)可以存儲(chǔ)從完全透明到完全不透明一共256個(gè)層級(jí)的透明度（即所謂的半透明）。 　　格式最高支持色彩通道索引色編輯支持透明支持 　　PNG8256色支持支持布爾透明 　　PNG24約1600萬(wàn)色不支持支持8位（256階）alpha透明 　　可能通過(guò)以上特性的對(duì)比大家還不能很直觀的理解在實(shí)際應(yīng)用中到底因該選擇什么格式的圖片文件，我們不妨結(jié)合上面的基本概念通過(guò)幾個(gè)例子去給大家說(shuō)明。

圖片格式與設(shè)計(jì)那點(diǎn)事兒相關(guān)標(biāo)簽：制作網(wǎng)頁(yè)，網(wǎng)站注冊(cè)，企業(yè)建站，網(wǎng)站制作

相關(guān)熱點(diǎn)推薦

2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計(jì)的三個(gè) 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺(jué)元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺(jué)識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁(yè)改版 web設(shè)計(jì)師可以走得更 專(zhuān)業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷(xiāo)的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談 網(wǎng)頁(yè)設(shè)計(jì)：如何確定網(wǎng)站

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專(zhuān)業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶