細說圖片那些事

前言： 最近新到一個團隊，才意識到基礎的薄弱，牛人遍地，仍是好好學習，每天向上。

 

一直都以爲網站優化的重點是圖片，圖片的使用也是博大精深。有必要總結一下圖片的平常使用以及優化手法～

總的來講，圖片的使用分爲background和img兩種，而優化方向來講分爲減小請求，減小大小和清晰度 三個方面

 

一. background和img的區別：

• 平常開發中使用的場景區別：

img是內容部分的東西， background-image是修飾性的東西。

 

• 加載方式的區別：

在網頁加載的過程當中，以css背景圖存在的圖片background-image會等到結構加載完成（網頁的內容所有顯示之後）纔開始加載，

而html中的標籤img是網頁結構（內容）的一部分會在加載結構的過程當中加載，換句話講，網頁會先加載標籤img的內容，再加載背景圖片background-image，若是你用引入了一個很大的圖片，那麼在這個圖片下載完成以前，img後的內容都不會顯示。而若是用css來引入一樣的圖片，網頁結構和內容加載完成以後，纔開始加載背景圖片，不會影響你瀏覽網頁內容。

 

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

1. 圖片內聯 （base 64）          減小http請求

2. 圖片雪碧圖（多張圖片合併）  減小http請求

3. webp     在壓縮方面比 JPEG 格式更優越，並能節省大量的服務器帶寬資源和數據空間。與 JPEG 相同，WebP 也是一種有損壓縮，主要優點在於高效率。在質量相同的狀況下，WebP 格式圖像的體積要比 JPEG 格式圖像小 40%。 

侷限性： 

在開發中，採用向下兼容的方法，若是不支持 webp，則顯示其餘格式

4. svg  

 

 

三. 平常圖片展現主要有如下三種形式 

1.普通圖片

顧名思義，很是普通的圖片，不須要由於屏幕擴張或者縮小改變寬度以及高度， 以京東手機網站爲例，常見於如下佈局

無論在任何手機下面，該圖片都是以100*100的形式展現，對於這種圖片，能夠直接給一個寬度100，高度100，處理起來也很是簡單粗暴

 

 

2.圖片的寬高比

此種常見於響應式網站，如下爲京東手機網站舉例

在iphone5 及320*568的手機上，該圖片顯示的寬度和高度分別以下

 

 在iphone6 即375*667的手機上，該圖片顯示的寬度和高度分別以下

不難看出，上面的寬高比實際上爲同一個數值，這樣既能夠保證該圖片適配屏幕，又不讓圖片變形，由於這種場景，也產生了如下需求

1.列表是響應式的，在不一樣瀏覽器下要自適應寬度高度

2.圖片在自適應中，圖片的長寬比要保持不變

在實際開發中，咱們一般會設置圖片的 寬度爲百分比來知足自適應，不設置高度來知足長寬比不變，可是這樣又會出現一種問題，在圖片沒有加載出來的時候，瀏覽器是沒法計算出圖片的實際尺寸的， 當圖片加載出來後，再把容器撐高，形成頁面抖動

 

優化方案：

1. 首先，按照往例，先上一個知識點

塊級元素（div，p）的padding設置爲百分比的時候，是按照父級塊的寬度來定的，因此由padding（padding-top/padding-bottom）來撐開容器高度，而不是height，保證了容器的寬高比例。圖片在絕對定位於塊級元素（div，p）下面便可。

代碼實現：

 1 .placeholder{
 2     height: 0;
 3     padding-bottom: 56.25%; /* 16:9 */
 4     position: relative;
 5     width: 100%;
 6 }
 7 .placeholder .img{
 8     position: absolute;
 9     left: 0;
10     top: 0;
11     width: 100%;
12     height: 100%;
13 }

 

3.背景圖片

background這個屬性花樣不少，也很雜，常見的有如下幾種

• background-color   
• background-position   
• background-size
• background-repeat
• background-attachment
• background-image

 

在定義背景屬性的時候，能夠分開對單個屬性進行賦值，一般建議使用下面這個屬性，而不是分別使用單個屬性，由於須要鍵入的字母也更少。

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

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

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

2.background-repeat   比較簡單，設置背景圖片是否重複

3.background-size       在響應式佈局中背景圖片上用得比較多的一個屬性

兼容性：

• 安卓4.3- 不支持將background，因此必須單獨申明這個樣式   [因此background-size通常不寫進background中，而是單獨 background-size：]
• 安卓4.3- 不支持contain

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

從上圖能夠看到，contain其實等同於background-size: 100% auto；cover等同background-size: auto 100%。 

可是，若是背景圖像是一張縱向的圖（高>寬），那麼cover應該等同於background-size: 100% auto；contain等同background-size: auto 100%。 

在實際開發中，最經常使用到的值是cover，若是容器已經有了寬高（固然這裏的寬高是指能夠隨着機型變化的），好比全屏，咱們就直接用cover了；而若是容器沒有寬高，那就又回到了第二個問題（圖片的寬高比），咱們可使用圖片或者把設置背景圖的這個容器設置成咱們圖片的寬高比，那樣再使用cover或contain均可以。

 

四. 優化方法：

1. 減小請求

將圖片變成base64內聯圖片， 合併成雪碧圖，

以上2種方法在目前一些流行的自動化構建工具都會自動幫忙生成，使用很是方便

適用對象： 不常常改變的icon小圖標

 

2. 減小大小

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

 

3.提升清晰度

因爲目前的手機高清度愈來愈高，平常開發中使用2倍圖，3倍圖的方法

 

 

常見優化方法：

1.圖片懶加載

優勢：一般應用於圖片比較多的網頁，若是一個頁面圖片比較多，且頁面高度或寬度有好幾屏，頁面初次加載時，只顯示可視區域的圖片，當頁面滾動的時候，圖片進入了可視區域再進行加載，這樣能夠顯著的提升頁面的加載速度，更少的圖片併發請求數也能夠減輕服務器的壓力。

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

原理：將圖片的真實地址緩存在一個自定義的屬性(lazy-src)中，而src地址使用一個1×1的全透明的佔位圖片來代替，固然佔位圖片也能夠是其餘的圖片。

此處可參考我以前寫的博文  http://www.cnblogs.com/beidan/p/5648240.html

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

 

2.圖片預加載

 基於用戶行爲的預加載就是，雖然在用戶看不到的時候加載了，可是，用戶卻有更大或者說很大的機率會看到此圖。

 後續再對這個進行詳細的說明～