個(gè)人感覺對(duì)于前端優(yōu)化，尤其是圖片優(yōu)化方面了解不多，趁著周末閱讀了幾篇關(guān)于這方面的文章，收獲滿滿，在這里做一個(gè)簡單的小結(jié)。
參考文章：
- 圖片延遲加載方案-by 齊修
- 圖片較多的網(wǎng)站，如淘寶京東、美麗說花瓣、QQ空間、百度圖片等都采用哪些技術(shù)優(yōu)化圖片展示？-by 秦墨魚
- 圖片延遲加載策略(JavaScript)-by Ice_shou
- 網(wǎng)站性能優(yōu)化之圖片優(yōu)化
前端頁面需要展示的圖片較多時(shí)，根據(jù)具體的場景的不同有不同的解決方案：
圖片優(yōu)化方案：
1.使用base64編碼
2.圖片延遲加載
3.使用css、iconfont、svg代替普通圖片
4.選擇正確的圖片格式
5.選擇正確的圖片尺寸
1.使用base64編碼
使用場景：從淘寶首頁來看，使用base64的圖片，除了上圖的二維碼(8K)，其他大小基本維持在2K以下，主要應(yīng)用在各種小logo的展示（小背景圖/小gif也適用，作為對(duì)iconfont的補(bǔ)充，下文會(huì)提到）。值得關(guān)注的一點(diǎn)是，這里多數(shù)logo類型是image/webp。WebP具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能使圖片體積更小(關(guān)于WebP的介紹)。
使用方式：
data:[<mediatype>][;base64],<data>
正確的姿勢(shì)是使用css將圖片作為背景,這樣無須發(fā)送額外的http請(qǐng)求，而且圖片數(shù)據(jù)能夠隨著外部樣式表被緩存：
.logo {
background-image:url(data:image/png;base64,sadfasdfsd);
}
2.圖片延遲加載
當(dāng)頁面圖片較多時(shí)，一次加載全部圖片會(huì)極大降低頁面加載速度，并且消耗巨額流量，對(duì)移動(dòng)端來說簡直就是災(zāi)難，圖片延遲加載要做到的就是盡可能只加載用戶需要看到的圖片，避免不必要的圖片請(qǐng)求。
加載單張圖片
<!-- default.jpg是默認(rèn)圖片，大小不能過大，5kb以下 -->
</img>
//加載圖片代碼
var img = document.getElementById("img");
//oImg用來判斷trueSrc指向的資源是否為空。
//如果oImg不能正常加載，不修改img.src，使用默認(rèn)圖片；
var oImg = new Image;
oImg.src = img.trueSrc;
oImg.onload = function() {
img.src = oImg.src;
oImg = null;
};
使用第三方庫 lazySizes
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.
強(qiáng)大之處：
原生js，不依賴于jquery/zepto
自動(dòng)監(jiān)測可能發(fā)生變化的lazyload節(jié)點(diǎn)，不需要額外初始化
支持響應(yīng)式圖片srcset
性能高，改善SEO
舉例：
<!-- 引入文件 -->
<script src="lazysizes.min.js" async=""></script>
<!-- 非響應(yīng)式: -->
<!-- 響應(yīng)式: -->
<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樣式解決的不要使用圖片
- 頁面中有各種小圖標(biāo)時(shí)，可以選擇使用iconfont：矢量圖標(biāo)字體。
- 能夠減少不必要的http請(qǐng)求，字體文件加載成功后能夠直接渲染圖標(biāo)；
- 本身是字體，適用font-size等文字效果；
- 兼容性較好；
(附：阿里巴巴矢量圖標(biāo)庫)
- svg矢量圖標(biāo)：支持縮放等操作，一張圖適用多種場景，無須準(zhǔn)備多套圖，兼容性較好；
4.使用正確的圖片格式
詳情請(qǐng)移步：網(wǎng)站性能優(yōu)化之圖片優(yōu)化----mata
5.使用正確的圖片尺寸
這里需要用到img標(biāo)簽的srcset屬性
以知乎為例，上圖右邊的廣告圖img標(biāo)簽使用了srcset屬性，
用于適配不同的屏幕：在屏幕密度為1x的時(shí)候使用src指向的圖片；屏幕密度為2x的時(shí)候使用srcset指向的圖片。不同的屏幕都能獲得最佳的圖片效果。
