前端優化之圖片優化


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

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

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

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

  • ## 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) 
  • 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的srcsetsizes的方法
    這兩個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:當設備不支持srcsetsizes屬性時,使用這個圖片
srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點

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

對於srcsetsizes詳解點擊查看
- ### 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
  • ## 3、減少HTTP的網絡資源請求
  • ### CSSSprites(背景精靈圖/雪碧圖)
    一種網頁圖片應用處理方式,將一個頁面涉及到的所有零星圖片或者圖標都包含到一張大圖里面,這樣就只需要加載這個一個圖片,而不是很多個圖片了,這樣就減少了很多http的請求

如何制作精靈圖?

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

怎么使用精靈圖?

利用CSS的background-imagebackground- repeatbackground-position的組合進行背景定位,background-position可以用數字精確的定位出背景圖片的位置
詳細查看CSSSprites
- ### csscss3制作簡單的圖標和動畫(代替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

  • 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- */ }
  • 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

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

  • ## 6、圖片延遲加載(懶惰加載)(js/lazyload.js)

有個頁面會很大很長很多的圖片素材,這樣全部加載就會變的很慢,因此需要修改一下加載方案,只加載窗口內的圖片,我們大家瀏覽網站的時候會經常看到會有默認圖,圖片加載成功之后會替換默認圖
比如常用的lazyload.js用於圖片的延遲加載,視口外的圖片會在窗口滾動到它的位置時再進行加載,這是與預加載相反的,。
- 能有效的提高頁面加載速度
- 有時候可以幫助減少服務器負載

用法:lazyload.js

VUE懶加載插件

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM