2026 部落客圖片管理術：從拍攝到發布的 5 步驟工作流程
如果你第一次經營部落格，圖片處理可能是最大的時間黑洞
別擔心，你不是唯一一個在這裡卡關的人。
很多部落客告訴我，寫一篇文章可能只花 2 小時，但處理圖片——拍攝、修圖、裁切、壓縮、上傳、嵌入——加起來又花了 2 小時。等於一半的時間都在跟圖片搏鬥。
好消息是，只要建立一套固定的工作流程，圖片處理的時間可以縮短到原來的三分之一。這篇文章會帶你從頭到尾走過一次完整流程，每個步驟都有推薦工具和具體做法。
工作流程總覽
簡單來說，部落格圖片的處理分成五個階段：
拍攝 → 編輯 → 壓縮 → 上傳託管 → 嵌入文章
接下來我們一個階段一個階段來看。
階段一：拍攝——拍出適合部落格的照片
你不需要專業相機，手機就夠了。但有幾個小技巧可以讓你的照片品質提升很多：
光線是最重要的事
- 自然光最好：在窗邊拍攝，避免直射陽光（會有強烈陰影）
- 避免頂光：正午的陽光直射會讓食物、產品看起來很平
- 陰天是攝影師的好朋友：均勻的散射光讓所有細節都清楚
構圖基本原則
- 九宮格構圖：打開手機相機的格線輔助（設定裡可以開），把主體放在交叉點上
- 留白：照片不要塞太滿，留一些空間讓讀者的視線可以休息
- 角度多拍幾張：同一個東西從正面、45 度、俯拍各拍一張，寫文章時才有素材可以選
截圖技巧
如果你寫的是軟體教學、工具評測類的文章，截圖是主要的圖片來源：
- macOS：
Cmd + Shift + 4可以框選截圖區域 - Windows：
Win + Shift + S開啟截圖工具 - 瀏覽器：裝 GoFullPage 擴充功能可以截取整個網頁
截圖時建議把瀏覽器視窗調整到固定寬度（例如 1280px），這樣文章中所有截圖的尺寸會一致，版面看起來更整齊。若要系統化你的截圖流程，可以參考 截圖工具流程指南 裡的工具選擇與快捷鍵整理。
階段二：編輯——讓圖片更適合部落格呈現
拍完照或截完圖之後，通常需要做一些基本處理。你可以把它想像成「幫圖片化妝」——不是要大改，而是讓它在部落格上看起來更舒服。
推薦工具比較
| 工具 | 平台 | 費用 | 適合場景 | 學習門檻 |
|---|---|---|---|---|
| Canva | 網頁/App | 免費版夠用 | 加文字、做封面圖 | 極低 |
| Lightroom Mobile | iOS/Android | 免費（進階功能付費） | 照片調色、批次處理 | 低 |
| Squoosh | 網頁 | 免費 | 壓縮、格式轉換 | 極低 |
| Photopea | 網頁 | 免費 | 類 Photoshop 編輯 | 中等 |
| macOS 預覽程式 | macOS | 內建 | 裁切、簡單調整 | 極低 |
| Paint.NET | Windows | 免費 | 基礎修圖 | 低 |
部落格圖片常見的編輯需求
- 裁切：去掉不需要的部分，聚焦主題
- 調整亮度和對比：讓圖片看起來更清晰
- 加上文字或標註：教學類文章常需要在截圖上加箭頭或文字說明
- 統一尺寸：同一篇文章的圖片寬度保持一致（建議 800-1200px）
- 製作封面圖：部落格文章的封面圖（Featured Image）通常需要特定比例
批次處理省時間
如果你一篇文章有 10 張以上的圖片，一張一張處理會非常慢。推薦用這些方式批次處理：
- Lightroom：匯入所有照片 → 調整第一張 → 複製設定到所有照片 → 批次匯出
- macOS 預覽程式：全選圖片 → 右鍵「打開方式 > 預覽程式」→ 全選 → 工具 → 調整大小
- ImageMagick（命令列工具）：
mogrify -resize 800x *.jpg一行指令批次調整所有圖片寬度
階段三：壓縮——檔案大小減 80%，畫質幾乎不變
這一步非常重要但很多人會跳過。根據 HTTP Archive 的統計，未經壓縮的圖片平均佔網頁總大小的 44% 以上。壓縮可以大幅減少頁面載入時間，讓讀者的體驗更好。
壓縮工具推薦
| 工具 | 類型 | 壓縮效果 | 操作方式 |
|---|---|---|---|
| Squoosh | 網頁應用 | 優秀（可即時預覽） | 拖拉圖片到網頁 |
| TinyPNG | 網頁應用 | 優秀 | 批次上傳最多 20 張 |
| ImageOptim | macOS 應用 | 優秀（無損壓縮） | 拖拉即壓縮 |
| ShortPixel | WordPress 外掛 | 優秀 | 上傳到 WP 時自動壓縮 |
實際壓縮效果
我用 Squoosh 測試了一張典型的部落格照片（1200x800，JPEG 格式）：
- 原始檔案：1.8 MB
- JPEG quality 80：412 KB（減少 77%）
- WebP quality 80：298 KB（減少 83%）
- AVIF quality 65：187 KB（減少 90%）
以上三個壓縮後的版本，肉眼幾乎看不出跟原圖的差別。
格式怎麼選？
簡單來說就是：
- 照片：用 WebP（大多數瀏覽器都支援了）或 JPEG
- 截圖、有文字的圖：用 PNG（文字不會模糊）
- 如果你的部落格平台支援：用 WebP 可以讓檔案更小
想更深入了解 WebP、AVIF、JPEG XL 三者的取捨，可以看 WebP/AVIF/JPEG XL 格式比較。
階段四：上傳託管——讓圖片有個「家」
圖片壓縮好之後，需要上傳到一個地方，取得可以在文章中使用的連結。你有幾個選擇：
選項一：部落格平台內建的圖片功能
WordPress、Ghost、Medium 等平台都有內建的圖片上傳功能。好處是操作最簡單——直接在編輯器裡上傳就好。
但要注意：
- WordPress.com（免費版）的儲存空間有限（1 GB）
- Medium 會壓縮你的圖片，畫質可能下降
- 如果未來換平台，圖片搬家會比較麻煩
選項二：使用圖床服務
把圖片上傳到專門的圖片託管服務（圖床），取得圖片連結，再嵌入到文章中。
好處是：
- 圖片跟文章分開管理，換平台時不需要重新上傳圖片
- 圖床通常有 CDN 加速，圖片載入更快
- 同一張圖片可以用在不同平台的文章中
選項三：自己架設（進階）
用 Amazon S3、Cloudflare R2 等雲端儲存服務自己架圖片伺服器。成本低但需要技術能力，適合有工程背景的部落客。
各方案比較
| 方案 | 操作難度 | 成本 | 搬家彈性 | 載入速度 |
|---|---|---|---|---|
| 平台內建上傳 | 極低 | 含在平台費用中 | 差（綁定平台） | 依平台而定 |
| 圖床服務 | 低 | 免費方案通常夠用 | 好（連結獨立） | 快（有 CDN） |
| 自己架設 | 高 | 低（但需技術維護） | 最好（完全掌控） | 依設定而定 |
如果你剛開始寫部落格，建議先用平台內建功能。等文章量多了、有跨平台需求時，再考慮用圖床服務。
階段五：嵌入文章——最後一哩路
WordPress
在文章編輯器中，點「+」按鈕 → 選「圖片」區塊 → 可以直接上傳，也可以貼上圖片 URL。
如果使用圖床，選「從 URL 插入」，貼上圖片直連即可。
Ghost
Ghost 的編輯器支援拖拉上傳，也支援 Markdown 語法。你可以直接打：
Medium
Medium 只支援直接上傳圖片，不支援從 URL 嵌入。你需要先把圖片下載到本地，再上傳到 Medium。
Markdown 部落格（Hugo、Hexo、Next.js）
如果你用靜態網站生成器，圖片通常放在專案的 static 或 public 資料夾，或是使用圖床的直連：
圖片命名與整理規範
這是很多人忽略但長期來看非常重要的事。當你的部落格有 100 篇文章、每篇 10 張圖片，你就有 1000 張圖片要管理。
命名規則建議
{文章日期}-{文章slug}-{序號}-{描述}.{格式}
範例：
2026-03-25-blog-workflow-01-camera-setup.webp
2026-03-25-blog-workflow-02-editing-tools.webp
2026-03-25-blog-workflow-03-compression-result.webp
好處：
- 按日期排序自動分組
- 看檔名就知道是哪篇文章的圖片
- 序號讓圖片有順序
備份策略
圖片一定要備份。不管你用什麼圖床或平台，都不能保證服務永遠不會關閉。Imgur 在 2023 年刪除了大量匿名上傳的圖片，許多部落格的舊文章因此全部破圖。
建議的備份方式：
- 本地備份：用上面的命名規則，在電腦上建立
blog-images/資料夾分類存放 - 雲端備份：同步到 Google Drive 或 Dropbox（這裡是當備份用，不是當圖床用）
- 版本控制：如果你的部落格是用 Git 管理的靜態網站，圖片也可以放進 Git（但要注意 repo 大小）
推薦的圖床服務
如果你決定使用圖床來管理部落格圖片，lpic.cc 是一個不錯的起點。它的特點是免註冊即可上傳、提供圖片直連、有 CDN 加速，而且支援密碼保護功能——如果你有些圖片只想給特定讀者看到（例如付費會員專屬內容的截圖），這個功能很實用。
不過要提醒的是，lpic.cc 跟多數免費圖床一樣，不提供資料夾分類或批次管理功能。如果你的文章量很大，建議搭配本地的檔案命名規範來管理，把圖床當作「圖片的發布管道」，本地的資料夾結構當作「圖片的管理系統」。要挑其他圖床的話可以先看 10 個免費圖床實測比較 再決定。
常見問題 FAQ
Q1：部落格圖片建議用什麼尺寸？
大多數部落格的內容寬度在 700-800px 之間，所以圖片寬度設定在 800-1200px 最合適。太小會模糊（特別是 Retina 螢幕），太大則浪費頻寬。封面圖（Featured Image）通常需要更寬，建議 1200x630px（這也是 Facebook 和 Twitter 分享卡片的最佳比例）。
Q2：我的圖片需要加浮水印嗎？
看你的需求。如果是產品照片或原創攝影作品，加浮水印可以防止盜用。但如果是教學截圖或一般配圖，浮水印通常沒必要，反而會影響閱讀體驗。如果要加，建議放在角落、半透明、不遮擋主要內容。
Q3：一篇文章放多少張圖片合適？
沒有絕對標準，但有一個經驗法則：每 300-500 字搭配一張圖片。一篇 2000 字的文章大約 4-7 張圖片比較適當。太多圖片會讓頁面載入變慢，太少則顯得文章枯燥。教學類文章可以多一些（每個步驟一張），觀點類文章可以少一些。
Q4：手機拍的照片可以直接用嗎？需要後製嗎？
可以直接用，但建議至少做兩件事：(1) 裁切掉不需要的部分；(2) 壓縮到合理的檔案大小。現在手機拍出的照片動輒 3-5 MB，直接放到部落格會嚴重影響載入速度。用 Squoosh 或 TinyPNG 壓縮後通常可以降到 200-400 KB，畫質幾乎不受影響。
Q5：如果圖床關閉了，我的圖片怎麼辦？
這就是為什麼本地備份很重要。如果你有備份，圖床關閉後只需要把圖片重新上傳到另一個圖床，更新文章中的連結即可。如果沒有備份，圖片就真的消失了。建議養成習慣：每上傳一張圖片到圖床，同時在本地保留一份。
參考資料
- HTTP Archive - State of Images — 網頁圖片使用統計
- Google Web Fundamentals - Image Optimization — Google 圖片優化指南
- Squoosh — Google 出品的線上圖片壓縮工具
- Canva — 線上圖片編輯與設計工具
- WordPress 圖片處理最佳實踐 — WordPress 官方效能優化文件