最近在研究免費資源網路社群的網站成效表現,才發現圖片容量太大、對於網頁載入速度造成一定程度的影響,事實上對一般內容網站來說可能不會非常要求圖片品質,例如文章裡搭配文字說明所使用的畫面擷圖也不用過度清晰,利用圖片壓縮工具先處理一下,即使是無損壓縮(Lossless)也能讓容量降低不少。若你是使用 WordPress 架站,官方提供的 Jetpack 外掛就有內建免費的圖片 CDN(Photon CDN)功能,開啟後就能自動壓縮圖片,以內容傳遞網路技術讓載入速度更快,也更節省主機流量。

本文要介紹的「Image Speed Test」剛好是我在研究圖片壓縮過程中遇到的一個新推出的線上工具,背後是一家專門提供圖片壓縮技術的服務 Piio,輸入網址就能線上檢測你的網站速度快不快,圖片部分有沒有任何最佳化的空間,和之前推薦過的 16 個免費網站測速工具功能差不多,只不過 Image Speed Test 更側重於圖片項目。

當然 Image Speed Test 主要目的還是要行銷宣傳 Piio 本身的圖片壓縮、最佳化業務,如同之前介紹過的「imgix Page Weight Tool 找出網頁裡過於肥大的圖片資源」就是 imgix 提供的類似工具(imgix 和 Piio 是同類型服務),但還好這樣的網頁檢測工具並不會強制使用者必須使用它推薦的圖片壓縮服務,因此還是可以掃描一下自己的網站圖片是不是過於龐大、有沒有任何壓縮、調整或是變換格式的必要。

Image Speed Test
https://imagespeedtest.piio.co/

使用教學

STEP 1

開啟 Piio 的 Image Speed Test 服務後,填入要檢測的網站網址,按下 Analyze 產生分析結果。如果是內容網站簡易可以直接檢測首頁,或是隨意挑一篇具有圖片的內文。

STEP 2

Image Speed Test 需要一段時間擷取網站,同時分析桌面端和行動端的速度,最後才會產生結果,這裡有一些數據提醒使用者網站速度的重要。值得注意的是 Image Speed Test 提供 Email 訂閱功能除了會在網站分析後發送通知,也會每個月定期將新的網站報告寄到你的信箱。

STEP 3

檢測後就能看到目前的網站效能評分、頁面大小和頁面載入時間,上方也會有幾個建議的調整項目,例如可以降低頁面大小來提升載入速度、有幾張能使用 WebP 格式來讓容量變小的圖片等等。

從頂端按鈕切換桌面或是行動裝置的檢測結果,通常都是桌面端的成效較佳,如果你的網站流量主要來源是手機用戶記得要針對行動版網頁進行最佳化,例如降低圖片大小、或是減少頁面載入的程式,盡可能讓請求數減少會是最立竿見影的作法。

STEP 4

底下的 Image Optimization Comparison 也是很值得參考的項目,網站會將目前圖片和最佳化圖片列出比較,包括在圖片大小的變化、可節省流量,提示項目也很有參考價值,像是目前圖片的尺寸過大建議可以縮小、當前使用的格式建議轉換為 WebP 等等。

總歸一句話就是盡量讓圖片尺寸符合一般桌面裝置適合的尺寸大小,將格式轉為可以使圖片容量更小的 WebP(如果瀏覽器支援的話)。

還有一個項目是列出在桌面端、行動裝置使用相同瀏覽器所得到的圖片差異,可以看到透過 Piio 可以讓每張圖片容量變得更小,提升整體的網頁載入速度(當然只要把圖片尺寸變小、格式換成 WebP 就能獲得類似效果),這部份僅供參考,因為也不可能把圖片的尺寸變得這麼小,不過可以看出就是任何網頁的圖片都有最佳化空間。

值得一試的三個理由:

  1. 填入網址線上檢測網頁載入速度,更偏重於圖片最佳化處理
  2. 可以分析桌面版和行動版網頁的載入效能、時間和頁面大小
  3. 針對圖片進行比較,找出能夠調整和最佳化圖片建議