您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁設(shè)計(jì)技巧之JPG圖片優(yōu)化壓縮

大家都知道,影響網(wǎng)頁打開速度很大一部分因素在于圖片,而網(wǎng)頁圖片又大多為jpg格式圖片,本文將介紹網(wǎng)頁設(shè)計(jì)技巧之jpg的優(yōu)化壓縮。

當(dāng)人們討論圖像優(yōu)化時(shí),他們只注意到一些流行軟件提供的那幾個(gè)僅有的參數(shù)調(diào)節(jié)工具,例如“質(zhì)量”滑塊,顏色數(shù)調(diào)板,抖動(dòng)等。此外,少數(shù)專門的軟件,如OptiPNG和JPEGtran,設(shè)法壓縮一些多余的數(shù)據(jù)來優(yōu)化圖像。所有這些都是非常有名的工具,它們?yōu)榫W(wǎng)頁開發(fā)者和設(shè)計(jì)師提供簡(jiǎn)單直接的方法來優(yōu)化圖像。

在本文中,我們會(huì)向您展示一種不同的方法來優(yōu)化圖像,這種方法是源于“圖像數(shù)據(jù)在不同圖片格式中的儲(chǔ)存原理”。我們從JPEG格式開始,這里有個(gè)基礎(chǔ)技術(shù)稱“8像素柵格” (原文:eight-pixel grid )

 eight-pixel grid

就如你已知的,JPEG圖像由一系列8px × 8px區(qū)塊組成,當(dāng)您吧JPEG的圖像質(zhì)量調(diào)的太低的時(shí)候,這些區(qū)塊尤其明顯。這些東西如何幫助我們優(yōu)化我們的圖像呢?請(qǐng)觀察下面的例子:

 

32×32 px, 圖片質(zhì)量:10(PS中),396 bytes

兩個(gè)白色小方塊都是8×8 px。雖然都是低質(zhì)量,但右下角看起來失真更加的嚴(yán)重了(正如您預(yù)料的一樣),而左上角的卻非常的干凈。這是怎么回事?要回答這個(gè)問題,我們需要看看這個(gè)襯在網(wǎng)格下的圖像:

正如你看到的,左上角的小方塊正好對(duì)齊在“eight-pixel grid”,這樣就確保小方塊保持是銳利。

當(dāng)保存的時(shí)候,圖片會(huì)被分成許多的8×8 px的區(qū)塊,而軟件是對(duì)每一個(gè)區(qū)塊進(jìn)行獨(dú)立優(yōu)化的。由于右下方的方塊并不匹配這些區(qū)塊(也就是這個(gè)方塊跨越了幾個(gè)區(qū)塊,正好落于區(qū)塊的交接線上),優(yōu)化器在尋找索引的時(shí)候就會(huì)在黑色和白色之間尋找平衡(在JPEG里,每一個(gè)8×8 px的區(qū)塊都是依據(jù)正弦算法來進(jìn)行編碼的

原句:in JPEG, each 8×8 block is encoded as a sine wave)。這就解釋了失真的原因了。許多專門的JPEG優(yōu)化軟件都有選擇性優(yōu)化的功能,它能根據(jù)圖像的不同區(qū)域設(shè)置不同的優(yōu)化質(zhì)量,以達(dá)到保留更多圖像信息的目的。

這項(xiàng)技術(shù)對(duì)在保存含有有矩形圖形的圖片時(shí)尤其有效。我們一起來看看在實(shí)際中是怎樣應(yīng)用的:

13.51 KB.

12.65 KB.

在第一個(gè)圖像里,微波爐的位置是隨機(jī)的,在保存第二個(gè)文件之前,我們把圖像按照eight-pixel grid來對(duì)齊。質(zhì)量一樣都設(shè)置在55。讓我們把圖像放大看看(紅線標(biāo)示出區(qū)塊的邊界)

正如你看到的一樣,我們只是調(diào)整好圖片的位置就已經(jīng)縮小了1kb的空間。當(dāng)然,我們也把圖片變得“干凈”了!

優(yōu)化顏色

這項(xiàng)技術(shù)相當(dāng)復(fù)雜而且僅適用于某些類型的圖像,不過我們會(huì)繼續(xù)下去,我們只是學(xué)習(xí)它的道理。

 首先,我們需要知道JPEG使用哪一種顏色模式。大多數(shù)的圖片格式都是使用RGB顏色模式,但JPEG格式也可以是YcbCr,這是一種廣泛用于電視的顏色模式。RGB類似于HSV模式(大多數(shù)設(shè)計(jì)師都熟悉HSV模式)。HSV由三部分組成,色彩(H),純度(S),明度(V)。其中在這里最重要的就是明度(也稱為亮度),優(yōu)化圖像的時(shí)候通常是壓縮顏色通道,但盡可能保持高亮的亮度通道,因?yàn)槿藗儗?duì)它最為敏感。Photoshop有一個(gè)叫Lab的顏色模式,這有助于我們對(duì)圖像做出預(yù)處理,以便使JPEG優(yōu)化有更好的效果。

我們繼續(xù)使用微波爐來作為我們的例子。在微波爐的門上有一層很小的網(wǎng)紋,這是一個(gè)很好的例子來演示我們的優(yōu)化顏色方法。經(jīng)過一個(gè)簡(jiǎn)單的壓縮后,圖像質(zhì)量調(diào)節(jié)到55,文件體積是64.39KB。

990×405 px, 圖像質(zhì)量: 55 (PS中), 64.39 KB.

瀏覽大圖

在Photoshop中打開上面的大圖,然后轉(zhuǎn)換成Lab模式:圖像>>圖像>>Lab顏色。

Lab模式與HSV或YcbCr非常接近,但不完全相同。亮度通道包含了圖像里的亮度信息。A通道顯示了圖像包含了多少的紅色和綠色信息,而B通道則控制圖像的黃色和藍(lán)色部分。盡管有些區(qū)別,但這個(gè)顏色模式使我們避免了很多多余的顏色信息。

轉(zhuǎn)到通道面板,查看A通道和B通道,這時(shí)候我們很明顯能夠看到網(wǎng)紋的紋理,并且我們能看到它是由三種不同亮度的色塊組成的。

我們繼續(xù)做一些顏色上的優(yōu)化,為了保留原來的文件,先復(fù)制一份,這樣在一個(gè)獨(dú)立的窗口里編輯會(huì)非常有用。我們的目的在兩個(gè)顏色通道里是光滑這些顆粒狀的紋理。這樣就能有更多簡(jiǎn)化的數(shù)據(jù)來讓優(yōu)化器處理了。你可能會(huì)奇怪為什么我們選擇這樣的一塊區(qū)域(微波爐的門)來處理呢?很簡(jiǎn)單,因?yàn)檫@個(gè)部分是由黑色像素和橙色像素相間而成的。黑色意味著0亮度,這個(gè)信息已經(jīng)被保留在了亮度通道里了。所以~如果我們?cè)陬伾ǖ览飳⑦@個(gè)區(qū)域完全變?yōu)槌壬?,我們將不?huì)損失任何的信息。因?yàn)榱炼韧ǖ罌Q定了那些像素應(yīng)該是黑色的,而在這樣的紋理上,純黑色和暗橙色則顯得十分的含糊。(這里的意思大概是在亮度通道中的對(duì)比更強(qiáng)一些,容易看清楚)

轉(zhuǎn)換到A通道,單獨(dú)選擇每一區(qū)塊,為每個(gè)區(qū)塊分別應(yīng)用:濾鏡>>雜色>>中間值,半徑應(yīng)該盡可能的小(直到紋理消失為止),這樣不會(huì)損失太多的眩光效果。在此圖中,第1區(qū)塊半徑應(yīng)調(diào)節(jié)成4,第2區(qū)塊為2,然后第3區(qū)塊調(diào)節(jié)成4?,F(xiàn)在,這個(gè)門看起來應(yīng)該是這樣的:

 

現(xiàn)在,圖片的飽和度比較低,我們需要去改善它。為了使顏色的變化能夠?qū)崟r(shí)地顯示出來,所以這里我們復(fù)制一個(gè)活動(dòng)窗口:窗口>>排列>>新建窗口。在新的窗口里,點(diǎn)擊Lab通道查看圖片,現(xiàn)在你的工作界面應(yīng)該像下面這樣了:

右邊的是原始的圖像,左邊的是復(fù)制出來的副本,底下的是工作現(xiàn)在的工作空間。

在A通道里把三個(gè)區(qū)塊都選擇上,打開色階窗口(Ctrl+L 或 圖像>>調(diào)整>>色階)。將中間的滑塊向左邊移動(dòng),這樣副本里的微波爐的顏色就和原始的圖像非常接近了(這里我把中間的滑塊移到1.08的位置)。

正如你所見,我們又減少了5 KB的大?。ㄖ笆?4.39 KB)。雖然這項(xiàng)技巧看似非常得復(fù)雜麻煩,但是它僅需要你用上一分鐘就能完成:轉(zhuǎn)換到Lab顏色模式,選擇顏色通道里的不同部分應(yīng)用中間值濾鏡,然后做一些飽和度修正。如前面說的一樣,這個(gè)技巧比它的理論更來的有用,我常常使用這個(gè)技巧來調(diào)整一些大型廣告圖片,使他們看起來干凈而銳利。

 常規(guī)的JPEG優(yōu)化技巧

 本文將以以下的JPEG優(yōu)化技巧作為尾聲。

 每次你選擇壓縮圖片的時(shí)候,請(qǐng)仔細(xì)選擇你的壓縮軟件,JPEG標(biāo)準(zhǔn)非常嚴(yán)格的,它只決定如何在轉(zhuǎn)換的時(shí)候減少圖片的體積,而軟件的開發(fā)商卻決定了該怎樣正確利用JPEG優(yōu)化器。(這里的意思大概是每個(gè)軟件的優(yōu)化算法都不同)

例如,有些商家使他們的軟件做出做大程度的優(yōu)化,允許您將文件壓縮到很小的體積但依然保持高質(zhì)量的設(shè)置,而photoshop則保存出來一個(gè)比這個(gè)大了一倍的文件。不要依賴這樣的軟件,每個(gè)軟件都有他們的價(jià)值觀來決定哪些信息是有用的,他們會(huì)根據(jù)這些標(biāo)準(zhǔn)來設(shè)定他們的優(yōu)化算法。

 唯一的判定標(biāo)準(zhǔn)是圖像的質(zhì)量和圖像大小之間的比。如果你在Photoshop中保存一個(gè)質(zhì)量55到60的文件,它可能跟在其他軟件里把質(zhì)量設(shè)置在80的時(shí)候輸出的質(zhì)量和體積差不多。

不要保存質(zhì)量為100的圖片。這個(gè)并不是最高質(zhì)量的圖片,只是一個(gè)數(shù)值上的優(yōu)化底線,最終你會(huì)得到一個(gè)不合理的大文件。事實(shí)上把質(zhì)量設(shè)置在95以上就已經(jīng)足以防止丟失信息了。

記住,當(dāng)你在Photoshop中把質(zhì)量設(shè)置低于50的時(shí)候,它就會(huì)執(zhí)行另一個(gè)叫做“降色采樣(原文:color down-sampling)”的優(yōu)化算法,它會(huì)在8個(gè)像素周圍平均采樣,這樣會(huì)在邊緣產(chǎn)生雜色:

48×48 px, 圖像質(zhì)量: 50 (PS中), 530 bytes.

48×48 px, 圖像質(zhì)量: 51 (PS中), 484 bytes.

因此,如果圖片很小而且對(duì)比很大,建議在Photoshop中不要設(shè)置質(zhì)量低于51。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1035.html
網(wǎng)頁設(shè)計(jì)教程之游戲質(zhì)感導(dǎo)航制作
網(wǎng)頁設(shè)計(jì)技巧之png圖片優(yōu)化壓縮
圖趣網(wǎng)微信
建議反饋
×