[盤點]項目中可以怎么優化圖片

hedzr 發布于2019-08-02 12:07 / 1747人閱讀

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。

看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。

1.前言

每一個開發者在開發項目中，不可避免要和圖片打交道，優化圖片似乎也成了一個必修課。圖片優化也不僅僅是性能上的優化，還要進行體驗上的優化。至于怎么優化圖片，沒有固定的方式，只能具體場景，具體分析，選擇合適的方案。不多說，下面也簡單介紹下自己處理過，了解過的一些方式。如果大家有補充，建議。歡迎在評論區留言，交流學習下。

2.概念用法

‘概念用法’這個詞是自己亂起的，可能不太準確，是因為詞窮了，不知道怎樣形容。總得來說，這部分介紹的處理方式，就是講一下就知道怎么用的方式，不需要怎么放代碼，運行圖等。只需要籠統的介紹一下，大家都會懂的一些方式。

2-1.圖片壓縮

這個沒有隱含的意思，就是把圖片的大小進行壓縮。目前自己用的比較多的兩個壓縮網站是TinyPng和智圖。使用比較方便，品質也基本保持一致。

2-2.base64代替小圖標

一些比較小的圖標，使用 base64 編碼代替可以減少 http 請求。但是有一個缺點就是轉成 base64 后，編碼會比原圖更大，圖片越大，差別就越大。1K左右的圖標，轉碼出來的 base64 大概是 1.1K-2K。如果是 8K 的圖片，轉碼出來的 base64 可能超過10K。就自己項目開發而言，只有小于 4K 的圖標，才會進行轉碼。

2-3.icon-font代替圖標

由于 icon-font 看著是圖片，實際上是字體。

優點：就是在于可以矢量縮放，大小圖標都可以使用，也可以改變顏色，使用也不麻煩。

缺點：需要引入的文件不少(.svg,.ttf,.woff,.eot )。文件大小也比較大。建議是項目的圖標要達到一定量才使用 icon-font，如果是幾個圖標，還是用圖片吧。如果需要引入的圖標多，就建議使用 icon-font。

上面說的 icon-font 由于是字體，所以不支持多色圖標。有了解到，現在 icon-font 可以支持多色圖標了（symbol引用）。只是兼容性不好。

2-4.雪碧圖

雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。

優點：減少了大量的 http 請求。

缺點：背景定位和在移動端適配大小有點麻煩。

除此之外，使用雪碧圖，有兩個個注意地方

1.不要把頁面所有的圖片都合并，比如把 logo 整合會破壞 html 的語義結構。圖像復雜的 banner 也不要合并

2.盡量只把顏色相近的圖標整合在一張圖片上，如果圖片顏色相差太大，合并出來的圖片可能會很大。

2-5.響應式圖片

比如頁面上有一張尺寸是 100*100 的圖片，但是圖片的實際尺寸是 1000*1000 的。這樣的情況建議在多準備一張 100*100 的圖片。不然可能會造成資源浪費。

2-6.混合模式代替變色的圖標

如下例子，比如頁面有這個圖標

在特定情況下會是下面這個顏色。

同一個圖標，在不同的時候是不同的顏色。icon-font 可以通過改變 color 實現。或者用兩張圖片。除了這兩個方法，用 CSS3 的混合模式，一樣可以實現。兩行代碼搞定。

運行效果

展示完 mix-blend-mode，順便提下 background-blend-mode 。用法基本一致，只是 mix-blend-mode 作用于 html 元素的混合模式，background-blend-mode 作用于元素背景的混合模式。

注意事項

1.圖片必須是白底純色圖標

2.現代的瀏覽器，支持這個屬性的瀏覽器

如果圖片是透明純色背景，得到的結果會是這樣

受限篇幅影響，混合模式暫時就介紹這么多，以后發現好玩的再寫文章。有興趣可以看下面的參考資料。

兩行 CSS 代碼實現圖片任意顏色賦色技術

不可思議的顏色混合模式 mix-blend-mode

不可思議的混合模式 background-blend-mode

2-7.簡單圖標使用 CSS 畫

有一些簡單的圖標，可以使用 CSS 代替。比如下面這些

自己而言，項目上畫的最多的就是各種箭頭

優點：矢量縮放，顏色可變，不需要發送請求

缺點：只適合用簡單圖形，1-5行 CSS 代碼可以搞定的才建議用，超過的不建議。想得痛苦，寫也麻煩，花時間也多，效果未必比其它方案好。建議還是圖片 base64，或者 icon-font。

這里就簡單舉個例子，需要知道 css3 還可以畫什么圖形。看參考資料。

純CSS制作的圖形效果

奇妙的 CSS shapes(CSS圖形)

【CSS】用CSS繪制圖標（圖標大全）

3.隱式預加載

1.從這里開始。下面的demo，有些會用到 ecDo 這個庫（自己寫的一個常用函數庫，歡迎star）。之前的文章有介紹過，這里就不再重復。大家不知道的時候點開看下相應的 API ，運行下，調試下就好。

2.為方便展示，下面的demo，除了懶加載，都有在 network 把網速調至了慢速的3G。

有些項目圖片比較多，如果一次性加載，用戶等待時間會過久，可能會造成體驗效果很差，甚至導致用戶流失，很多網站用到的一個體驗優化方式是隱式預加載。

等待首屏加載，在用戶看首屏（第一張大圖）的時候，悄悄的加載其它圖片（這里為了展示效果，在項目上其他的小圖片不應在第一屏）。

這是預加載的圖片

//測試請先清空緩存
window.onload = function () {
    ecDo.loadImg("load-img", function () {
        console.log("加載完畢")
    });
}

注意事項：

1.大概預測，用戶看首屏的時候，很大概率會往下面看。

2.該方式，用戶等待的時間比較短。但是圖片超大，要慎重考慮。因為該方式無法保證用戶在瀏覽的時候，能把下一屏（比如瀏覽第一屏的時候，要加載第二屏）的圖片加載完畢，讓用戶無感知。如果切換的下一屏還沒加載完畢，也可能會影響體驗。

demo:https://github.com/chenhuiYj/...

4.顯式預加載

告訴用戶正在加載，等到加載完了再一次性渲染在頁面上。

顯示預加載進行中

let oP1=document.getElementById("p");
let oDiv=document.getElementById("div");
//測試請先清空緩存
window.onload = function () {
    ecDo.loadImg("load-img", function () {
        oDiv.style.display="block";
        oP1.style.display="none";
    });
}

注意事項：

1.大概預測，用戶看首屏的時候，很大概率會往下面看。

2.該方式好處在于加載完畢之后，就所有圖片都加載完畢了，體驗比較好。如果圖片全部過大，加載時間會比較長，loading 的時間也會很長，會影響體驗。

demo地址：https://github.com/chenhuiYj/...

5.懶加載

這個大家應該很熟悉了，簡單點說就是圖片一開始不加載，當用戶瀏覽到什么位置的時候，相應位置得圖片就加載出來。

window.onload = function () {
    //根據load-img 這個 class 遍歷，元素距離頁面底部 100像素的時候就開始加載，加載錯誤就顯示error.jpg
    ecDo.delayFn(ecDo.lazyLoadImg("load-img", 100, "error.jpg"),100,200);
    window.onscroll = function () {
        ecDo.delayFn(ecDo.lazyLoadImg("load-img", 100, "error.jpg"),100,200);
    }
}

demo:https://github.com/chenhuiYj/...

6.圖片沒加載出來顯示默認圖片

這個例子，當網速比較慢的時候，想要加載的圖片沒有馬上出來。或者圖片路徑錯誤，這個時候頁面可能會出現一部分空白的地方，或者頁面布局會出現錯亂，比較常用的做法是先顯示一張 loading 圖或者是 logo 圖。告訴用戶，這里是圖片，正在加載，體驗上會好很多，比如下面這個例子。

下面也簡單的實現一下。

比如網站上有這樣的圖片

在 network 把網速調至了慢速的3G，以方便調試。

//測試前請先清空緩存
window.onload = function () {
    let oImg=document.getElementsByTagName("img");
    for(let i=0;i

可以看到，一開始顯示的是一張默認圖片，等需要加載的圖片，加載完了之后，再加載需要加載的圖片。（最后一張圖片，是故意把路徑寫錯，所以出來的圖片是之前的圖片）
demo：https://github.com/chenhuiYj/...
7.小結
關于項目上，優化圖片的各種方式，自己用過的，聽過的，大概就在這里了。實現方案，也不敢說是最好。如果大家有更好的想法，建議，歡迎在評論區留言。
-------------------------華麗的分割線--------------------
想了解更多，和我交流，內推職位，請添加我微信。或者關注我的微信公眾號：守候書閣

GPU云服務器云服務器 webrtc怎么實際應用在項目中 js中怎么更換圖片 js中怎么讓圖片旋轉圖片優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53353.html

[盤點]項目中可以怎么優化圖片

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。 1.前言每一個開發者在開發項目中，不可避免要和圖片打交道...

lykops 2019-08-23 13:41 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
前端每周清單年度總結與盤點

摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了...

jackwang 2019-08-22 15:54 評論0 收藏0
前端每周清單半年盤點之 PWA 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

崔曉明 2019-08-20 19:01 評論0 收藏0
王下邀月熊_Chevalier的前端每周清單系列文章索引

摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進行分類，具體內容看這里前端每周清單年度總結與盤點。感謝王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進行分類，具...

2501207950 2019-08-22 14:53 評論0 收藏0