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

Vultr 發(fā)布于2019-08-01 14:54 / 2135人閱讀

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

warn: 這是一篇沒有一張圖片的講圖片的文章

1. 圖片格式

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

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

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

2. 圖片大小

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

3. 圖片的載入方式

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

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

4 background和sprit

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