前端圖片優化小記

我的感受對於前端優化，尤爲是圖片優化方面瞭解很少，趁着週末閱讀了幾篇關於這方面的文章，收穫滿滿，在這裏作一個簡單的小結。

參考文章：

• 圖片延遲加載方案-by 齊修
• 圖片較多的網站，如淘寶京東、美麗說花瓣、QQ空間、百度圖片等都採用哪些技術優化圖片展現？-by 秦墨魚
• 圖片延遲加載策略(JavaScript)-by Ice_shou
• 網站性能優化之圖片優化

前端頁面須要展現的圖片較多時，根據具體的場景的不一樣有不一樣的解決方案：

圖片優化方案：
1.使用base64編碼
2.圖片延遲加載
3.使用css、iconfont、svg代替普通圖片
4.選擇正確的圖片格式
5.選擇正確的圖片尺寸

1.使用base64編碼

使用場景：從淘寶首頁來看，使用base64的圖片，除了上圖的二維碼(8K)，其餘大小基本維持在2K如下，主要應用在各類小logo的展現（小背景圖/小gif也適用，做爲對iconfont的補充，下文會提到）。值得關注的一點是，這裏多數logo類型是image/webp。WebP具備更優的圖像數據壓縮算法，能使圖片體積更小(關於WebP的介紹)。

使用方式：

data:[<mediatype>][;base64],<data>

正確的姿式是使用css將圖片做爲背景,這樣無須發送額外的http請求，並且圖片數據可以隨着外部樣式表被緩存：

.logo {
    background-image:url(data:image/png;base64,sadfasdfsd);
}

2.圖片延遲加載

當頁面圖片較多時，一次加載所有圖片會極大下降頁面加載速度，而且消耗鉅額流量，對移動端來講簡直就是災難，圖片延遲加載要作到的就是儘量只加載用戶須要看到的圖片，避免沒必要要的圖片請求。

加載單張圖片

<!-- default.jpg是默認圖片，大小不能過大，5kb如下 -->
![](default.jpg)</img>

//加載圖片代碼

var img = document.getElementById("img");
//oImg用來判斷trueSrc指向的資源是否爲空。
//若是oImg不能正常加載，不修改img.src，使用默認圖片；
var oImg = new Image;
oImg.src = img.trueSrc;
oImg.onload = function() {
  img.src = oImg.src;
  oImg = null;
};

使用第三方庫 lazySizes

lazySizes-Demo

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

強大之處：

原生js，不依賴於jquery/zepto
自動監測可能發生變化的lazyload節點，不須要額外初始化
支持響應式圖片srcset
性能高，改善SEO

舉例：

<!-- 引入文件 -->
<script src="lazysizes.min.js" async=""></script>

<!-- 非響應式: -->
![](image.jpg)
<!-- 響應式: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

3.使用css、iconfont、svg代替普通圖片

• 能用css樣式解決的不要使用圖片
• 頁面中有各類小圖標時，能夠選擇使用iconfont：矢量圖標字體。
  • 可以減小沒必要要的http請求，字體文件加載成功後可以直接渲染圖標；
  • 自己是字體，適用font-size等文字效果；
  • 兼容性較好；
     (附：阿里巴巴矢量圖標庫)
• svg矢量圖標：支持縮放等操做，一張圖適用多種場景，無須準備多套圖，兼容性較好；

4.使用正確的圖片格式

詳情請移步：網站性能優化之圖片優化----mata

5.使用正確的圖片尺寸

這裏須要用到img標籤的srcset屬性

以知乎爲例，上圖右邊的廣告圖img標籤使用了srcset屬性， 用於適配不一樣的屏幕：在屏幕密度爲1x的時候使用src指向的圖片；屏幕密度爲2x的時候使用srcset指向的圖片。不一樣的屏幕都能得到最佳的圖片效果。