圖片通常是品牌網站最有感的視覺素材，也是最常造成載入緩慢的原因。許多企業直接把相機原檔、設計稿匯出的最大尺寸圖片上傳，單張檔案可能遠超過網頁實際需要。當首頁同時載入多張大圖，使用行動網路的訪客很可能還沒看見服務內容，就先離開頁面。
影像最佳化並不是一味把圖片壓得模糊，而是讓每張圖以合適的尺寸、格式與時機送到訪客裝置上。這項工作可納入日常上稿流程，不必等到網站嚴重變慢才處理。
先從圖片的實際顯示尺寸判斷
上傳前先確認圖片在網站上最大會顯示多寬。若文章內文圖片最大只會以約一千像素寬呈現，就沒有必要上傳數千像素寬的原始照片。全版橫幅、作品集大圖與縮圖的需求不同，應分別輸出，而不是以同一張原檔到處套用。
也要留意高解析度螢幕。實務上可準備接近顯示尺寸一至兩倍的圖片，再由網站依裝置提供適當版本。重點不是追求單一固定數字，而是避免將遠大於顯示需求的檔案傳給所有人。
依圖像內容選擇格式
照片、漸層與複雜畫面，適合使用現代圖片格式或經適當壓縮的常見格式；標誌、簡單圖示與線條插圖，則可優先考慮向量格式。透明背景不是每張圖片都需要，若不需要透明效果，通常可避免使用檔案較大的透明圖檔。
轉換格式後務必目視檢查。人物膚色、文字邊緣、產品細節與大面積漸層，最容易出現壓縮痕跡。若圖片承擔重要銷售或品牌任務，應在可接受的畫質與檔案大小之間取得平衡，而不是只看壓縮工具顯示的百分比。
首屏圖片要優先，其他圖片可延後
訪客一進入頁面最先看到的內容，稱為首屏內容。首屏主視覺若很重要，應避免被過度延遲載入，並確認沒有被不必要的輪播、影片或多層特效拖慢。相反地，位於頁面較下方的案例圖片、文章配圖，可採延後載入，等使用者接近該區域時再取得。
但延後載入不是萬靈丹。若首頁首屏的圖片也被延後，可能造成畫面突然跳動或主視覺空白。請由開發人員依每個區塊的閱讀位置設定，並在不同網路環境實際測試。
建立上稿前的影像流程
最容易執行的方法，是為團隊建立簡單規則。例如：照片先裁切成預定比例；檔名使用可辨識的英文或拼音；輸出後檢查檔案大小；上傳時填寫能說明圖片內容的替代文字。替代文字不必硬塞關鍵字，應描述圖片在內容中的意義；純裝飾圖片則可由製作端適當標示，避免閱讀工具重複唸出無關資訊。
定期檢查媒體庫也很重要。刪除不再使用的重複檔案、替換過大的舊橫幅，並確認內容管理系統是否有自動產生不同尺寸圖片。影像管理做得好，不只改善速度，也讓後續同仁更容易找到正確素材。
今天就能開始做
- 找出首頁檔案最大的三張圖片，確認是否超出實際顯示尺寸。
- 為文章縮圖與案例大圖訂出不同的輸出尺寸規則。
- 新增圖片前，先檢查畫質、檔案大小與替代文字是否完成。
