網站圖片交付不只是一個資料夾：尺寸、替代文字與手機效能清單

先分原檔、公開版本與引用紀錄

品牌可能同時有攝影原檔、設計工作檔、壓縮備份及網站公開圖片。它們用途不同，不宜只靠相似檔名辨認。交接時應保留原始素材的核准儲存位置，網站則使用適合頁面用途的公開版本，並用清單連起兩者。

清單可以記錄來源、授權或批准狀態、用途、尺寸、格式、檔案大小、雜湊值及公開網址。這些資料有助重建和核對；不需要把私密連結或帳戶資料寫進去。若素材權利或人物使用範圍未清楚，應先確認，再安排公開使用。

不要只交一張最大尺寸圖片

手機和桌面常有不同的顯示寬度與裁切方式。web.dev 說明，srcset 和 sizes 可向瀏覽器提供圖片選項與顯示資訊，讓瀏覽器按情況選擇；picture 則可處理需要明確來源控制的情況，例如不同裁切或格式。

這不表示每張圖片都要製作大量版本。先看圖片用途：首頁大圖、文章插圖、標誌及小卡片可能需要不同處理。規格應由實際顯示尺寸與品質需求決定，並在真實布局驗收；單靠檔案較小，不能判定整頁已更快或視覺可接受。

替代文字要描述功能與情境

Google 圖片指引提到，以標準 img 元素及可存取來源有助發現圖片；在使用響應式寫法時仍應保留合適的 src 後備來源。對承載內容的圖片，替代文字應與圖片和頁面情境有關，避免把關鍵字堆進同一句。

同一圖片用在不同位置，功能可能不同。若圖片本身是連結，替代文字亦應讓人理解目的；純裝飾圖片則需要按實際語意處理。不要把生成示意圖描述成真實客戶成果、員工或活動紀錄，圖片說明必須保留其真實性。

素材清單要連到實際頁面

一張圖可能在多個頁面共用。記錄引用位置，可在更新時避免只改檔案卻漏掉另一個路徑，也有助判斷舊版本是否仍在使用。程式碼與媒體宜分開管理，純文字或排版更新不應無故重傳完整相簿。

網站團隊應說明圖片由哪個現有儲存位置提供，以及如何核對上傳後的位元組。Git 的素材清單不等於圖片已在主機可用；主機圖片存在，也不代表一般頁面正在引用它。每一層證據都要能對到同一個版本。

驗收時同時看畫面與傳送結果

可挑首頁大圖、文章卡片與詳頁插圖，分手機和桌面檢查：有沒有失圖、重要主體是否被裁走、圖片比例是否改變、文字覆蓋是否仍清楚，以及載入時版面有沒有明顯移動。對重要圖片，還要確認實際引用網址與檔案正確。

效能判斷應配合頁面測量和實際使用情境，不宜只憑單張截圖或單次測速作保證。若快取仍回舊圖，保留目前觀察與版本界線；不要盲目重傳或改動另一個儲存位置。清楚的交接紀錄，能讓之後替換圖片時知道該改哪裏、如何驗證及如何回復。

交接表需要能支持日後替換

交接時可請團隊指出：哪一份是可重建網站版本的原始素材、哪一份是現在公開衍生圖、哪幾個頁面正在引用，以及替換後應看哪個位置。對同一批素材使用穩定識別與校驗紀錄，有助避免重名檔案被誤用，但不應因此把完整相簿放入程式碼倉庫。

若之後要刪除舊圖，應另核對備份、現行引用、部署依賴與回復需要，取得相應範圍授權後才處理。圖片交付完成並不自動代表所有歷史版本都可刪除；保留清楚清單，能減少日後整理素材時的猜測。

交接清單

• 分列原檔、公開衍生版本、用途與授權狀態。
• 按實際顯示需求準備尺寸與格式，不只交最大圖。
• 記錄替代文字、引用頁面、公開網址與雜湊值。
• 手機與桌面同時驗收裁切、比例、載入及實際引用。

常見問題

換成 WebP 就能保證網站變快嗎？

不能。格式只是其中一項因素，仍需考慮尺寸、品質、引用方式、快取、頁面其他資源及實際測量。

所有圖片都要填入大量關鍵字嗎？

不應這樣做。替代文字應準確描述圖片在該頁面的內容或功能，避免堆疊關鍵字或虛構情境。

圖片上傳成功，是否代表訪客已看到新版本？

不一定。還要確認公開網址、頁面引用、快取及實際渲染。上傳結果與訪客畫面是分開的驗收。