聊聊網(wǎng)頁(yè)中的圖片

Meathill 發(fā)布于2019-08-28 18:18 / 1014人閱讀

摘要：使用的場(chǎng)景多為頁(yè)面內(nèi)容的圖片，較大的頭圖，顏色過(guò)多的圖片。就是頁(yè)面中的背景，并不是內(nèi)容，修飾作用。

warn: 這是一篇沒(méi)有一張圖片的講圖片的文章

1. 圖片格式

通常在網(wǎng)頁(yè)中使用的圖片有三種格式，jpg，png和gif。
jpg是有損壓縮格式，就算你在ps里用100%質(zhì)量保存，保存多次會(huì)產(chǎn)生質(zhì)量損失，而png和gif則不會(huì)。因此如果開(kāi)發(fā)者相對(duì)圖片進(jìn)行微處理，改動(dòng)jpg不是明智的選擇。
png支持透明和半透明，png8不保存alpha半透明通道，而png24可以。但是png24的半透明在IE6下存在兼容性問(wèn)題，所有半透明的部分會(huì)被展現(xiàn)為不透明底色。
gif可以保存動(dòng)畫(huà)，gif也支持透明，而且兼容性很好，支持IE6，但它和png8一樣，透明的邊緣由于沒(méi)有虛化，會(huì)有比較難看的鋸齒。
另外一個(gè)比較炫酷的技術(shù)是base64圖片，就是用base64編碼方式對(duì)圖片進(jìn)行編碼，然后在css的background里載入，如下：

background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

其中data表明用數(shù)據(jù)的方式加載背景圖，img/gif是圖片格式，base64是編碼格式，最后是編碼本身。
base64并沒(méi)有想象中的那么優(yōu)雅，你隨便拿一張圖片轉(zhuǎn)成base64會(huì)大的驚人，從體積上來(lái)講也要大于一般圖片，而且容易阻塞頁(yè)面，圖片不易修改和查看，兼容性還不好（IE7以下）。
關(guān)于base64的利弊查看這里：
base64利弊

2. 圖片大小

jpg作為位圖，對(duì)于復(fù)雜顏色和復(fù)雜結(jié)構(gòu)的圖片有很好的壓縮，類(lèi)似照片或卡通形象，jpg保存下來(lái)要比png和gif硬盤(pán)容量小很多。但如果是簡(jiǎn)單圖形顏色較少，png的表現(xiàn)更好。基于現(xiàn)在頁(yè)面設(shè)計(jì)越來(lái)越扁平，越來(lái)越簡(jiǎn)潔，所以png使用的比例越來(lái)越高，像按鈕，小組件這類(lèi)的基本都由png來(lái)保存，一個(gè)顏色少，二個(gè)質(zhì)量無(wú)存，三個(gè)支持透明。jpg使用的場(chǎng)景多為頁(yè)面內(nèi)容的圖片，較大的頭圖，顏色過(guò)多的圖片。
我個(gè)人的經(jīng)驗(yàn)是，頁(yè)面中的一些大圖盡量控制在100k左右，通過(guò)ps保存jpg的質(zhì)量來(lái)控制，不到100k的可以提高質(zhì)量，大于100K的適當(dāng)降低質(zhì)量。

3. 圖片的載入方式

大家都知道，一個(gè)是html里的img標(biāo)簽，另外一個(gè)是css的background，當(dāng)然canvas也可以加載圖片，而且可以控制每個(gè)像素點(diǎn)的屬性,但是沒(méi)有人會(huì)為了在頁(yè)面中放一張圖片使用canvas。
img標(biāo)簽的圖片可以縮放，所以可以做一些自適應(yīng)效果，比如一個(gè)全屏的背景自適應(yīng)效果，可以通過(guò)在底層絕對(duì)定位一張img，縮放的時(shí)候改變它的尺寸來(lái)實(shí)現(xiàn)。
background的優(yōu)勢(shì)更多比如可以使用sprit，可以重復(fù)背景，控制展現(xiàn)位置，但是它不能縮放圖片，除了使用css3的background-size。
當(dāng)然了，使用img和background也要從語(yǔ)義角度去考量，img里的圖片就是作為html內(nèi)容的圖片，也有利于SEO。background就是頁(yè)面中的背景，并不是內(nèi)容，修飾作用。
img標(biāo)簽有一個(gè)坑，就是空的src標(biāo)簽，這樣：

瀏覽器會(huì)把空的src當(dāng)做頁(yè)面本身，頁(yè)面中所有的資源會(huì)被重新加在一起。

4 background和sprit

作為全局樣式的圖片，還是有必要放在sprit里的。保存sprit有不少工具，也可以自己手動(dòng)處理，手動(dòng)處理的靈活性高一些，可以在做的過(guò)程中調(diào)整圖片的位置。
曾幾何時(shí)我喜歡把sprit做的很極致，中間不留一個(gè)像素的縫隙，后來(lái)發(fā)現(xiàn)這種做法其實(shí)沒(méi)什么必要，節(jié)省這點(diǎn)有可能讓圖片調(diào)整變的很麻煩。
前期盡量做好規(guī)劃，html結(jié)構(gòu)，css repeat，都會(huì)對(duì)sprit圖產(chǎn)生比較大的影響。排布好的sprit圖可以簡(jiǎn)化html結(jié)構(gòu)。
background-color屬性可以透過(guò)png透明的位置，我們可以利用這個(gè)做一些簡(jiǎn)化，比如按鈕上的icon做成透明的png，這樣改變background-color就可以實(shí)現(xiàn)不同的按鈕，而只使用了一張圖片。
background-repeat 可以做無(wú)縫貼圖，這個(gè)很有意思，類(lèi)似馬賽克，或者瓷磚。一些看起來(lái)很炫酷的背景，一些噪點(diǎn)之類(lèi)，你去看其實(shí)只是一張3*3像素的循環(huán)之類(lèi)。