網頁設計中圖片格式的選擇技巧
相信許多人都知道網頁設計中最常用的格式不外乎 JPG、GIF、PNG 等格式,但並非所有的人都知道他們之前的實際差別跟到底何時該選擇何種格式。下面是網頁設計中圖片格式的選擇技巧,一起來學習下吧:
JPEG
由於舊型計算機系統以及文件系統的限制,計算機檔案文件名與擴展名被規定為 8.3 的格式,因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以説是人們最熟悉的圖檔格式了,相信在數字相機普及的現在,幾乎每台數字相機、照相手機都可以(甚至只能)輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮(lossy compression)的圖檔格式,也就是説使用者每次進行 JPEG 的存檔動作後,圖檔的內容都會遭到破壞,這個特性在肉眼辨識下並不明顯,但卻可以有效的降低圖檔的檔案大小。
就如這些使用 JPEG 的設備一樣,JPEG 非常適合作為儲存像素色彩豐富的圖片、例如照片等等,這些圖片即使有些微的失真也不容易輕易的察覺:而反過來説 JPEG 並不適合用來儲存線條圖、圖標或文字等等有清晰邊緣的圖片
多次重複進行 JPEG 的圖檔的儲存將會永久性地破壞圖片中的細節。
GIF
Gif 在許多特性與表現上都與 JPEG 有着相對的特性。GIF 使用無損壓縮格式(Lossless Compression),但卻限制了色彩表現能力、能夠有效地節省檔案尺寸。GIF 只擁有 8 位的顏色深度信息,所謂的 8 位是指 2 的 8 次方也就是 256 色,當你的圖片中出現的色彩在 256 色以內時,使用 GIF 可以得到相當好的輸出質量、同時兼顧了檔案大小。因此 GIF 非常適合用來表現圖標、 UI接口、線條插畫、文字等部分的輸出。
另外 GIF 同時還支持透明背景、以及動畫圖檔格式,並且幾乎不用擔心支持性的問題:幾乎 100% 的瀏覽器都支持它。
由於 JPEG 與 GIF 有着如此不同的特性,因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔。
當圖片擁有豐富的色彩時,並且沒有明顯鋭利反差的邊緣線條時,選擇 JPEG 可以得到最好的輸出結果,像是照片就是最好的例子:
(左圖:Photoshop 輸出 JPEG 默認值:品質:高,壓縮質量 60%、優化輸出。右圖:Photoshop 輸出 GIF 默認值:256色、擴散性混色)
當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時,GIF 是很完美的選擇,檔案小、畫質又精美。
(上圖:Photoshop 輸出 GIF:64色、擴散性混色。下圖:Photoshop 輸出 JPEG 默認值:品質:高,壓縮質量 60%、優化輸出)
PNG
PNG 最初的開發目的是為了作為 GIF 的替代方案的,作為做新開發的影像傳輸文件格式,PNG 同樣使用了無損壓縮格式,事實上 PNG 的開發就是因為 GIF 所使用的無損壓縮格式專利問題而誕生的.。
PNG 分為 PNG-8 以及 PNG-24 兩種格式,PNG-8 的特性很接近 GIF ,支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達 160 萬個色彩。
雖然 PNG 不支持動畫,但是 PNG-24 支持了Alpha 透明效果,這可以説是 PNG-24 最令人眼睛一亮的地方了。也就是説使用 PNG 輸出圖檔時,可以有效的支持不同的透明度效果了。這對網頁設計師來説無疑是一個好消息,像這張圖片其實是使用了三張 PNG-24 的圖片在網頁中排版出來的效果:
在大部分的情況下,設計師必須根據圖片需求來選擇不同的圖檔格式,並且對其做適當的調整。雖然 PNG-24 看起來很完美,但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問題,雖然現在幾乎大部分的瀏覽器都支持了 PNG-24 格式,但不幸的是 IE6 是不支持透明 PNG 圖檔的,現在依然有相當的使用者在使用 IE6 或更早的版本,雖然比例會越來越少,但是設計師多少必須將其考慮其內,是否考慮使用 GIF 替代,或是在程序端透過 script 的方式來支持透明 PNG 格式。
-
淘寶美工的工作是什麼
如果我們從事這個淘寶美工這個職位,如何學習淘寶美工呢,淘寶美工需要學什麼?如何下手呢?電商市場上真正需求什麼樣的淘寶美工設計師呢?下面一起來看看淘寶美工的具體工作要求吧!設計軟件項目內容:淘寶網頁圖片處理軟件:圖形圖像處理軟件PS,矢量繪圖軟件AI,矢量繪圖軟...
-
UI美工設計的職責(18篇)
UI美工設計的職責1職責:1、有藝術美感,但同時理解商業設計和藝術之間的區別,設計視覺效果優秀的網站頁面;2、公司網絡營銷活動的平面設計和素材加工;3、網頁的UI、UE設計,包括網站的佈局、內容的分佈、圖文的搭配、字體及顏色的協調,整個網頁色調的搭配;4、官網網頁...
-
淘寶店鋪如何裝修
對於開淘寶店的人來説,店鋪裝修是一個必不可少的重要步驟。因為第一眼印象非常重要,而淘寶買家的第一眼印象就是店鋪裝修,決定了買家看到店鋪後是否還要繼續逛這個店鋪。淘寶店鋪如何裝修?下面就一起來了解看看吧!1.店鋪風格統一網店設計風格要跟主營的商品相符。比...
-
淘寶美工主圖設計優化要點
淘寶主圖設計優化要點分享給大家!淘寶店鋪想要提高成交轉化率,主圖是核心影響因素,圖片除了要展現賣點外,也要具有一定的視覺效果,才能吸引消費者瀏覽。下面小編就給大家分享主圖設計時應該考慮哪些問題!一、產品是否有獨樹一幟的賣點產品賣點可以從價格優勢,質量以...