詳解網站中圖片日常使用以及優化手法

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

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

總的來說，圖片的使用分為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%。

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）下面即可。

代碼實現：

.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

在定義背景屬性的時候，可以分開對單個屬性進行賦值，通常建議使用下面這個屬性，而不是分別使用單個屬性，因為需要鍵入的字母也更少。

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

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的全透明的占位圖片來代替，當然占位圖片也可以是其他的圖片。

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

2.圖片預加載

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

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！