資源描述：
《設(shè)計師必須了解的圖片優(yōu)化技巧》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、設(shè)計師必須了解的圖片優(yōu)化技巧 前言：該文收集了前輩們的一些關(guān)于圖片優(yōu)化的技巧，在此收攏到一起，對于各個方法的優(yōu)化原理做了一些研究，希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。 騰訊財付通設(shè)計中心Jia：提到圖片，我們不得不從位圖開始說起，位圖圖像(bitmap)，也稱為點(diǎn)陣圖像或繪制圖像，是由稱作像素(圖片元素)的單個點(diǎn)組成的。這些點(diǎn)可以進(jìn)行不同的排列和染色以構(gòu)成一副圖片。當(dāng)放大位圖時，可以看見賴以構(gòu)成整個圖像的無數(shù)單個方塊?！ 〕Ｒ姷母袷街蠮PG、PNG、GIF亦屬于位圖，所以它們的數(shù)據(jù)結(jié)構(gòu)大致相同，只是每一種圖片格式都有不同
2、的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個共同點(diǎn)，都是圍繞著每個像素顏色值來下手，具體如何進(jìn)行優(yōu)化呢? 下面來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法： 原理與優(yōu)化 JPG是一種對彩色或灰階之類連續(xù)色調(diào)圖形作壓縮和解壓縮的標(biāo)準(zhǔn).這個標(biāo)準(zhǔn)是由ISO/IECJTC1/SC29WG10所訂定?！ 嚎s算法為正、反離散余弦轉(zhuǎn)換，如下圖： 反離散余弦轉(zhuǎn)換即把整個流程反轉(zhuǎn)?！ ∵@里的8X8像素區(qū)塊是我們JPG優(yōu)化方法的重點(diǎn)，在之后會涉及到取樣、區(qū)塊量化、掃描的步驟，然而取樣、區(qū)塊量化這兩個步驟將是導(dǎo)致圖像失真的過程，也是我們優(yōu)化工
3、作所涉及到核心部分?！ ∪樱骸 ∵@里所提到的可以很好的解釋到下面JPG優(yōu)化方法中的色彩優(yōu)化; JPG將不同的色彩當(dāng)作獨(dú)立的成份，因此各個成份可以被視為一個灰階影像來處理，如果各個顏色成份間沒有關(guān)聯(lián)性時.便可以將壓縮的效果處理得最好，因此把紅(R)、綠(G)、藍(lán)(B)的成份轉(zhuǎn)換成：亮度(Luminance)(Y)、色度(Chrominance)(Cb和Cr)，使得各項(xiàng)沒有關(guān)聯(lián)的成份： Y=++ Cb=-+ Cr= 由于人的視力系統(tǒng)對色度的敏銳度不高，因此以YCbCr色度的方式來表示可以再做一次作取樣(Subsampling)來
4、減低信息量： 4:4:4格式代表YCbCr原來完整的信息，可以再次取樣以4:2:2或4:2:0格式來表達(dá);4:2:2格式將原本的信息量減少為三分之二，而4:2:0格式則可以將信息三減少為一半。雖然色度的信息量減少了.但對人的視覺神經(jīng)而言卻僅僅感受到微小的差別而已?！ ^(qū)塊量化： 為了說明執(zhí)行離散余弦轉(zhuǎn)換(DCT)的影響，我們將以自一張圖去下的8×8區(qū)塊的亮度資料轉(zhuǎn)換成符合DCT運(yùn)算范圍內(nèi)的系數(shù)表： 低頻部分包含了區(qū)塊的大部分能量，而對視覺較不敏感的高頻部分，則通常只含有較低的能量?！ 〗酉聛韺α炼认禂?shù)做量化處理的矩陣系數(shù)表： 在亮
5、度系數(shù)的量化方面每個DCT系數(shù)除以相對的量化矩陣的值，在四舍五入后得到如下的量化后DCT系數(shù)(例如-80/16=-5)： 注意量化后區(qū)塊高頻部份出現(xiàn)許多零值，代表人類視覺系統(tǒng)對高頻部份并不敏感。由于四舍五入的部份并不能在解碼時重現(xiàn)，因此這個步驟將是個失真的過程。 掃描： 區(qū)塊在量化之后，只有低頻的部分有非零值，為了進(jìn)一步地減少儲存空間的大小，盡可能地將零值放在一起，使得處理時能以幾個零來表示而非個別的處理每個零，因此運(yùn)用了如下圖的方式做斜向掃描： 這種斜向掃描的掃描線乃是沿著空間頻率大小增加的方向作掃描的，使得許多的零可以被串接在
6、一起，以達(dá)到更好的效果。 了解上述3個流程后，后續(xù)我們做JPG優(yōu)化的時候會更得心應(yīng)手了，如何處理顏色，如何減少顏色數(shù)值而卻又最少的減少圖片失真的比率?！ 〗酉聛頌榇蠹医榻B下JPG常用的幾種優(yōu)化方法： 8像素柵格 如下2副圖片所示，圖片為32X32，白色方塊寬高為8X8： 正如大家看到的，左上角的小方塊正好對齊在"8像素柵格"，這樣就確保小方塊保持是銳利。當(dāng)保存的時候，圖片會被分成許多的8×8px的區(qū)塊，而軟件是對每一個區(qū)塊進(jìn)行獨(dú)立優(yōu)化的。由于右下方的方塊并不匹配這些區(qū)塊(也就是這個方塊跨越了幾個區(qū)塊，正好落于區(qū)塊的交接線上)，優(yōu)化
7、器在尋找索引的時候就會在黑色和白色之間尋找平衡，即添加了雜色。 示例： 不仔細(xì)看可能發(fā)現(xiàn)不了，第二幅圖片中盒子的黑子蓋子左邊超出的區(qū)域、99數(shù)字超出的多余像素均已刪除，元下移了一個像素，3個很簡單的操作便可減少約1K，做到這一步，大家肯定會考慮一個問題，難道每次做圖的時候都要拉著么輔助線不麻煩么? 其實(shí)，這里只是為了做一個精確的示范，如果應(yīng)用到工作中，我們大可將8X8的輔助方格改為16X16或者32X32?！ D片質(zhì)量 不要保存質(zhì)量為100的圖片。這個并不是最高質(zhì)量的圖片，只是一個數(shù)值上的優(yōu)化底線，最終你會得到一個不合理的大文件。
8、事實(shí)上把質(zhì)量設(shè)置在95以上就已經(jīng)足以防止丟失信息了?！ ≡谫|(zhì)量上有個分水嶺，這就是我們通常建議JPG質(zhì)量最好是在60左右的原因。當(dāng)在Photoshop中把質(zhì)量設(shè)置低于51的時候，它就會執(zhí)行另一
