這篇文章跟大家分享一個小程式實戰,看看小程式中怎麼進行圖片優化,希望對大家有幫助!
前端的效能最佳化,圖片優化是不可或缺的重要環節,大部分網站頁面的組成都少不了圖片的渲染。尤其在電商類項目,往往存在大量的圖片,如 banner 廣告圖,菜單導航圖,商品列表圖等。圖片載入數量多以及圖片體積過大往往會影響頁面載入速度,造成不良的使用者體驗。 【相關學習推薦:小程式開發教學】
優化方案
基於上述問題的主要問題是圖片數量和圖片體積,所以應該怎麼提高圖片載入速度,提升使用者體驗。其實圖片優化有非常多且優秀的方案,都可以從中藉鑑,最後我們將圖片進行不同方向的整體優化。
使用適當的圖片格式
#目前廣泛應用的WEB 圖片格式有JPEG/JPG、PNG、GIF、WebP、 Base64、SVG 等,這些格式都有各自的特點,以下大概簡單總結如下:
使用合適的圖片格式通常可以帶來更小的圖片位元組大小,透過合理壓縮率,可以減少圖片大小,且不影響圖片品質。
降低網路傳輸
小程式使用騰訊雲圖片伺服器,提供許多圖片處理功能,例如圖片縮放、圖片降質,格式轉換,圖片裁切、圖片圓角
等功能。這些功能可以透過在圖片URL
中加入規定參數就能實現,圖片伺服器會根據參數設定提前將圖片處理完成並儲存到CDN
伺服器,如此大大的減少圖片傳輸大小。
目前後台介面下發回傳的圖片URL 都是未設定圖片參數預處理,例如一張800x800
尺寸高畫質的商品圖,體積大概300k
左右,這樣就很容易導致圖片載入和渲染慢、使用者流量消耗大,嚴重影響了使用者體驗。所以我們結合騰訊雲的圖片處理功能,網路圖片載入前,先偵測是否為騰訊雲網域的圖片URL
,如果網域名稱
匹配,對圖片URL
進行預處理,預處理包含新增縮放參數
,新增降質參數
,新增WebP參數
的方式減少圖片網路傳輸大小
我們先看一張透過圖片伺服器是騰訊雲圖片處理能力,透過設定圖片縮放/降質/WebP,一張尺寸800x800
,體積246KB
圖片,最後輸出生成25.6KB
,圖片體積足足減少了80%
,效果顯著。
圖片縮放
目前業務後台都是原圖上傳,原始圖尺寸可能比客戶端實際顯示的尺寸要大,一方面導致圖片加載慢,另一方面導致用戶流量的浪費,其中如果是一張很大尺寸圖片加載也會影響渲染性能,會讓用戶感覺卡頓,影響用戶體驗。透過新增縮放參數的方式,指定圖片伺服器下發更小和更符合實際顯示size
的圖片尺寸。
圖片降質
圖片伺服器支援圖片質量,取值範圍0-100
,預設值為原圖質量,透過降低圖片品質可以減少圖片大小,但是品質降低太多也會影響圖片的顯示效果,網路預設降圖片品質參數設定為85
,同時透過小程式提供的:wx.getNetworkType
、wx.onNetworkStatusChange
、offNetworkStatusChange
的介面監聽網路狀態變化來取得目前使用者的網路類型networkType
##4G
網絡,則圖片品質會動態設定為80
,對於大部分業務狀況,一方面可以大幅減少圖片下載大小和保證使用者使用體驗,另一方面節省使用者瀏覽,目前新增圖片降質參數至少可以減少
/** * 设置网络情况 */ const setNetwork = (res: Record<string, any>) => { const { isConnected = true, networkType = 'wifi' } = res; this.globalData.isConnected = isConnected; this.globalData.networkType = networkType.toLowerCase(); this.events.emit(EventsEnum.UPDATE_NETWORK, networkType); }; wx.getNetworkType({ success: (res) => setNetwork(res) }); wx.offNetworkStatusChange((res) => setNetwork(res)); wx.onNetworkStatusChange((res) => setNetwork(res));
/** * 根据网络环境设置不同质量图片 */ const ImageQuality: Record<string, number> = { wifi: 85, '5g': 85, '4g': 80, '3g': 60, '2g': 60, }; /** * 获取图片质量 */ export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? 'wifi'];
使用WebP
前面簡單介紹不同的圖片格式都有各自的優缺點和使用場景,其中WebP
圖片格式提供有損壓縮與無損壓縮的圖片格式。依照Google
官方的數據,與PNG
相比,WebP
無損圖像的位元組數要少26%
, WebP
有損圖像比同類JPG
圖像位元組數少25-34%
。現如今各大網路公司的產品都已經使用了,如淘寶、京東和美團等。
這裡放一個 WebP 範例連結(GIF、PNG、JPG 轉 Webp),直覺感受 WebP
在圖片大小上的優點。
在行動端中WebP
的相容性,大部分數位用戶都已經支援了Can I use... Support tables for HTML5, CSS3, etc,
針對png
/jpg
圖片格式,自動新增WebP
參數,轉成WebP
圖片格式。雖然WebP
比較png
/jpg
圖片解碼可能需要更長時間,但相對網路傳輸速度提升還是很大。目前 ios 13
系統版本有不少用戶量的佔比,小程式端取得目前系統版本,降級處理不加入WebP
參數。
// 检查是否支持webp格式 const checkSupportWebp = () => { const { system } = wx.getSystemInfoSync(); const [platform, version] = system.split(' '); if (platform.toLocaleUpperCase() === PlatformEnum.IOS) { return Number(version.split('.')[0]) > IOS_VERSION_13; } return true; // 默认支持webp格式 };
提示:由於目前圖片伺服器不支援、
SVG、GIF
轉WebP
,並沒有做處理
優化效果
測試我們小程式首頁清單介面載入圖片,來比較優化前後的效果
優化前 | 圖片數 | 不支援WebP | 支援WebP |
---|---|---|---|
#2300K | ##10523K | (降低77% )
| 315K (降低86% )
|
100 | 69M | (降低72% )
| #38M (降低84% )
|
以上是深入聊聊小程式中怎麼進行圖片優化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

記事本++7.3.1
好用且免費的程式碼編輯器

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器