前端優化之圖片優化

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

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

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

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

• ## 1、降低圖片的大小

首先我們目前常用的圖片格式有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的神站

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

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

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

如果想查看更多的話，就去devices

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

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

ps：![](bgimg-320.jpg)或![](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

VUE懶加載插件

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