前言： 最近新到一個團(tuán)隊(duì)，才意識到基礎(chǔ)的薄弱，牛人遍地，還是好好學(xué)習(xí)，天天向上。

一直都覺得網(wǎng)站優(yōu)化的重點(diǎn)是圖片，圖片的使用也是博大精深。有必要總結(jié)一下圖片的日常使用以及優(yōu)化手法～

總的來說，圖片的使用分為background和img兩種，而優(yōu)化方向來說分為減少請求，減少大小和清晰度 三個方面

一. background和img的區(qū)別：

日常開發(fā)中使用的場景區(qū)別：

img是內(nèi)容部分的東西，background-image是修飾性的東西。

加載方式的區(qū)別：

在網(wǎng)頁加載的過程中，以css背景圖存在的圖片background-image會等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載，

而html中的標(biāo)簽img是網(wǎng)頁結(jié)構(gòu)（內(nèi)容）的一部分會在加載結(jié)構(gòu)的過程中加載，換句話講，網(wǎng)頁會先加載標(biāo)簽img的內(nèi)容，再加載背景圖片background-image，如果你用引入了一個很大的圖片，那么在這個圖片下載完成之前，img后的內(nèi)容都不會顯示。而如果用css來引入同樣的圖片，網(wǎng)頁結(jié)構(gòu)和內(nèi)容加載完成之后，才開始加載背景圖片，不會影響你瀏覽網(wǎng)頁內(nèi)容。

二. 平時使用圖片有以下幾種方式：

1. 圖片內(nèi)聯(lián) （base 64）          減少http請求

2. 圖片雪碧圖（多張圖片合并）  減少http請求

3. webp     在壓縮方面比 JPEG 格式更優(yōu)越，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。與 JPEG 相同，WebP 也是一種有損壓縮，主要優(yōu)勢在于高效率。在質(zhì)量相同的情況下，WebP 格式圖像的體積要比 JPEG 格式圖像小 40%。

4. svg  

三. 日常圖片展示主要有以下三種形式

1.普通圖片

顧名思義，非常普通的圖片，不需要因?yàn)槠聊粩U(kuò)張或者縮小改變寬度以及高度， 以京東手機(jī)網(wǎng)站為例，常見于以下布局

不管在任何手機(jī)下面，該圖片都是以100*100的形式展示，對于這種圖片，可以直接給一個寬度100，高度100，處理起來也非常簡單粗暴

2.圖片的寬高比

此種常見于響應(yīng)式網(wǎng)站，以下為京東手機(jī)網(wǎng)站舉例

在iphone5 及320*568的手機(jī)上，該圖片顯示的寬度和高度分別如下

在iphone6 即375*667的手機(jī)上，該圖片顯示的寬度和高度分別如下

不難看出，上面的寬高比實(shí)際上為同一個數(shù)值，這樣既可以保證該圖片適配屏幕，又不讓圖片變形，因?yàn)檫@種場景，也產(chǎn)生了以下需求

1.列表是響應(yīng)式的，在不同瀏覽器下要自適應(yīng)寬度高度

2.圖片在自適應(yīng)中，圖片的長寬比要保持不變

在實(shí)際開發(fā)中，我們通常會設(shè)置圖片的寬度為百分比來滿足自適應(yīng)，不設(shè)置高度來滿足長寬比不變，但是這樣又會出現(xiàn)一種問題，在圖片沒有加載出來的時候，瀏覽器是無法計算出圖片的實(shí)際尺寸的，當(dāng)圖片加載出來后，再把容器撐高，造成頁面抖動 

優(yōu)化方案：

1. 首先，按照往例，先上一個知識點(diǎn)

塊級元素（div，p）的padding設(shè)置為百分比的時候，是按照父級塊的寬度來定的，所以由padding（padding-top/padding-bottom）來撐開容器高度，而不是height，保證了容器的寬高比例。圖片在絕對定位于塊級元素（div，p）下面即可。

代碼實(shí)現(xiàn)：

.placeholder{
 height: 0;
 padding-bottom: 56.25%; /* 16:9 */
 position: relative;
 width: 100%;
}
.placeholder .img{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

3.背景圖片

background這個屬性花樣很多，也很雜，常見的有以下幾種

1. background-color  
2. background-position 
3. background-size
4. background-repeat
5. background-attachment
6. background-image

在定義背景屬性的時候，可以分開對單個屬性進(jìn)行賦值，通常建議使用下面這個屬性，而不是分別使用單個屬性，因?yàn)樾枰I入的字母也更少。

 body{ 
 background: #00FF00 url(bgimage.gif) no-repeat fixed top;
 // background: color url() repeat attachment position
 }

1. background-position 屬性  這個屬性設(shè)置背景原圖像的位置

常見使用的值：順序方面，首先是 x 軸，其次是 y 軸，

2.background-repeat   比較簡單，設(shè)置背景圖片是否重復(fù)

3.background-size       在響應(yīng)式布局中背景圖片上用得比較多的一個屬性

兼容性：

• 安卓4.3- 不支持將background，所以必須單獨(dú)申明這個樣式   [所以background-size一般不寫進(jìn)background中，而是單獨(dú) background-size：]
• 安卓4.3- 不支持contain

常見屬性： auto ，cover，contain， 100%

從上圖可以看到，contain其實(shí)等同于background-size: 100% auto；cover等同background-size: auto 100%。

但是，如果背景圖像是一張縱向的圖（高>寬），那么cover應(yīng)該等同于background-size: 100% auto；contain等同background-size: auto 100%。

在實(shí)際開發(fā)中，最常用到的值是cover，如果容器已經(jīng)有了寬高（當(dāng)然這里的寬高是指可以隨著機(jī)型變化的），比如全屏，我們就直接用cover了；而如果容器沒有寬高，那就又回到了第二個問題（圖片的寬高比），我們可以使用圖片或者把設(shè)置背景圖的這個容器設(shè)置成我們圖片的寬高比，那樣再使用cover或contain都可以。

四. 優(yōu)化方法：

1. 減少請求

將圖片變成base64內(nèi)聯(lián)圖片， 合并成雪碧圖，

以上2種方法在目前一些流行的自動化構(gòu)建工具都會自動幫忙生成，使用非常方便

適用對象： 不經(jīng)常改變的icon小圖標(biāo)

2. 減少大小

壓縮圖片，使用webp格式圖片

3.提高清晰度

由于目前的手機(jī)高清度越來越高，日常開發(fā)中使用2倍圖，3倍圖的方法

常見優(yōu)化方法：

1.圖片懶加載

優(yōu)點(diǎn)：通常應(yīng)用于圖片比較多的網(wǎng)頁，如果一個頁面圖片比較多，且頁面高度或?qū)挾扔泻脦灼?，頁面初次加載時，只顯示可視區(qū)域的圖片，當(dāng)頁面滾動的時候，圖片進(jìn)入了可視區(qū)域再進(jìn)行加載，這樣可以顯著的提高頁面的加載速度，更少的圖片并發(fā)請求數(shù)也可以減輕服務(wù)器的壓力。

懶加載有多種場景，但原理都是一樣的。以下舉例滾動懶加載。

原理：將圖片的真實(shí)地址緩存在一個自定義的屬性(lazy-src)中，而src地址使用一個1×1的全透明的占位圖片來代替，當(dāng)然占位圖片也可以是其他的圖片。

github源碼： https://github.com/beidan/lazeLoadImg

2.圖片預(yù)加載

基于用戶行為的預(yù)加載就是，雖然在用戶看不到的時候加載了，但是，用戶卻有更大或者說很大的概率會看到此圖。

后續(xù)再對這個進(jìn)行詳細(xì)的說明～ 

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論