圖片對網頁效能的影響
圖片通常佔據網頁總大小的 50-75%。優化圖片是提升頁面載入速度最有效的方法之一。
減少檔案大小的技巧
#
選擇正確的格式照片:JPG 或 WEBP圖形/圖示:PNG 或 SVG最佳效能:WEBP#
調整圖片尺寸不要上傳 4000 px 寬的圖片然後用 CSS 縮小預先調整到實際顯示尺寸使用 PixelForge 的縮放功能#
調整壓縮品質JPG:品質 80-85% 通常肉眼無法分辨差異WEBP:品質 75-80% 即可在檔案大小和視覺品質之間找到平衡#
移除不必要的元數據相機資訊、GPS 定位等通常不需要目標檔案大小
| 用途 | 建議檔案大小 |
| Hero 圖片 | < 200 KB |
| 內容圖片 | < 100 KB |
| 縮圖 | < 30 KB |
| Logo | < 20 KB |
使用 PixelForge
前往 PixelForge:
轉換為 WEBP 格式調整品質滑桿到 80%如有需要,縮小圖片尺寸比較檔案大小後下載