很多自己維護官網的行銷人員都遇過這種情況：網站沒改什麼大東西，首頁卻越開越慢，手機上要等好一陣子才看得到畫面。追查下去，原因常常是圖片。一張從手機或相機直接上傳的照片，檔案可能比頁面上其他文字、程式加起來還大。網站圖片最佳化聽起來像工程師的工作，但其實大部分動作在上傳之前就能完成，不需要寫程式。下面照實際工作流程，依序說明尺寸、格式、壓縮和延遲載入，再整理後台上傳時可以養成的習慣。
先處理尺寸：網站圖片最佳化常被忽略的一步
先分清楚兩個詞。圖片的「尺寸」指的是像素寬高，例如 1600×900；「檔案大小」指的是佔多少 KB 或 MB。兩者有關，但不是同一件事。手機拍的照片寬度常常有好幾千像素，可是官網文章的內容區可能只有七、八百像素寬，滿版橫幅通常也在一兩千像素之間。瀏覽器會把大圖縮小顯示，畫面看起來沒差，但使用者還是得把整張原圖下載完，這就是浪費。
判斷方式是先弄清楚圖片在頁面上實際顯示多寬。可以請設計師或工程師提供各版位的建議尺寸，或在電腦瀏覽器上對圖片按右鍵選「檢查」，從開發者工具看到它的顯示寬度。考慮到現在很多螢幕是高解析度，準備顯示寬度的 1.5 到 2 倍通常就足夠，再大肉眼也很難分辨。
- 整理一張「版位尺寸對照表」，例如首頁主視覺、文章內圖、產品縮圖各要多寬、什麼比例，放在團隊共用文件裡。
- 同一區塊的圖片裁成一致比例，版面比較整齊，也不必靠程式硬裁切。
- 不要用後台編輯器拖拉圖片角落來縮小，那只是改變顯示大小，檔案本身並沒有變小。
有些後台系統（例如 WordPress）上傳時會自動產生多種尺寸的縮圖，讓瀏覽器依螢幕大小挑選合適的版本，這很有幫助。不過原始檔仍會留在伺服器上，部分版位或外掛也可能直接引用原圖，所以上傳前先縮到合理尺寸，仍然是值得保持的習慣。
JPG、PNG、WebP：依圖片內容挑格式
JPG 適合照片和色彩豐富、漸層多的影像。它採用有損壓縮，能把檔案壓得相當小，但不支援透明背景，而且壓得太重時，文字和線條邊緣容易出現雜點。
PNG 是無損格式，支援透明背景，適合 Logo、圖示、軟體截圖、文字較多的圖表。缺點是拿來存照片時，檔案通常會比 JPG 大上許多。實務上很常見的狀況是設計師交出 PNG 格式的照片，行銷人員直接上傳，結果一張圖就拖慢整頁。
WebP 同時支援有損、無損和透明背景，在相近畫質下檔案通常比 JPG、PNG 小，主流瀏覽器也都已支援。有些後台可以直接上傳 WebP，有些則透過外掛或伺服器設定在上傳後自動轉檔。如果不確定自己的網站支援哪一種方式，先問負責維護的工程師，比自己摸索安全。
- 照片、情境圖：JPG 或 WebP。
- 需要透明背景的去背商品、Logo：PNG 或 WebP。
- 截圖、含大量文字的資訊圖：PNG，或無損模式的 WebP。
壓縮：在畫質和檔案大小之間找平衡點
尺寸縮好、格式選對之後，再來是壓縮。有損壓縮會捨棄一些人眼不太容易察覺的細節，多數照片用中等偏高的品質設定匯出，肉眼幾乎看不出差別，檔案卻能小不少。修圖軟體匯出時通常有品質滑桿可以調；沒有修圖軟體的話，也有線上壓縮工具、桌面軟體，或後台的壓縮外掛可以用。
要注意避免重複壓縮。JPG 每重新存一次就會再損失一些細節，如果拿網站上已壓縮過的圖再編輯、再壓縮，畫質會越來越差。原始檔請另外保存，每次都從原始檔重新匯出。
判斷有沒有壓過頭，最直接的方法是把圖放到實際頁面上，用 100% 比例看：天空或牆面的漸層有沒有出現一塊一塊的色帶，文字和產品邊緣有沒有鋸齒或模糊。需要讓客戶看清楚細節的產品圖，品質可以留高一點；純粹當背景、上面還壓著文字的裝飾圖，則可以壓得重一些。也可以和工程師約定各版位的檔案大小上限，上傳時有個明確的參考標準。
延遲載入：畫面外的圖片晚一點再下載
延遲載入（lazy loading）的概念是：使用者還沒捲動到的圖片先不下載，等快要進入畫面時才載入。對長頁面、產品列表、作品集這類圖片很多的頁面特別有幫助，可以讓第一屏內容較快出現，也替行動裝置使用者省下流量。
現代瀏覽器已經原生支援，只要在圖片標籤加上 loading="lazy" 即可，許多後台與佈景主題也已預設加上。若同時標明寬高，瀏覽器能先預留位置，圖片載入時版面比較不會跳動：
<img src="product-red-chair.webp" width="800" height="600" loading="lazy" alt="紅色單人椅">
有兩點要留意。第一，第一屏的主視覺和 Logo 不應該延遲載入，否則最重要的圖片反而會晚出現；如果發現首頁大圖總是慢半拍才跑出來，可以請工程師確認是不是被誤加了。第二，延遲載入只是調整下載時機，使用者捲到時仍要下載整張圖，所以它不能取代前面的縮圖和壓縮。
後台上傳前的實務檢查流程
把前面的觀念整理成固定步驟，每次上傳照著做，就不容易出錯：
- 確認這張圖要放在哪個版位、顯示多寬，縮到顯示寬度的 1.5 到 2 倍。
- 依內容選格式：照片用 JPG 或 WebP，需要透明用 PNG 或 WebP。
- 壓縮後在實際頁面目視檢查，確認沒有明顯色塊或模糊。
- 檔名改成有意義的英文小寫加連字號，例如
product-red-chair.jpg，避免中文、空格或 IMG_1234 這類相機預設檔名。 - 上傳後用電腦和手機各看一次，確認顯示正常、載入順暢。
- 原始檔保存在本機或雲端資料夾，之後要修改就從原始檔重新處理。
已經上線一段時間的網站，可以從流量最高的頁面開始盤點。打開瀏覽器開發者工具的「網路」面板，重新整理頁面後依檔案大小排序，就能看出哪些圖片特別大；也可以用 PageSpeed Insights 這類檢測工具，看它列出哪些圖片建議改善。替換舊圖時要留意，如果圖片網址改變，引用它的文章或頁面也要一起更新，以免出現破圖。
如果網站上傳量很大，也可以跟工程師討論把部分步驟自動化，例如上傳時自動縮圖、轉成 WebP、套用壓縮。自動化能省下不少時間，但哪張圖要保留細節、哪張可以壓重一點，還是需要上傳的人自己判斷。