很多的前端開發者都比較關心性能的優化的問題,今天主要講一下圖片優化的見解和總結,可能很多人大神都知道我列出的知識點,那么開始整理一下圖片優化的筆記吧,可能廢話有點多,語言組織不到位的地方,大家多擔待
每個前端網站都有可能引入很多的圖片來達到酷炫或者展示的效果,有人會問?為什么非要用圖片,因為有些技術上達不到的效果展示,只能用圖片來代替,比如淘寶天貓京東這些商城的酷炫的創意廣告圖
當然我們也會用到很多的圖標圖片,圖片越多請求次數越多,造成延遲的可能性也就越大
最開始做前端的時候,我都會把實現不了的效果切換成圖片還有一些圖標
也會切成圖片,這樣就會降低前端頁面展示的性能
,增加頁面資源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:或
- 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
- ## 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; }
- 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
--------------------- 本文來自 龍藎草 的CSDN 博客 ,全文地址請點擊:https://blog.csdn.net/nyflxp/article/details/79462056?utm_source=copy