淺析網(wǎng)站圖片格式下的秘密

文字、圖片和色彩被稱為網(wǎng)頁(yè)設(shè)中必不可以的三大元素。我們都知道，文字有字體、字號(hào)、顏色的差別，色彩則以色相、色調(diào)進(jìn)行區(qū)分，而圖片，主要以格式區(qū)分。在網(wǎng)頁(yè)設(shè)計(jì)中合理的利用圖像，選擇適合的圖片格式，不但可以將讓設(shè)計(jì)得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時(shí)間、有效的減少服務(wù)器的負(fù)擔(dān)。下面成都網(wǎng)頁(yè)設(shè)計(jì)公司就來(lái)說(shuō)說(shuō)JPG、GIF、PNG這三種最常用的圖片格式的區(qū)別吧！

GIF的色彩效果最低，不過(guò)體積小，有著極好的壓縮效果，當(dāng)然最重要的是支持動(dòng)畫，并且支持透明效果，雖然這個(gè)透明沒(méi)有PNG的那樣漸變透明的強(qiáng)大。如果你的圖片只有很單調(diào)的色彩，沒(méi)有漸變色，那么選GIF是很合適的。

JPG是數(shù)碼相機(jī)最常用的格式，其特點(diǎn)是色彩還原好，可以在照片不明顯失真的情況下，大幅降低體積，所以體積不很大，缺點(diǎn)是不支持透明。照片類的圖片，例如網(wǎng)站上的Gallery，若要張貼自然風(fēng)景之類，最好都用JPG格式。

最后來(lái)說(shuō)說(shuō)最適合網(wǎng)絡(luò)的圖格式――PNG！它的優(yōu)點(diǎn)是：清晰，無(wú)損壓縮，壓縮比率很高，可漸變透明，幾乎具備了GIF的所有優(yōu)點(diǎn)；缺點(diǎn)是不如JPG的顏色豐富，圖片體積也比JPG略大。但是PNG卻是公認(rèn)的最適合網(wǎng)頁(yè)使用的圖片格式。像百度、Google首頁(yè)的logo就是PNG格式的。

通過(guò)以上的對(duì)比，我們可以發(fā)現(xiàn)：

大小比較：通常地，PNG ≈ JPG > GIF

透明性：PNG > GIF > JPG

色彩豐富程度：JPG > PNG >GIF

兼容程度：GIF ≈ JPG > PNG

綜合以上結(jié)論，在具體實(shí)踐中，我們需要注意的是：

第一，當(dāng)圖片擁有豐富的色彩時(shí)，并且沒(méi)有明顯銳利反差的邊緣線條時(shí)，選擇 JPEG 可以得到最好的輸出結(jié)果。

第二，當(dāng)圖片擁有明確邊緣的線條圖、沒(méi)有使用太多色彩、甚至可能需要透明背景時(shí)，GIF 是好的選擇。

第三，當(dāng)圖片顏色簡(jiǎn)單對(duì)比強(qiáng)烈的則需要采用PNG，選擇PNG格式時(shí)設(shè)計(jì)師必須根據(jù)圖片需求來(lái)選擇不同的圖檔格式，并且對(duì)其做適當(dāng)?shù)恼{(diào)整。還需要注意的就是瀏覽器支持度的問(wèn)題。

另外還有一個(gè)原則就是用于頁(yè)面結(jié)構(gòu)的基本視覺(jué)元素，如容器的背景、按鈕、導(dǎo)航的背景等應(yīng)該盡量用PNG格式進(jìn)行存儲(chǔ)，這樣才能更好的保證設(shè)計(jì)品質(zhì)。而其他一些內(nèi)容元素，如廣告Banner、商品圖片等對(duì)質(zhì)量要求不是特別苛刻的圖片，則可以用JPG去進(jìn)行存儲(chǔ)，這樣可以有效降低文件大小。這些竅門你get到了嗎？

分享文章：淺析網(wǎng)站圖片格式下的秘密
地址分享：http://www.bm7419.com/news35/48885.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、網(wǎng)站建設(shè)、微信小程序、小程序開發(fā)、關(guān)鍵詞優(yōu)化、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)