我很習慣在寫文章插入圖片前先對螢幕擷圖進行壓縮,讓圖片容量更小、開啟速度更快,更重要的是幾乎不會影響畫質,以前我都使用 TinyPNG 和 TinyJPG 這兩個相片壓縮工具,只要將圖片拖曳到網站就能快速處理,後來就選擇以 Imagify 自動從 WordPress 媒體庫對圖片壓縮和最佳化(免費版每月只能處理 20 MB 相片),如果想要在處理圖片後整合 CDN 提高圖片載入速度可試試看以下服務:
相片壓縮
Cloudflare Images 雲端圖片儲存、尺寸調整,每月 5 美元可存 10 萬張
今年九月 Cloudflare 宣布正式推出「Cloudflare Images」圖片儲存服務,乍看之下好像只是一個付費的圖片空間,影像儲存僅是這個項目的其中一個功能,它還兼具調整圖片大小、最佳化等技術,而且整合全世界所有 Cloudflare 網路節點,將影像基礎架構變得更為簡單,易於管理或是預測價格,無論是線上零售、創作者平台或是內容傳遞都很適合使用。
TinyPNG 中文版免費線上圖片壓縮,單次最多 20 張
曾經有一段時期我很喜歡 TinyPNG 線上圖片壓縮工具,只要將 PNG 圖片拖曳到網站,它會自動遠端對圖片壓縮、最佳化,將圖片檔案大幅縮小,但又不會影響畫質(也就是無損壓縮),後來也推出 TinyJPG 支援 JPG 格式,還有 WordPress 適用的外掛功能「Compress JPEG & PNG images」,可以在上傳圖片時自動進行最佳化。
imgix 推出網站圖片處理工具免費方案,每月 1000 張圖片配額無流量限制
前陣子我在研究將免費資源網路社群的圖片容量變小,以加速讀者載入網站時間,也減少主機造成的網路流量消耗,當圖片數量一多,很難以手動方式去處理以前的圖片,尤其是不同時期使用不同的圖片格式和解析度,最安全的方法就是透過第三方圖片處理工具直接在雲端進行壓縮(也不會破壞到原始圖片),例如 WordPress 外掛 Jetpack 提供免費圖片 CDN,開啟後會自動替換網站原有的圖片路徑,ImageKit 和 statically.io 也是同類型服務。
statically.io 免費 CDN 提供網站加速和圖片最佳化功能,無流量速度限制
如果你是網站管理者就會遇到要如何改善網站載入速度的問題,這在流量不大時可能沒什麼影響,只要網站到達一定規模就需要透過內容傳遞網路(Content Delivery Network)改善整體的速度。最知名的 CDN 服務 Cloudflare 讓整體網站都具備加速、安全性防護及分流等效果,算是一個兼具多種優勢的解決方案;如果你是使用 WordPress 架站,也可考慮開啟免費的 Jetpack 圖片 CDN 和 Asset CDN 為網站獲得更快的瀏覽速度。
ImageKit 圖片最佳化服務,為 WordPress 加入圖片壓縮和分流加速功能
前陣子在研究圖片最佳化(Image Optimization)服務,兼具加速分流的內容傳遞網路,對於網站管理者來說,如何將圖片容量變小、但又維持畫質不變確實是個很困難的問題,未來搜尋引擎 Google 會將「網站使用體驗核心指標」(Core Web Vitals)做為搜尋排序的參考因素之一,因此更需要重視網站載入速度。如果你的網站有不少圖片,可以開始研究要怎麼幫這些圖片瘦身減肥,讓訪客有更好的開啟速度,也能降低網頁伺服器的流量消耗。
Squoosh Desktop App 桌面版圖片壓縮工具,開放原始碼沒有網路連線也可用
兩年前介紹過 Google 開發的免費圖片壓縮工具「Squoosh」,這是功能非常強大的線上圖片最佳化服務,整合各種常見圖片編碼解碼器,能在瀏覽器中對相片進行自訂調整,在分隔畫面即時比較原圖和壓縮後、或是使用不同壓縮技術造成的細節差異。我以前經常使用 TinyJPG 壓縮圖片,可以有效減少檔案大小,還能維持圖片畫質,後來在網站開啟 Jetpack CDN 直接替換圖片網址就有整合加速、分流和壓縮圖片效果。
Optidash 以人工智慧最佳化圖片,壓縮降低圖片容量支援常見格式
如果要將圖片上傳到網站或部落格使用,通常會經過裁切尺寸和壓縮圖片步驟,事實上圖檔大小和主機頻寬、流量或搜尋引擎最佳化(SEO)等各層面有密切關係,降低圖片大小有助於節省流量消耗、加快網頁載入速度,可吸引並留住更多訪客,好的網頁速度表現也更能受到搜尋引擎青睞。因此在無損(意指不破壞相片品質)情況下稍微處理一下圖片有其必要性,例如 Recompressor、Squoosh、Jpeg.io 都是非常好用的線上圖片壓縮服務。
Jetpack 免費 CDN 自動加速分流 WordPress 圖片外掛教學
六年前寫過一篇「Photon 免費 CDN 圖片分流、加速服務,每個 WordPress 用戶都該開啟的外掛」,後來這項功能成為 Jetpack 網站加速器(Site Accelerator)一部分,另一個加速器功能是 Asset CDN,和圖片 CDN 差別在於一個是針對圖片進行分流,Asset CDN 是加速 WordPress 靜態檔案,例如 CSS 和 JavaScript,兩個功能都很有用,當然也可依照自己的需求開啟。