設定 Jetpack 網站加速器的圖片壓縮畫質教學(Photon CDN)

最後更新於 2020 年 07 月 07 日

最近使用了 Piio 的 Image Speed Test 工具,也提到我正在研究一項適合免費資源網路社群的圖片壓縮功能,一直以來我都是使用 Cloudflare(本身除了加速分流也有圖片最佳化功能),另外我也相當推薦 WordPress 架站的站長使用 Jetpack 的網站加速器(以前叫做 Photon CDN),都能有效提升網站載入效能。當然你也可以將每張圖片都下載回來以圖片壓縮工具進行處理,但對有數萬甚至數十萬張圖片的網站來說實在是個大工程,也不建議這麼做。

WordPress 官方提供的 Jetpack 外掛本身有個網站加速器模組,主要是由圖片加速器和靜態檔案加速器所組成,啟用後就能直接套用到你原有的圖片路徑,直接協助進行遠端的圖片壓縮和最佳化功能,亦可透過內容傳遞網路(CDN)加速和分流現有的圖片檔案,這可能是替網站圖片加速最簡單的解決方案。

不過後來不使用 Jetpack 圖片加速器的原因是發現圖片經過壓縮後畫質相當差,甚至到有些模糊的狀況,只好忍痛捨棄這個服務,轉而尋找其他付費功能,當然不是說 Jetpack 網站加速器不好,如果你對於圖片畫質有要求的話可能會無法滿足你的需要。

但我在最近研究的過程中發現圖片加速器其實有設定參數的功能(就如同 Imgix),可以透過預先設定自動將圖片調整到最符合網站的狀況,舉例來說,你希望預設的畫質不要那麼差、將相片中所有的 Metadata 資料刪除、或是自動裁切為特定的寬度等等,都能透過程式碼進行控制。

剛好我在爬文時從一篇 2015 年 WordPress 開發者網站的文章「Lossy Image Compression with Photon」找到相關的作法,可能你已經知道(對不起我好像很 Lag…),但還是稍微紀錄一下作法好了,如果你在使用 Jetpack 圖片加速器時發現圖片被壓縮破壞畫質造成模糊,或是想要自動裁切特定範圍、特定寬度高度、調整圖片亮度、對比、色彩、畫質等等,都可以自己研究一下說明文件加入特定參數來控制 Photon CDN 產生的圖片。

Site Accelerator (Formerly Photon)
https://jetpack.com/support/site-accelerator/

使用教學

STEP 1

之前在 Photo CDN 和 Asset CDN 寫過這項功能,還是重新複習一下,若你是使用 WordPress 架站,在「安裝外掛」搜尋 Jetpack ,找到 Jetpack by WordPress.com 將它安裝到你的網站後啟用就能使用(這個外掛還有許多非常有用的功能)。

這是一個由 WordPress 官方提供的外掛功能,必須要連接到 WordPress.com 帳戶才能使用。

STEP 2

進入 Jetpack 設定選項,在「效能與速度」就能找到網站加速器功能,第一項是專為圖片設計的加速壓縮功能,第二項則是適用於網站和 WordPress 主程式相關的 CSS 和 JavaScript ,可以試著將這兩項加速器啟用以獲得更好的速度。

STEP 3

啟用影像加速功能後原有圖片網址路徑最前面會變成 i0.wp.comi1.wp.comi2.wp.com 或是 i3.wp.com,以 WordPress 圖片 CDN 進行壓縮、加速和分流等工作,因為圖片處理後會永久快取於伺服器,可以大幅節省流量。

依照 Site Accelerator 頁面說明,圖片加速功能僅處理 gif、png 和 jpg 格式,支援 HTTP(port 80)和 HTTPS(port 443),基本上已經適用於全世界 99.99% 伺服器。圖片在壓縮後不會放大尺寸,以避免出現低劣的畫質或失真等情形,因為圖片會永久快取,如果要更新時只能透過更改檔名方式重建一次快取。另外,對於支援 WebP 的瀏覽器會直接給出 WebP 格式。

要如何調整 Site Accelerator 圖片壓縮預設值呢?從「Lossy Image Compression with Photon」找到這段程式碼,將它調整後加入佈景主題的 functions.php 就能套用到網站的所有圖片。這段範例實現的是將畫質調整為 80 並移除所有 Metadata。

要找到完整支援的參數可以查看 Photon 頁面,將你需要的參數及設定值帶入即可。

當然這些參數也可以單獨於特定圖片使用,只要將參數加入於圖片路徑後面,更多的設定方式及實際應用範例可參考 Photon API 頁面,有非常完整詳細的說明。

值得一試的三個理由:

  1. 啟用 Jetpack 網站加速器可加速圖片和靜態檔案(CSS、JavaScript)
  2. 亦可透過參數實踐更多的可能性,包括調整畫質、自動裁切、指定長度寬度
  3. 自動壓縮圖片降低網站流量,也能讓網站載入速度更快

 

相關的文章

Jetpack 免費 CDN 自動加速分流 WordPress 圖片外掛教學

六年前寫過一篇「Photon 免費 CDN 圖片分流、加速服務,每個 WordPress 用戶都該開啟的外掛」,後來這項功能成為 Jetpack 網站加速器(Site Accelerator)一部分,另一個加速器功能是 Asset CDN,和圖片 CDN 差別在於一個是針對圖片進行分流,Asset CDN 是加速 WordPress 靜態檔案,例如 CSS 和 JavaScript,兩個功能都很有用,當然也可依照自己的需求開啟。

Image Speed Test 分析你的網頁內容,提供加速及圖片最佳化建議

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

VaultPress 完整備份你的 WordPress 網站,無痛搬家或回復特定時間點

如果你是使用 WordPress 自架站(Self-hosted)的話,有一個經常被忽略的問題,那就是網站資料備份的重要性,你可能會問:主機商不都有提供每日備份或是異地備援嗎?即使如此,仍看到不少因為硬碟損壞或伺服器遭入侵而無法回復客戶資料的案例,因此最好的方法還是自己進行網站備份比較妥當。WordPress 備份工具非常多,方式也都不盡相同,想省錢還可利用外掛連接你的雲端硬碟備份資料,或是手動將資料壓縮後以 SSH、SFTP 傳輸到其他主機保存,不過這些缺點就是可能會比較耗費資源,要管理備份也不太方便。

Microsoft Edge 離線安裝檔下載,沒有網路也能安裝微軟瀏覽器(Windows、macOS)

微軟在今年一月推出全新的 Microsoft Edge 瀏覽器正式版,使用 Chromium 引擎做為核心,讓瀏覽器速度、效能和安全性都有更好的表現,當然更重要的是 Microsoft Edge 除了可以從微軟商店下載瀏覽器外掛,也支援 Chrome 擴充功能(他們兩者的核心都是 Chromium),不但有 Windows 版本也能在 macOS、行動裝置 iOS 和 Android 平台使用。如果你因為某些原因不敢升級瀏覽器,或許可以試試看從 Microsoft Edge 開啟 Internet Explorer 模式,強化對一些舊式網頁的相容性。

Cloudflare Speed 免費網路測速服務,可測網路速度、延遲和抖動情形

受新冠肺炎(COVID-19)疫情影響,許多公司改採在家辦公模式,減少員工在辦公室可能造成的群聚感染風險,也讓網路服務提供業者(ISP)觀察到家用頻寬上升的狀況。另一方面串流影音服務、線上會議服務的使用量也增加許多,Netflix 甚至宣布調降部分地區的流量,以因應過度使用情形。如果你想知道自己的網路速度究竟快或不快,可以透過網路測速工具看到數據,之前推薦過一些很值得使用的測速服務:

Counter by Alles 最簡單的免費網站計數器,一行程式碼就能顯示訪客數

早期的網站很流行放上訪客計數器(Counter),展示今天一共有多少使用者造訪網頁,多半是透過一段圖片語法就能做到,後來逐漸轉變為 JavaScript 格式以提供更多功能,當然另一方面也能獲取更完整資訊。現今大多數都是透過流量統計工具來收集訪客紀錄,再使用圖表進行一些精確、技術層面的分析,以開發更多的訪客群眾或是改善網站本身的問題,流量就好比是各家網站的秘密,一般情況下可能不會顯示於網站上。

回應