前端優化之圖片優化

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

每一個前端網站都有可能引入不少的圖片來達到酷炫或者展現的效果，有人會問？爲何非要用圖片，由於有些技術上達不到的效果展現，只能用圖片來代替，好比淘寶天貓京東這些商城的酷炫的創意廣告圖
固然咱們也會用到不少的圖標圖片，圖片越多請求次數越多，形成延遲的可能性也就越大

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

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

• ## 一、下降圖片的大小

首先咱們目前經常使用的圖片格式有png,gif,jpg等，png又分png24和png8,關於圖片的的知識點，我給你們兩個網址你們能夠了解一下，對於圖片格式講的很詳細
http://www.cnblogs.com/xiangism/p/5311314.html
http://www.cnblogs.com/pqjzxq/p/5749304.html

咱們的目的是下降圖片的大小kb，有不少方法能夠作，壓縮圖片，選擇更小kb的圖片格式，以達到最優的顯示效果

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

如今百度一下不少在線壓縮圖的在線網站，好比TinyPNG:一個壓縮PNG的神站

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

不論是pc仍是移動端，都會有不少不一樣尺寸的圖片，若是你作的是響應式網站和移動端的話，那麼你就更須要考慮圖片尺寸的選擇問題了

移動端的屏幕分辨率和尺寸太多，因此就可能須要不一樣的尺寸加載不一樣尺寸的圖片，這樣就節省了網站的訪問流量，以及頁面渲染的效率
先展現如今設備的分辨率等的圖

若是想查看更多的話，就去devices

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

• ### 能夠經過服務器圖片資源配置命名規則來獲取圖片

ps：![](bgimg-320.jpg)或![](bgimg-480.jpg) 

• 1

• ### 經過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);} }

• 1
• 2
• 3
• 4
• 5
• 6

• ### 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">

• 1
• 2
• 3

src:當設備不支持srcset，sizes屬性時，使用這個圖片
srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點

sizes="[media query] [length], [media query] [length] ... "

• 1

對於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> 

• 1
• 2
• 3
• 4
• 5

• ## 三、減小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; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• ### SVG技術替換圖片
  SVG 是使用 XML 來描述二維圖形和繪圖程序的語言,支持透明，縮放，動畫
  什麼是SVG？(摘自w3cschool)
  SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
  SVG 用來定義用於網絡的基於矢量的圖形
  SVG 使用 XML 格式定義圖形
  SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
  SVG 是萬維網聯盟的標準
  SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

• html5 canvas繪畫圖形

  目前canvas應用不少，它可使用腳本javascript來繪製各類圖表、動畫等
  點擊查看更多html5 canvas

• 四、字體圖庫代替圖標

隨着技術的更新和瀏覽器的更新，字體圖庫去代替一些圖標我認爲仍是極好的，使用字體圖庫你不只能夠改變大小，並且還能夠改變顏色
你們比較熟知的的字體圖庫有不少，這裏就說一個吧，font-awesom,截圖看看他的好處吧

有了他，根本不擔憂圖標的問題了，很簡單的使用，只須要引入以後，按照規則寫html標籤便可

其實我們也能夠自定義我們的圖標選擇，畢竟有的圖標庫咱們用不到這麼多，所以我們能夠自定義我們的字體圖標庫

目前我認爲畢竟好的就是 Iconfont ,最近的幾個react項目，我都在使用這個來定製本身的一些圖標庫，用起來也很簡單
- ##### 一、搜索本身想要的圖標

二、在搜索結果頁找到本身想要的圖標，而後加入購物車

三、找完本身的圖標以後點開購物車，會有一個添加到項目，點擊它，若是你有項目就能夠選擇，若是沒有就建立一個項目，點擊肯定以後便可

四、在我的中心找到本身的項目，選擇方式以後，點擊下載便可使用

使用方式在這裏就很少說了，和font-awesom基本上差很少的

• ## 五、微信小程序怎麼使用字體圖標

直接引入字體也能夠，可是要把字體文件放在服務器上，而且容許跨域的狀況下，在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- */ }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

若是不想放在服務器上，還有一種方法可使用，這個時候咱們須要一個工具來輔助一下 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; }

• 1
• 2
• 3
• 4
• 5
• 6

使用和直接引入字體圖標是同樣的

• ## 六、圖片延遲加載（懶惰加載）（js/lazyload.js）

有個頁面會很大很長不少的圖片素材，這樣所有加載就會變的很慢，所以須要修改一下加載方案，只加載窗口內的圖片，咱們你們瀏覽網站的時候會常常看到會有默認圖，圖片加載成功以後會替換默認圖
好比經常使用的lazyload.js用於圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的，。
- 能有效的提升頁面加載速度
- 有時候能夠幫助減小服務器負載

用法：lazyload.js

VUE懶加載插件

--------------------- 本文來自 龍藎草 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/nyflxp/article/details/79462056?utm_source=copy