高解析照片能呈現產品細節與品牌質感，但若直接把原始檔上傳網站，也可能讓頁面在行動網路下等待很久。圖片問題不只影響速度：沒有預留尺寸的圖片可能讓內容跳動；不合適的裁切會讓手機版主角消失；檔名與替代文字混亂，也會增加日後維護成本。
圖片優化不是單純把檔案壓小，而是讓每一張圖以合適的大小、格式與用途出現在正確位置。
先分清楚每張圖片的角色
盤點頁面圖片時，可先標示它屬於哪一類：首頁主視覺、服務情境、產品細節、案例成果、團隊照片，或純裝飾圖案。不同角色需要的尺寸與品質不同。
例如首頁橫幅可能需要寬幅構圖，但不代表要提供遠超過實際顯示尺寸的原始照片；產品細節圖則可能需要支援放大檢視。裝飾性的背景紋理若不傳達內容，應避免使用大型點陣圖，改以較輕量的處理方式或簡化設計。
開始製作前，也要確認版面會使用橫式、直式還是方形比例。同一張照片硬套到不同容器，常造成主體被裁掉。拍攝時多保留安全邊界，後續在桌機與手機裁切時會更有彈性。
尺寸應依顯示情境決定
輸出圖片時，先查看網站版面中圖片實際可能顯示的最大寬度，再決定輸出尺寸。重點不是追求單一固定數字，而是避免上傳遠大於使用情境的檔案。
具備響應式圖片功能的網站，可為不同螢幕提供不同尺寸版本；若系統沒有這項能力，更要在上傳前控制原始尺寸。上傳後請實際打開手機與桌機頁面，確認圖片是否清楚、裁切是否合理，以及滑動時是否出現明顯跳動。
圖片區塊也應預留寬高比例。瀏覽器在圖片尚未載入時能先保留空間，文字與按鈕就不會在載入後突然位移，使用者也較不會誤按。
選對格式，並保留可編修原檔
照片通常適合使用現代網頁常見的圖片格式，能在維持視覺品質下減少傳輸量；圖示、簡單線條與標誌則可評估向量格式是否適合。實際採用哪種格式，仍要考量網站系統支援度、瀏覽器相容性與團隊交接方式。
請把設計原檔、高解析原始照片與網站用輸出檔分開保存。網站用檔案不應成為唯一備份，也不要每次需要修改時都從已壓縮的版本反覆編輯。資料夾可依年份、專案與頁面用途命名，讓接手者找得到來源。
替代文字與檔名是內容的一部分
替代文字的首要目的，是在圖片無法顯示或使用輔助工具閱讀時，傳達圖片的重要資訊。若圖片是產品、施工現場或操作步驟，描述應說明內容與頁面脈絡；若只是裝飾，通常不需要重複朗讀無關訊息。
檔名則建議使用容易辨識的英文小寫單字與連字號，例如服務名稱、場景或專案代稱。避免保留相機自動編號，也不必刻意塞進大量關鍵字。清楚的命名能讓行銷、設計與網站管理人員在日後快速確認圖片用途。
建立上傳前的固定檢查
最有效的作法，是把圖片處理納入內容上架流程。指定誰負責裁切與壓縮、誰確認版面呈現、誰保管原檔；當新案例或新品持續增加時，品質才不會逐漸失控。
現在就能做的事
- 找出首頁與主要服務頁最大的三張圖片，確認是否遠大於實際顯示尺寸。
- 在手機上檢查主視覺與案例照片，確認主體沒有被裁掉。
- 為新上傳圖片建立一致的檔名、原檔位置與替代文字規則。
- 將圖片尺寸、格式與上傳檢查項目寫入內容發布流程。
