web前端壓縮圖片方法——加快頁面載入速度
阿新 • • 發佈：2019-01-01
對於web前端頁面開發，圖片是一個很重要的組成部分。為了達到圖文並茂的效果，我們希望頁面中能有更多的圖片，但是從頁面載入的速度講，過多過大的圖片都會拖慢載入速度。於是對於圖片的壓縮處理就顯得特別重要。下面分享一下我目前使用的幾個處理方法。
1.七牛伺服器提供的壓縮圖片的方法
我們公司APP目前使用的圖片和視訊檔案都存在七牛伺服器上，作為目前國內知名的雲端儲存服務商，七牛官方提供了很好的圖片處理API。
一般來講，使用者看到的文字、圖片等都是由運營上傳的，如果運營直接在後臺上傳了一張很大的圖片，那麼前端頁面在載入的時候就會較慢，有可能圖片會有明顯的載入過程，這個時候，就需要我們對圖片進行處理了，比如我們公司的logo圖示，地址是： 點選開啟連結。尺寸是1024*1024，大小是80.7kb，但是我只是需要在微信分享連結中使用這個圖片，根本不需要這麼大尺寸的圖片，那麼就很有必要壓縮一下了，比如在這個圖片的連結地址後面新增引數：?imageView2/2/w/300，就能夠把這張圖片壓縮到300*300，大小為28.9kb。這樣這張圖片的載入速度就會加快很多。
2.使用圖片壓縮軟體
軟體地址：圖片壓縮工具。直接將圖片上傳就可以壓縮圖片，很適合運營用。
3.圖片使用懶載入技術
可使用lazyload.js外掛，對於DOM中本來就有的<img>標籤，懶載入沒有任何問題，但是在我做的一個專案中，專案中的圖片是用underscore.js模板載入的，實際除錯發現lazyload.js未實現圖片懶載入，這個問題後續解決了再寫上來。如果有童鞋知道怎麼解決的，請不吝賜教。