LANZE GUIDES / 網站規劃
從圖片用途決定尺寸與裁切，再比較格式和壓縮品質。這篇提供四步輸出流程、依用途撰寫 ALT 的對照表，以及上傳後檢查手機模糊、裁圖與漏圖的方法。
網站圖片優化要先確認圖片用途與顯示比例，再調整像素尺寸、格式和壓縮品質，最後補上合適的替代文字，並在手機上檢查實際畫面。照片要保留主體與細節，資訊圖則要讓文字清楚；不能為了縮小檔案，讓讀者需要看的細節變模糊。
同一張圖在電腦上正常，到了手機卻變模糊、被裁掉，甚至沒有出現，原因未必是原圖不夠大。版型的裁切方式、網站自動產生的小圖，以及載入設定，都可能影響最後看到的結果。
準備圖片時，先挑一張常用圖片，完成一次測試：整理原檔、輸出、上傳、預覽，再打開公開頁面。確認這張能正常使用後，才把同一套做法用到其他同類圖片。
圖片規格應根據實際版面決定。文章封面、商品細節、團隊照片與操作圖解，讀者要看的重點不同，不適合全部套用同一個裁切比例和壓縮設定。
先整理圖片清單，列出使用頁面、顯示位置、讀者需要看見的內容，以及是否需要手機版本。例如文章列表的小封面重在辨識主題，內文的流程圖則要看清步驟；兩者即使使用相同素材，也可能需要分別製作。
可以請網站製作人員提供現有版型的圖片比例與最大顯示寬度，再由負責內容的人確認哪些細節不能裁掉。若網站還在規劃，可先參考網站建置前需要準備的資料，把圖片與文案一起安排，避免版型完成後才發現素材不合用。
原始照片、可編輯的設計檔與網站上傳檔應分開存放。日後要做不同尺寸時，從原始檔重新輸出，不要拿已縮小、壓縮過的圖片一再放大修改。檔名可使用簡短的主題與用途，例如「team-photo-wide」，讓接手的人看得懂，不必塞進一串關鍵字。
清單也要寫明圖片來源與可使用範圍。若是客戶提供的照片或案例截圖，先確認哪些內容可以公開，再處理裁切。案例圖片應保留理解成果所需的資訊；整理方式可搭配客戶案例文章的資料與成果呈現方法。
像素尺寸決定圖檔包含多少影像資料，裁切比例決定版面保留哪些範圍。照片被切掉人臉時，優先處理構圖與裁切；照片看起來模糊時，再檢查實際載入的圖片尺寸與壓縮程度。
網頁上的顯示寬度，不一定等於圖檔所需的像素寬度。假設圖片在手機上顯示為 360 個 CSS 像素寬，裝置像素比為 2，可以先測試 720 像素寬的版本；實際仍要配合網站的響應式圖片設定與畫面清晰度確認，不能把這個算例當成所有圖片的固定規格。
網站可以提供不同尺寸的圖片，讓瀏覽器依畫面與裝置條件選用。內容人員需要確認的是：上傳後是否產生適合的尺寸，以及手機實際載入哪個版本。不要因為媒體庫裡的原圖很清楚，就認定文章頁一定使用相同檔案。
例如一張 1200 × 800 像素的橫式照片，若不縮放、從中央裁出 800 × 800 的正方形，左右各會少掉 200 像素。人物若站在畫面邊緣，就可能被切掉。這時可以改變裁切位置、另做一張構圖適合的版本，或讓版面完整顯示照片。
版型若採用填滿圖片框的方式，通常會保留比例並裁掉超出的部分；若要求完整顯示，則可能留下空白。應先決定哪一種適合內容，不要把照片硬拉成指定比例，造成臉形、產品或標誌變形。
封面上的重要文字也不要緊貼邊緣。桌面封面、文章列表和手機畫面可能有不同裁切。能放成網頁文字的標題，優先與圖片分開；若需要疊在照片上，也要檢查文字與背景的對比，可延伸閱讀品牌配色與文字對比的處理方法。
照片可以先比較 JPG 與網站支援的新式格式；需要透明背景或清楚線條時，另外評估 PNG 或合適的向量檔。格式選擇要同時考慮畫質、檔案大小及網站能否正常處理，採用新格式前，先用一張圖確認整個流程都正常。
| 格式 | 可以優先考慮的內容 | 輸出時要留意 |
|---|---|---|
| JPG／JPEG | 照片、漸層豐富的影像 | 不支援透明背景；過度有損壓縮可能讓細字與邊緣模糊 |
| PNG | 需要透明背景或保留銳利線條的圖 | 照片使用時檔案可能偏大，需和其他格式實際比較 |
| WebP／AVIF | 希望兼顧畫質與壓縮的網站圖片 | 先確認網站上傳、縮圖產生與前台顯示都支援 |
| SVG | 原本就以向量製作的標誌與簡單圖形 | 使用可信任且經適當處理的檔案；不是把照片改副檔名就能轉成向量 |
同一張照片可以輸出成不同格式，放在相同顯示尺寸下比較。先看臉部、產品邊緣與漸層是否正常，再比較檔案大小。不同工具的品質數字未必代表相同畫質，不要直接用數字高低替代檢查。
網站若已經會轉換圖片格式，先確認它實際產生了什麼，再決定上傳規格。內容人員不需要為了單篇文章自行安裝外掛；可把測試結果交給維護人員，確認現有流程是否已足夠。
先裁切與縮放，再比較壓縮品質，最後檢查上傳後的版本。先處理不需要的範圍與過大的尺寸，通常比直接把品質拉到最低更容易保留清楚的畫面。
照片可以先看人物表情、產品表面與主要輪廓；資訊圖則看中文字、箭頭和數字。把這些位置當作比較重點。若圖片需要放大才能讀懂大部分文字，應先簡化版面或把詳細說明移到正文，再考慮壓縮。
依已確認的比例製作版本，再調整到所需尺寸。縮小後重新檢查主體是否完整，尤其是照片邊緣的文字、標誌和人物。不要為了追求更小的檔案，刪掉讓讀者理解前後比較的關鍵部分。
保持格式、尺寸與裁切相同，只改壓縮品質，才容易看出差異。把候選圖並排放在預計顯示的大小，選出仍清楚、檔案又較小的一份。若字邊出現雜點、漸層變成一塊塊色帶，先提高品質或改用較適合的格式。
把用途、尺寸、格式、品質設定與成品大小記在圖片清單。同一類素材可以先照這份設定輸出，再檢查差異；照片和文字圖卡應分開建立範例。每張圖的細節不同，輸出後仍要逐張查看。
不必把所有圖片壓到同一個 KB 上限。一張需要看清細節的產品圖，和一張簡單裝飾圖，合理大小可能不同。若整頁很慢，也要看圖片數量與實際載入的版本，而不是只盯著其中一張檔案。
替代文字，也就是 ALT，應補上看不到圖片時仍需要理解的資訊。一般內容圖描述重點，用作按鈕或連結的圖片說明動作，純裝飾圖片可使用空的替代文字；複雜圖表則需要正文一起提供完整說明。
| 圖片用途 | 替代文字的寫法 | 需要一起檢查 |
|---|---|---|
| 提供內容資訊 | 描述與當段相關的主體與特徵 | 不要加入圖片裡看不到、也無法確認的說法 |
| 作為連結或按鈕 | 說明目的或動作，例如「開啟商品尺寸表」 | 依整個控制項判斷；若已有清楚文字名稱，避免重複朗讀 |
| 只作裝飾 | 使用空 ALT，讓輔助工具略過 | 空 ALT 與漏填屬性不同，需確認實際網頁設定 |
| 流程、比較表或複雜圖表 | 簡短說明圖的主題，細節放在相鄰正文或表格 | 不看圖也能取得重要步驟、數字與結論 |
例如介紹包裝設計時，若圖片確實呈現棕色紙盒與單色標誌，可寫「棕色紙盒正面以單色標誌搭配留白」。不要改成「專業品牌設計、最佳包裝設計、推薦設計公司」；後者沒有補充畫面資訊。
同一張圖放在不同段落，描述也可能不同。團隊照片若用於介紹成員，重點可能是人物；放在討論工作方式的段落，則可能需要描述實際可見的互動。不能憑一張照片推測人物身分、合作成果或當時情緒。
ALT 不能修復圖片沒有顯示的問題，也不能代替整張資訊圖的正文。上傳後應確認文章中的圖片確實帶有預期描述；有些編輯流程會把描述複製到文章，之後只改媒體庫，文章原有的內容未必一起改變。
一打開頁面就需要看到的重要圖片，應避免因延遲載入而太晚出現；頁面下方的圖片則可以評估延遲載入，減少一開始的下載量。設定後仍要用實際頁面確認，不能把所有圖都設成同一種方式。
圖片也應提供正確寬高或比例，讓瀏覽器在下載完成前預留位置，減少閱讀時整段文字突然往下跳。圖片載入得快與版面不晃動，是兩件都要檢查的事。
如果下方圖片一直沒有出現，先確認它的檔案能否開啟，再檢查是否被樣式隱藏、延遲載入沒有觸發，或手機選到的縮圖失效。不要一看到空白就把整站的載入設定全部關掉；先確認哪些圖片沒有顯示，再交給維護人員修正。
測試時先重新開啟文章，記下還沒捲動時的狀況，再往下閱讀。需要反覆點擊或重新整理才出現的圖片，不應被記成一開始就正常。若問題只在某個裝置出現，保留裝置、頁面位置與畫面，會比一句「圖片壞掉了」更容易查明。
圖片完成上傳後，要以一般訪客會看到的頁面驗收。媒體庫能預覽，只能證明那裡有圖，還不能確認文章的裁切、尺寸、描述與手機顯示都正確。
回報問題時，把位置和現象寫在一起。例如「手機文章第二張流程圖的右側步驟被裁掉」，就能先查比例與裁切；「同一位置顯示空白，但原圖可以開啟」，則需要查文章所用的縮圖與載入方式。
修好後回到原本出錯的頁面與尺寸再測一次。確認結果正常，再把可沿用的設定補回圖片清單。這份清單應保留原始檔位置、最後採用的版本與用途，之後換封面或做新文章時才找得到正確素材。
沒有適用所有網站與圖片的單一上限。先依用途與顯示尺寸輸出，再比較清晰度和大小；也要看整頁圖片數量、載入方式與網站本身的限制。文字圖卡若為了壓到固定大小而無法閱讀，應先簡化內容或調整格式。
不需要。ALT 應描述圖片在該段落的資訊或功能，關鍵字只有在自然且符合畫面時才使用。純裝飾圖片可採空 ALT，複雜資訊圖則搭配正文說明。重複貼上文章標題，通常無法取代有用的圖片描述。
先查手機實際載入的版本。網站可能選到過小的縮圖，也可能在轉檔時壓縮過度，或把圖片放大超過適合的尺寸。確認是哪一個檔案與顯示位置出問題，再調整縮圖或版型；直接再傳一張更大的原圖未必能解決。
現在可以挑一張常用封面，記下它的使用位置、比例、像素尺寸、格式、檔案大小與 ALT。完成輸出後，上傳並查看桌面、手機及文章列表的實際結果。確認沒有模糊、誤裁或漏圖，再用同一流程整理下一批素材；資訊圖與照片分開測試，保留各自清楚可用的範例。
發布：嵐澤 LANZE / 發布日期
LANZE GUIDE