網(wǎng)頁(yè)設計中圖片格式的選擇技巧發(fā)布者：本站     時(shí)間：2022-02-18 10:02:48

網(wǎng)頁(yè)設計中，切圖輸出是指設計師將手邊繪制完成的原始圖稿轉換成網(wǎng)頁(yè)用的圖片格式、并交由下一位人員網(wǎng)頁(yè)排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節省下載時(shí)間、有效的減少服務(wù)器的負擔。

以設計師最常用的 photoshop 以及 Illustrator 為例，都提供了「儲存為網(wǎng)頁(yè)用…」的功能。與默認的存盤(pán)模式不同，在這個(gè)模式中，軟件提供了仿真圖文件輸出的質(zhì)量調整、檔案大小控制等針對網(wǎng)頁(yè)圖文件需求的選項：

相 信許多人都知道網(wǎng)頁(yè)設計中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇 GIF 后的輸出結果看起來(lái)變得很糟，于是 PNG (24)似乎突然間風(fēng)行了起來(lái)，不論圖檔尺寸是不是因此多了好幾倍。

網(wǎng)頁(yè)設計中圖片格式的選擇技巧,PS教程,

由 于舊型計算機系統以及文件系統的限制，計算機檔案文件名與擴展名被規定為 8.3 的格式，因此 JPEG 的附檔名被縮寫(xiě)為 .JPG。JPEG可以說(shuō)是人們最熟悉的圖檔格式了，相信在數字相機普及的現在，幾乎每臺數字相機、照相手機都可以(甚至只能)輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮(lossy compression)的圖檔格式，也就是說(shuō)使用者每次進(jìn)行 JPEG 的存檔動(dòng)作后，圖檔的內容都會(huì )遭到破壞，這個(gè)特性在肉眼辨識下并不明顯，但卻可以有效的降低圖檔的檔案大小。

就如這些使用 JPEG 的設備一樣，JPEG 非常適合作為儲存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺(jué)：而反過(guò)來(lái)說(shuō) JPEG 并不適合用來(lái)儲存線(xiàn)條圖、圖標或文字等等有清晰邊緣的圖片

多次重復進(jìn)行 JPEG 的圖檔的儲存將會(huì )永久性地破壞圖片中的細節。

GIF

Gif 在許多特性與表現上都與 JPEG 有著(zhù)相對的特性。GIF 使用無(wú)損壓縮格式(Lossless Compression)，但卻限制了色彩表現能力、能夠有效地節省檔案尺寸。GIF 只擁有 8 位的顏色深度信息，所謂的 8 位是指 2 的 8 次方也就是 256 色，當你的圖片中出現的色彩在 256 色以?xún)葧r(shí)，使用 GIF 可以得到相當好的輸出質(zhì)量、同時(shí)兼顧了檔案大小。因此 GIF 非常適合用來(lái)表現圖標、 UI接口、線(xiàn)條插畫(huà)、文字等部分的輸出。

另外 GIF 同時(shí)還支持透明背景、以及動(dòng)畫(huà)圖檔格式，并且幾乎不用擔心支持性的問(wèn)題：幾乎 100% 的瀏覽器都支持它。

由于 JPEG 與 GIF 有著(zhù)如此不同的特性，因此我們可以很輕易的選擇何時(shí)該用哪一種格式來(lái)輸出我們需要的圖檔。

當圖片擁有豐富的色彩時(shí)，并且沒(méi)有明顯銳利反差的邊緣線(xiàn)條時(shí)，選擇 JPEG 可以得到最好的輸出結果，像是照片就是最好的例子：

網(wǎng)頁(yè)設計中圖片格式的選擇技巧,PS教程,

(左圖：Photoshop 輸出 JPEG 默認值：品質(zhì)：高，壓縮質(zhì)量 60%、優(yōu)化輸出。右圖：Photoshop 輸出 GIF 默認值：256色、擴散性混色)

當圖片是擁有明確邊緣的線(xiàn)條圖、沒(méi)有使用太多色彩、甚至可能需要透明背景時(shí)，GIF 是很完美的選擇，檔案小、畫(huà)質(zhì)又精美。

網(wǎng)頁(yè)設計中圖片格式的選擇技巧,PS教程,

(上圖：Photoshop 輸出 GIF：64色、擴散性混色。下圖：Photoshop 輸出 JPEG 默認值：品質(zhì)：高，壓縮質(zhì)量 60%、優(yōu)化輸出)

PNG

PNG 最初的開(kāi)發(fā)目的是為了作為 GIF 的替代方案的，作為做新開(kāi)發(fā)的影像傳輸文件格式，PNG 同樣使用了無(wú)損壓縮格式，事實(shí)上 PNG 的開(kāi)發(fā)就是因為 GIF 所使用的無(wú)損壓縮格式專(zhuān)利問(wèn)題而誕生的。

PNG 分為 PNG-8 以及 PNG-24 兩種格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達 160 萬(wàn)個(gè)色彩。

雖 然 PNG 不支持動(dòng)畫(huà)，但是 PNG-24 支持了Alpha 透明效果，這可以說(shuō)是 PNG-24 最令人眼睛一亮的地方了。也就是說(shuō)使用 PNG 輸出圖檔時(shí)，可以有效的支持不同的透明度效果了。這對網(wǎng)頁(yè)設計師來(lái)說(shuō)無(wú)疑是一個(gè)好消息，像這張圖片其實(shí)是使用了三張 PNG-24 的圖片在網(wǎng)頁(yè)中排版出來(lái)的效果：

網(wǎng)頁(yè)設計中圖片格式的選擇技巧,PS教程,

在 大部分的情況下，設計師必須根據圖片需求來(lái)選擇不同的圖檔格式，并且對其做適當的調整。雖然 PNG-24 看起來(lái)很完美，但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問(wèn)題，雖然現在幾乎大部分的瀏覽器都支持了 PNG-24 格式，但不幸的是 IE6 是不支持透明 PNG 圖檔的，現在依然有相當的使用者在使用 IE6 或更早的版本，雖然比例會(huì )越來(lái)越少，但是設計師多少必須將其考慮其內，是否考慮使用 GIF 替代，或是在程序端透過(guò) script 的方式來(lái)支持透明 PNG 格式。