縮小旅宿網站照片容量的方法｜與AI安全進行WordPress圖片最佳化

旅宿網站透過客房、餐點、溫泉與看板貓的照片傳達魅力。但若直接刊登多張智慧型手機拍攝的大型照片，頁面可能要等很久才能開啟，讓客人在按下預訂按鈕前就離開。

不過，若覆寫原始照片，或用圖片最佳化外掛批次轉換全部媒體，也可能影響畫質、版面、SNS分享與舊文章。

本文說明不熟悉IT的旅宿主人，如何請Codex或Claude Code協助調查，保護原始照片，先用一張副本測試，再擴大範圍。

結論：分開原始照片與網站刊登用圖片

安全的基本步驟如下。

將原始照片與使用許可保存在安全位置
調查哪個頁面的哪張圖片容量過大
製作一張工作用副本
縮小至符合顯示尺寸的大小
選擇適合照片內容的格式與畫質
以另一張圖片登錄到WordPress並比較
確認PC、智慧型手機與SNS分享
記錄成效與還原方式後，再增加處理對象

未來製作印刷品、刊登預訂網站、提供取材資料或採用不同設計時，可能還需要原始照片。不要用網站刊登用的輕量圖片覆寫原檔。

「看起來變小」與「檔案變輕」不同

即使在WordPress編輯畫面縮小圖片寬度，瀏覽器仍可能先載入大型原始檔案，再縮小顯示。

應確認以下三項。

在畫面上大約以多少像素顯示
實際傳遞圖片的尺寸
實際載入檔案的容量

例如，文章內以約800像素寬顯示的照片，不一定總是需要智慧型手機拍攝、寬達數千像素的圖片。但必要尺寸會因佈景主題、Retina顯示、放大顯示與相簿功能而異，不要用單一數值轉換全部圖片。

先找出容量過大的圖片

批次處理全部媒體前，先調查對使用者影響較大的頁面。

優先頁面:

首頁
客房與價格頁面
餐點與溫泉頁面
看板貓介紹頁面
有預訂按鈕的頁面
經常從搜尋或SNS進入的文章

可請AI、瀏覽器開發者工具或PageSpeed Insights整理圖片URL、尺寸、容量與顯示位置。只看管理畫面的媒體清單，有時無法知道實際傳遞的是哪個尺寸。

依內容選擇圖片格式

JPEG

適合客房、餐點、風景與貓等色彩變化多的照片。逐步調整畫質，可減少容量。不支援透明背景。

PNG

適合需要透明背景的圖、線條與文字清楚的圖片等。一般照片儲存為PNG，容易增加容量，因此應確認是否必要。

WebP

現代瀏覽器廣泛支援，可用於照片與透明圖片。WordPress官方最佳化資料也將WebP列為可縮小檔案的現代格式候選。

AVIF

可期待較高壓縮效率，但必須確認WordPress、伺服器、圖片處理功能，以及使用中的佈景主題與外掛，能否正確產生、傳遞這種格式。不要只因格式名稱就批次遷移。

更換格式，不代表外觀一定相同。應在實際畫面比較看板貓的毛髮、餐點色彩、昏暗客房與細緻花紋等。

畫質要看顯示效果，而非數字

壓縮率或品質值，在不同轉換軟體中可能代表不同意義。不要固定認為「品質80就安全」，而應用同一張照片製作多個候選版本。

比較部位:

明亮天空或牆面的漸層
貓毛與榻榻米等細節
餐點的紅、綠、白色
昏暗客房的陰影
窗戶與照明的明暗差
含有標誌或文字時的輪廓

在PC大螢幕與智慧型手機兩者確認。若容量縮減成效很小，卻只降低畫質，就不要採用。

WordPress會產生多種圖片尺寸

上傳時，WordPress會依佈景主題與設定產生多種尺寸的圖片。文章內可能使用srcset與sizes，讓瀏覽器選擇符合畫面寬度的候選圖片。

這有助避免向智慧型手機傳送不必要的大型照片。但以下情況可能未能正確運用。

佈景主題或自訂元件總是指定原始圖片
直接將圖片URL貼入HTML
使用巨大圖片作為CSS背景
以固定URL顯示外部儲存空間的圖片
舊文章或遷移資料缺少屬性

不要直接修改佈景主題檔案，先以唯讀方式確認實際HTML與網路通訊。

alt、說明文字與來源標示的角色不同

alt

向無法看到圖片的人，簡短說明圖片傳達的內容。這不是塞滿關鍵字的欄位。若周圍文章已充分說明，且圖片僅作裝飾，空的alt有時也適當。

範例:

坐在客房窗邊的三花看板貓
作為晚餐供應的當地蔬菜料理
從入口到櫃檯之間的高低差

不要猜測貓名或客房名稱，只寫已確認的內容。

說明文字

在畫面上提供給讀者的資訊，例如照片補充、拍攝時期、是否為示意圖片，以及提供者。

來源標示與使用紀錄

管理誰拍攝、誰提供，以及能使用到什麼範圍。縮小圖片，不會改變著作權或肖像權條件。不要未經許可轉載預訂網站或SNS照片。

確認位置資訊與個人資料

照片檔案可能含有拍攝日期、位置等中繼資料。公開前，確認是否拍到住宿者、員工、車牌、文件、鑰匙、管理畫面與非公開區域。

即使是看板貓照片，若背景拍到預訂台帳或住宿者，也不能公開。請AI檢查圖片時，同樣只使用可公開的副本，避免隨意將非公開照片或個人資料送到外部服務。

只用一張圖片測試的安全程序

1. 決定目標圖片

選擇首頁或主要頁面中，容量大且影響顯示的一張圖片。

2. 調查使用位置

確認同一圖片用於文章本文、精選圖片、OGP、相簿、背景與預訂頁面等哪些位置。

3. 保存原始圖片與資料

記錄原始檔案、檔名、尺寸、容量、alt、說明文字、來源標示與使用頁面。

4. 轉換副本

不要覆寫原始圖片，應縮小、壓縮工作用副本。確認方向、色彩、透明效果及是否有動畫。

5. 以另一張圖片登錄

起初不要直接取代既有檔案，應在驗證環境或目標頁面副本中比較。

6. 確認顯示與功能

PC與智慧型手機的畫質
長寬比與裁切
圖片連結與放大顯示
精選圖片與文章列表
SNS分享時的圖片
alt、說明文字與來源標示
頁面容量與顯示速度

7. 留下還原方式

確認有問題時能還原為原始圖片，採用後也要記錄原檔保存位置。

使用批次最佳化外掛前的確認

圖片最佳化外掛或CDN有便利功能，但未確認以下事項前，不要套用至全部圖片。

是否保留原始檔案
轉換後能否還原
是否也包含既有圖片
檔案URL或副檔名是否改變
不支援WebP、AVIF時是否有替代圖片
是否傳送圖片至外部服務
免費額度、費用、容量與解約後的行為
與WordPress、佈景主題、快取及CDN是否重複
是否包含在備份範圍內
刪除外掛時，產生的圖片會保留還是刪除

即使說明寫著「批次轉換前請備份」，若未試過還原方法，也未必足夠。請從驗證環境與少量圖片開始。

可交給AI的工作

列出主要頁面的圖片URL、尺寸與容量
排定大型圖片的優先順序
比較格式與壓縮候選方案
建立轉換前後容量、尺寸與畫質確認表
撰寫alt候選草稿
調查使用頁面與內部參照
比較PC與智慧型手機版面
將作業紀錄與還原方式文件化

不要交給AI的工作:

批次覆寫、刪除原始圖片
未經核准轉換全部媒體
公開使用許可不明的照片
將含有人物或住宿者資料的照片傳送到外部
未查看內容就大量產生並確定alt
未確認備份就取代媒體

可複製使用的AI委託內容

調查容量過大的照片

請調查旅宿WordPress網站中，影響顯示速度的圖片。
請先不要轉換、取代、刪除圖片，或導入外掛。

針對首頁、客房、餐點、看板貓及預訂說明頁面，
列出圖片URL、實際尺寸、顯示尺寸、容量、格式與使用位置，
依影響程度整理改善候選項目。

不要輸出非公開圖片、個人資料或驗證資訊。

只製作一張圖片的轉換方案

請不要覆寫已核准的一張原始圖片，用工作用副本製作轉換方案。
依官方資料確認適合顯示用途的尺寸，以及JPEG、WebP、AVIF的支援情況。

列出各候選版本的尺寸、容量、縮減率、畫質確認點與預期使用位置，
請先不要套用至WordPress。

檢查套用後的結果

一張圖片已替換完成。請不要變更設定，只確認。

確認PC與智慧型手機的畫質、長寬比、裁切、圖片連結，
精選圖片、文章列表、SNS分享、alt、說明文字、來源標示，
頁面容量與顯示速度。
也請報告有問題時能否還原為原始圖片。

旅宿主人檢查清單

[ ] 已分開原始照片與網站刊登用圖片
[ ] 已確認照片權利與提供條件
[ ] 已確認人物、文件與位置資訊等
[ ] 已調查主要頁面的容量過大圖片
[ ] 已區分外觀尺寸與實際檔案
[ ] 已選擇適合照片內容的格式
[ ] 未覆寫原始圖片，先用一張測試
[ ] 已在PC與智慧型手機確認畫質
[ ] 已確認精選圖片、列表與SNS分享
[ ] 已確認alt、說明文字與來源標示
[ ] 已確認對預訂、詢問的影響
[ ] 已記錄還原方法
[ ] 批次轉換前已確認驗證環境與還原方法

網站整體變慢的原因，可參考旅宿WordPress變慢時如何調查；公開前的圖片權利確認，可參考公開AI撰寫文章前的檢查清單。

參考資訊

總結

旅宿網站照片不只要容量小，也要有正確傳達客房、餐點與看板貓魅力的品質。保護原始照片，複製容量過大頁面的一張圖片，比較尺寸、格式、畫質與容量。

AI可協助圖片清單、轉換候選方案、alt草稿與變更前後比較，但不要委託刪除原始圖片、批次轉換全部圖片或判斷權利。除了速度，也要確認PC、智慧型手機、SNS與預訂動線後，再擴大範圍。