企業網站圖片怎麼準備，才不會上線後才發現模糊、裁切錯誤，或手機載入很慢？先確認圖片的用途、顯示比例與需要傳達的資訊，再決定匯出尺寸和格式，通常比直接把原始檔全部上傳更容易掌握品質。
一張照片在電腦上看起來清楚，不代表放到首頁橫幅、產品卡片或手機版都合適。網站建置時，如果圖片、文字和版面分開處理，很容易在最後階段才反覆換圖。把素材規格提早說清楚，可以減少這些來回。
先列使用位置，再向同事或攝影師要圖
準備素材時，可以先做一份簡單的圖片清單，記錄每張圖要放哪裡、想說明什麼，以及是否需要另外裁出手機版本。原始照片先保留，網站用圖則另行匯出，避免日後想換版位卻只剩壓縮後的小圖。
| 使用位置 | 準備重點 | 容易忽略的問題 |
|---|---|---|
| 首頁主視覺 | 確認主體位置、橫幅比例與手機裁切 | 標誌或人物被裁掉，文字壓住產品 |
| 產品與服務卡片 | 統一比例、背景與主體大小 | 同一排高低不一，難以比較 |
| 案例與流程說明 | 保留能辨識細節的畫面與說明 | 只放裝飾照片，讀者看不出成果 |
| 圖表與操作教學 | 確認縮小後的字級與對比 | 手機上看不到圖內文字 |
素材清單也應記下檔案來源與可使用範圍。授權圖庫、客戶提供照片與自行拍攝素材，最好保留來源紀錄；案例畫面若含客戶資料，先確認可公開的範圍，再交付網站使用。
像素尺寸與檔案大小，是兩件不同的事
圖片的寬、高像素，影響可以顯示到多大；KB 或 MB 則代表檔案需要傳輸多少資料。同樣是寬1600像素的圖片，內容細節、格式和壓縮設定不同，檔案大小也可能差很多。
以一個假設版位為例：圖片在桌機上顯示寬度為800個 CSS 像素，如果要準備對應2倍像素密度的版本，可以先以寬1600像素作為測試起點，再檢查實際清晰度。這是示意計算，不是每張圖片都應固定匯出的標準尺寸。
把四千像素寬的原圖縮小，不一定會讓頁面看起來比較差；反過來，把小圖放大輸出，也不會自動補回原本沒有的細節。對一般網頁圖片而言，只改檔案標示的 DPI、沒有改變像素與壓縮方式，也不能當成完成瘦身。
手機版要實際看裁切，不能只縮小瀏覽器想像
橫幅在手機上可能改成直式、改變高度，或以填滿容器的方式裁切。重要產品、人物、標誌若剛好放在邊緣，即使原圖沒有問題，也可能在手機上消失。
- 主體位置：先確認不同版位都看得到重要部分，必要時另備手機裁切版本。
- 文字配置：服務名稱、價格與聯絡資訊盡量以網頁文字呈現，避免只存在圖片裡。
- 縮圖辨識：案例與產品圖片縮小後，仍應能辨識重點；複雜圖表可提供較大版本或文字解說。
不是所有圖片都要另外做一張手機版。若原圖主體集中、留白合適，而且實測裁切正常，就能沿用；有問題的版位再另外處理，比一次製作大量不會使用的版本更有效率。
照片、圖表與透明圖片，可以用不同格式
選格式時，先看圖片內容，再比較匯出後的品質與大小。以下是常見的準備方向，最終仍應確認網站、伺服器與目標瀏覽器的實際支援情況。
| 圖片情境 | 可評估格式 | 檢查重點 |
|---|---|---|
| 一般實景照片 | JPEG、WebP、AVIF | 人物、材質與漸層是否自然 |
| 需要透明背景 | PNG、WebP、AVIF | 邊緣與透明效果是否正確 |
| 圖表或小字說明 | PNG，或經測試仍清楚的其他格式 | 文字、細線與色塊是否失真 |
不要只看副檔名就認定某一版一定比較小或比較好。用同一張原圖匯出幾個版本，在實際顯示尺寸下比較，才知道壓縮是否值得。網站如果已經有轉檔或快取機制，也要確認前台實際載入哪一個檔案。
壓縮時保留可閱讀的細節，別只追求最小檔案
網站圖片沒有適用所有情境的單一 KB 上限。主視覺、產品細節與簡單圖示的需求不同，應把顯示尺寸、頁面圖片數量與使用者網路條件一起考慮。
- 先裁掉不需要的範圍，再調整輸出像素尺寸。
- 逐步調整壓縮品質，檢查人臉、文字、細線和產品表面。
- 回到實際頁面，用手機閱讀一次，確認重要資訊仍然清楚。
例如產品細節頁需要辨識接縫或刻度，不能為了縮小檔案，把客戶真正要看的細節壓掉。若縮圖已足夠呈現概況，可讓讀者自行開啟較大圖片，而不是要求每位訪客一開始都下載完整原圖。
圖片說明與替代文字，要跟頁面內容一起準備
圖片檔名可以簡短描述內容，替代文字則應依圖片在頁面中的用途撰寫。以產品照片為例，「桌面型研磨設備正面，顯示操作面板與加工區」比「圖片01」，或堆滿地區、品牌和服務關鍵字更有資訊。
Google 的圖片 SEO 指南建議提供有意義的檔名與替代文字，並把圖片放在相關文字附近。單純裝飾、沒有傳達資訊的圖片，則可以使用空白替代文字；圖表的重要結論仍應在正文中說清楚。
WordPress 上傳後，再確認這三件事
- 選對圖片版本：圖片區塊可以選擇可用解析度，但仍要確認前台實際顯示與清晰度。
- 檢查裁切與替代文字：不要只看媒體庫預覽，文章或頁面中的設定也要確認。
- 圖片留在自己的媒體庫：若只是貼上外站圖片網址，來源移動或停止分享後，圖片可能無法顯示。使用前也應確認授權。
WordPress 官方的圖片區塊說明列有解析度、裁切、說明文字與替代文字等選項。功能可以協助整理素材，但實際輸出仍會受到佈景主題與外掛影響，發布後應回前台確認。
首屏重要圖片與下方圖片，載入方式要分開檢查
延遲載入可以讓下方圖片等到需要時再下載，但首屏最重要的圖片如果也被延後，可能讓主要內容更晚出現。
web.dev 的LCP 優化指南提醒，不應延遲載入作為 LCP 元素的圖片。LCP 用來衡量可視範圍內最大圖片或文字區塊出現的時間；是否為某張圖片，需要實際量測，不能只看它是不是被稱為「封面圖」。
因此，速度改善也要檢查主機回應、樣式與圖片被發現和下載的時機。若只壓縮檔案，卻沒有處理其他延遲來源，整體體驗未必會有明顯改變。
交付素材前，做一次完整檢查
- 每張圖都有對應的頁面、用途與顯示比例。
- 原始檔保留，網站用圖另外匯出與命名。
- 桌機與手機都能看到正確主體，圖內文字仍可閱讀。
- 壓縮後沒有破壞產品細節、圖表或人物畫面。
- 圖片來源、替代文字與必要說明已整理。
- 前台載入正常，圖片沒有遮住按鈕或其他重要內容。
網站圖片準備得好，不只是視覺比較整齊，也能讓設計、內容與後續維護更容易配合。如果正在規劃新網站，可以先整理主要頁面與圖片用途，再與設計者確認素材規格。翱翼數位會將資訊架構、手機體驗與素材配置一起考慮，讓網站能清楚呈現服務，也方便持續更新。
延伸閱讀
參考資料
本文在整理觀念與實務建議時，參考以下第一手資料；查核日期為 2026 年 10 月 24 日：
