blogging

[098] 愛惜你的讀者，請用力壓縮圖片

28 6月 2016 • 5 min read

前言

圖文並茂的文章容易吸引讀者，恰到好處的截圖有助理解。從事網路書寫，最要緊的是照顧好讀者，盡職的部落客除了將作品最好的一面呈現給讀者，也要讓讀者以最低**「成本」取得你的作品。以網路閱讀來說，有效壓低成本的方法之一是減少文章的資料量，縮短載入「時間」**。

本文即針對圖片下手，除了幫圖片減肥，還要選對檔案格式。

為了縮短頁面載入時間（降低閱讀成本），本格幾乎每一張圖片都事先壓縮才上傳到伺服器（其實是 Dropbox），目前我常用的服務是 TinyPNG，是個免費的線上服務。

TinyPNG 是我用過壓縮效率最好的工具。以這篇文章為例，該文的每一張圖都經過壓縮：

84% 的壓縮比，瘦了 2MB，相當驚人的比例啊。PNG 用的是 Lossless compression 不失真的壓縮演算法，減去的檔案大小完全不減損影像品質。

再舉一實例。連結所指的圖為一張 4MB 左右的 PNG 圖檔，使用 TinyPNG 壓縮後的大小為 1.1MB，超爽der。

市面上有許多免費壓縮工具，不到一分鐘就能讓你的圖檔大小減半（或更多）。負責任的部落客應該將文章裡的圖片壓縮，善待你的讀者。

另外，如果你用 WordPress 架站，可考慮安裝 TinyPNG for WordPress，圖片上傳自動壓縮，省時省力。

底下是幾個免費的圖片壓縮工具：

我喜歡 TinyPNG 的原因是它吃別人的 CPU，可一次拉多個檔案一起壓縮，對於運算能力弱的電腦，只要網路頻寬夠水準，便能在短時間壓縮數張圖片。

JPEG 圖檔與 PNG 不同，前者儲存時會因壓縮捨掉某些資料，即所謂的「失真」。壓縮比越高，失真越嚴重。

我做了個實驗，以 Skitch 截圖後，同一張圖匯出後的檔案大小：PNG（1.5MB）以及 JPEG（628KB），使用 TinyPNG 以及 TinyJPG 壓縮後的大小：PNG（456KB）以及 JPEG（247KB）。

上例中，壓縮前後 JPEG 圖檔大小都比 PNG 小，不過，PNG 的「不失真壓縮」不會移失資料，讓我們很放心。但 JPEG 就不一定了。雖然 JPEG 不要的資料不全然有用，此時為了保全資料，PNG 是比較好的選擇。PNG 還有另一個優勢是支援透明背景，在許多場合很有用。

由於圖片格式會影響圖片品質，「自產自銷」的螢幕截圖真心建議不要存成 JPEG 格式。

在做螢幕截圖時，我把握以下原則：

許多螢幕截圖工具提供以視窗為單位的截取方式，不過，許多時候以整個視窗呈現在文章裡並不恰當，較好的作法是視文章內容只截取重點區域或事後修剪掉不必要的部分。比如說重點是網頁內容，則可將瀏覽器的介面（書籤列、選單列）去掉。

為圖片加上適當的標註時能收畫龍點睛之效。Skitch 是我最常用的圖片標註工具，跨平台（Windows/Mac/Android/iOS），而且與 Evernote 整合良好，可惜 Windows/Android/iOS 版不再更新了。

另一個 iPhone/iPad 上的圖片標註工具為 This，其標註的效果特殊，讓我愛不釋手。

「時間就是金錢」，每張圖都壓縮，乍聽之下浪費（自己的）時間，但這個一次性的動作，縮短載入時間，經年累月，幫讀者省下的時間絕對值得。🔚