web前端優化之圖片優化

龍藎草發表於2017-09-01
Web前端優化

開發前端也有幾年了，一直很忙，課下看書，或者做一些筆記，看看別人的見解，也會做一些筆記記錄，有時間就來刷刷掘金，逛逛技術網站，尷尬的事情是自己沒有認真的總結過一些筆記和知識點，發出來大家共同學習，最近也才開始做一些markdown，後續我會抽時間繼續做這件事，有什麼不對的知識點，麻煩大家指出批評，也算對自己的一個鞏固。

很多的前端開發者都比較關心效能的優化的問題，今天主要講一下圖片優化的見解和總結，可能很多人大神都知道我列出的知識點，那麼開始整理一下圖片優化的筆記吧,可能廢話有點多，語言組織不到位的地方，大家多擔待

每個前端網站都有可能引入很多的圖片來達到酷炫或者展示的效果，有人會問？為什麼非要用圖片，因為有些技術上達不到的效果展示，只能用圖片來代替，比如淘寶天貓京東這些商城的酷炫的創意廣告圖
當然我們也會用到很多的圖示圖片，圖片越多請求次數越多，造成延遲的可能性也就越大

最開始做前端的時候，我都會把實現不了的效果切換成圖片還有一些圖示也會切成圖片，這樣就會降低前端頁面展示的效能，增加頁面資源HTTP的請求，甚至有的頁面存在幾十個img的http請求

總結優化的地方有幾個地方：

  • 1、降低圖片的大小

首先我們目前常用的圖片格式有png,gif,jpg等，png又分png24和png8,關於圖片的的知識點，我給大家兩個網址大家可以瞭解一下，對於圖片格式講的很詳細
www.cnblogs.com/xiangism/p/…
www.cnblogs.com/pqjzxq/p/57…

我們的目的是降低圖片的大小kb，有很多方法可以做，壓縮圖片，選擇更小kb的圖片格式，以達到最優的顯示效果

好多人都推薦一個壓縮圖片的網站---智圖：一個圖片優化平臺
用起來很簡單的

現在百度一下很多線上壓縮圖的線上網站，比如TinyPNG:一個壓縮PNG的神站

  • 2、選擇適當的圖片寬度尺寸（即響應式圖片）

不管是pc還是移動端，都會有很多不同尺寸的圖片，如果你做的是響應式網站和移動端的話，那麼你就更需要考慮圖片尺寸的選擇問題了

移動端的螢幕解析度和尺寸太多，所以就可能需要不同的尺寸載入不同尺寸的圖片，這樣就節省了網站的訪問流量，以及頁面渲染的效率
先展示現在裝置的解析度等的圖

如果想檢視更多的話，就去devices

響應式圖片方式有哪幾種，

  • 可以通過伺服器圖片資源配置命名規則來獲取圖片

    ps：<img src="bgimg-320.jpg" />或<img src="bgimg-480.jpg" />複製程式碼

  • 通過css定義來載入不同的背景bg圖片

    @media only screen and (max-width : 480px) {
  .img {background-image: url(bg-480.jpg);}
}
@media only screen and (max-width : 360px) {
  .img {background-image: url(bg-360.jpg);}
}複製程式碼

  • Img的srcset和sizes的方法

    這兩個img屬性是html5的屬性，有瀏覽器的相容問題
    <img class="img"  src="imgbg-320.jpg"
   srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
   sizes="(max-width: 480px) 480px, 320px">複製程式碼
    src:當裝置不支援srcset，sizes屬性時，使用這個圖片
    srcset指定圖片的地址和對應的圖片質量。sizes用來設定圖片的尺寸零界點
    sizes="[media query] [length], [media query] [length] ... "複製程式碼
    對於srcset和sizes，詳解點選檢視

  • picture標籤實現

    通過媒體查詢的方式，根據頁面寬度（當然也可以新增其他參考項）載入不同圖片，具體picture詳情點選檢視
    <picture>  
  <source srcset="3.jpg" media="(min-width: 320px)">  
  <source srcset="2.jpg" media="(min-width: 480px)">  
  <img srcset="1.jpg">  
</picture>複製程式碼

  • 3、減少HTTP的網路資源請求

  • CSSSprites(背景精靈圖/雪碧圖)

    一種網頁圖片應用處理方式，將一個頁面涉及到的所有零星圖片或者圖示都包含到一張大圖裡面，這樣就只需要載入這個一個圖片，而不是很多個圖片了，這樣就減少了很多http的請求

    如何製作精靈圖？

    自己通過ps製作，或者UI設計師製作的過程中，做好這個精靈圖，注意圖片直接的間隔，以防css操作的時候出現顯示的問題

    怎麼使用精靈圖？

    利用CSS的background-image，background- repeat，background-position的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置
    詳細檢視CSSSprites

  • css和css3製作簡單的圖示和動畫（代替gif圖片）

    隨著技術的發展，css3可以實現的效果越來越多，比如箭頭圖示，三角形，梯形等圖示，或者一些陰影效果，漸變的效果，所以可以用css製作一些簡單的圖示，而且具有多變性
    .sanjiaoxing {
  width: 0;
  height: 0;
  border-top: 2em solid #000;
  border-right: 1.8rem solid transparent;
  border-left: 1.8rem solid transparent;
}複製程式碼

  • SVG技術替換圖片

    SVG 是使用 XML 來描述二維圖形和繪圖程式的語言,支援透明，縮放，動畫
    什麼是SVG？(摘自w3cschool)
    SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
    SVG 用來定義用於網路的基於向量的圖形
    SVG 使用 XML 格式定義圖形
    SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
    SVG 是全球資訊網聯盟的標準
    SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

  • html5 canvas繪畫圖形

    目前canvas應用很多，它可以使用指令碼javascript來繪製各種圖表、動畫等
    點選檢視更多html5 canvas

  • 4、字型相簿代替圖示

隨著技術的更新和瀏覽器的更新，字型相簿去代替一些圖示我認為還是極好的，使用字型相簿你不僅可以改變大小，而且還可以改變顏色
大家比較熟知的的字型相簿有很多，這裡就說一個吧，font-awesom,截圖看看他的好處吧

有了他，根本不擔心圖示的問題了，很簡單的使用，只需要引入之後，按照規則寫html標籤即可

其實我們們也可以自定義我們們的圖示選擇，畢竟有的圖示庫我們用不到這麼多，因此我們們可以自定義我們們的字型圖示庫

目前我認為畢竟好的就是 Iconfont ,最近的幾個react專案，我都在使用這個來定製自己的一些圖示庫，用起來也很簡單

  • 1、搜尋自己想要的圖示

2、在搜尋結果頁找到自己想要的圖示，然後加入購物車

3、找完自己的圖示之後點開購物車，會有一個新增到專案，點選它，如果你有專案就可以選擇，如果沒有就建立一個專案，點選確定之後即可
4、在個人中心找到自己的專案，選擇方式之後，點選下載即可使用

使用方式在這裡就不多說了，和font-awesom基本上差不多的

  • 5、微信小程式怎麼使用字型圖示

直接引入字型也可以，但是要把字型檔案放在伺服器上，並且允許跨域的情況下，在css檔案裡面遠端地址引入字型檔案即可

@font-face {font-family: "iconfont";
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077'); /* IE9*/
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https//examle.com/font/iconfont.woff?t=1494498562077') format('woff'), /* chrome, firefox */
  url('https//examle.com/font/iconfont.ttf?t=1494498562077') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('https//examle.com/font/iconfont.svg?t=1494498562077#iconfont') format('svg'); /* iOS 4.1- */
}複製程式碼

如果不想放在伺服器上，還有一種方法可以使用，這個時候我們需要一個工具來輔助一下 transfonter,將解壓出來的ttf字型檔案轉化成base64格式

生成的檔案裡面替換css裡面的程式碼

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,這裡省略了) format('truetype');
    font-weight: 500;
    font-style: normal;
}複製程式碼

使用和直接引入字型圖示是一樣的

  • 6、圖片延遲載入（懶惰載入）（js/lazyload.js）

有個頁面會很大很長很多的圖片素材，這樣全部載入就會變的很慢，因此需要修改一下載入方案，只載入視窗內的圖片，我們大家瀏覽網站的時候會經常看到會有預設圖，圖片載入成功之後會替換預設圖
比如常用的lazyload.js用於圖片的延遲載入，視口外的圖片會在視窗滾動到它的位置時再進行載入，這是與預載入相反的，。

  • 能有效的提高頁面載入速度
  • 有時候可以幫助減少伺服器負載

用法：lazyload.js

還有一些優化的方式在上一篇文章已經列了，這裡就不多說了

如有沒有說到的地方，麻煩大家指出

後續抽時間會接著做筆記，大家共同學習鞏固分享

前端蝸牛blog傳送：codehtml

相關文章