圖片的 alt、尺寸、載入與失敗狀態，為什麼要一起設計

一張作品圖片可以有正確網址，卻仍留下幾個問題：圖片沒出來時讀者看得到什麼，載入前版面要保留多少空間，以及圖片究竟提供了哪一份資訊。

本站的圖片並不只有一種用途。作品卡片有縮圖，設計作品連到外部相簿，關於頁有可放大的頭像，文章作者旁也有一張介紹入口的圖片。它們不適合全部套上同一份 alt 和 loading 設定。

我會先確認圖片在這個位置負責什麼，再一起處理尺寸、載入和失敗狀態。這些選擇都會留在讀者實際收到的頁面裡。

alt 要描述用途，不是替檔名換個說法

本站作品縮圖的 alt 取自該作品的多語標題，設計圖片則取自作品資料中的描述。這能辨認目前展示的項目，但不表示描述已經涵蓋每張圖的細節；像「EDM」這種短標籤，仍需要依實際內容判斷是否足夠。

作者介紹的入口不同。控制本身有「認識林予晴」的可讀名稱，圖片旁也有作者文字；其中的頭像使用 alt="" 與 aria-hidden="true"，不讓相同識別資訊在這裡重複出現。

W3C 的圖片教學指出，不增加內容資訊的裝飾圖片應提供空 alt，而不是省略 alt。[3] 但「裝飾」要依使用情境判斷，不能因為圖片小或在按鈕裡，就一律清空文字。

如果圖片本身包含讀者必須理解的流程或數字，就不能只以作品名稱帶過。這是內容校稿的責任，不是加上某個 HTML 屬性就自動完成。

尺寸是在圖片出現以前，先交代空間

MDN 說明，width 與 height 可提供圖片的固有尺寸資訊，讓瀏覽器在載入前配置空間；這是減少版面位移的一項做法。[2]

本站作品縮圖同時使用尺寸屬性、固定比例的容器和 object-cover。關於頁頭像則使用匯入圖片的尺寸資訊，再由容器和 CSS 決定畫面上的裁切。尺寸屬性與最終顯示大小並不是同一件事。

設計圖牆的圖片有 width="300"、height="200"，顯示樣式則是 h-auto w-full。這是目前的實作設定，不能據此宣稱每張外部原圖的真正比例都是 3:2，或整個圖牆完全沒有位移。外部圖片的實際尺寸和載入後的卡片高度，仍要另外確認。

我的檢查重點是，預留的比例是否符合這個呈現方式。裁切圖需要確認重要內容沒有被切掉；完整顯示的長圖則不應為了整齊，直接套用另一張縮圖的比例。

載入時機要看它出現在哪裡

作品列表與設計圖牆使用 loading="lazy"，關於頁主要頭像使用 loading="eager" 與 fetchpriority="high"；作者介紹旁的頭像也使用 eager。這些是目前不同使用點的設定，不是所有圖片都必須照抄的規則。

loading="lazy" 讓瀏覽器依距離可視區域的條件延後載入；decoding="async" 則是解碼與呈現時機的提示。兩個屬性處理的是不同事情。[2]

因此，我不會把 async 當成 lazy 的替代，也不會在所有圖片上加 high priority。先判斷圖片是否為讀者進頁後立即需要的內容，再決定載入提示，比把同一串屬性複製到整站更有依據。

這裡沒有前後效能量測，不能從屬性選擇直接得出速度改善多少的結論。

失敗提示，要保留圖片原本的用途

本站外部設計圖片有專門的錯誤標記。共用瀏覽器腳本監聽 error，失敗時隱藏圖片並顯示包含作品描述的載入失敗文字；初始化時也檢查已完成卻沒有可用寬度的圖片。

圖牆腳本另外在 load 或 error 後移除卡片載入狀態，並安排重新計算排列。這裡有兩份責任：一份交代圖片不可用，另一份處理卡片狀態和布局。

原本包住圖片的外部連結仍在，所以圖片失敗後，HTML 裡仍保留前往作品相簿的入口。不過，相簿連結是否可用是另一件事，不能用圖片錯誤處理替它保證。

這套自訂失敗提示只針對帶有對應標記的圖片。一般作品縮圖和所有頭像並沒有因此自動取得同一套提示，也沒有自動重試功能。文章不能把某個圖牆的處理，寫成全站每張圖片都已涵蓋。

沒有 JavaScript 時，保留的基礎也要說清楚

alt、尺寸和原生連結留在 HTML；自訂錯誤文字和圖牆的動態狀態則由 JavaScript 處理。若腳本無法執行，自訂失敗提示不會因為它已經寫在模板裡，就自動解除隱藏。

本站設計作品的外部連結還有可讀名稱，但這仍不能代替逐張檢查無腳本時的呈現。原生 HTML 提供基礎，不等於所有載入狀態都已經有相同的降級結果。

這個分層讓我比較容易決定要測什麼：先看頁面收到的內容，再看腳本補上的行為。不能只在網路正常、圖片全部載入的情況下確認畫面。

圖片校稿可以從幾個具體問題開始

下面是檢查建議，不是本輪全部已操作過的結果：

• 圖片不顯示時，讀者是否仍知道這個項目是什麼，控制是否仍有名稱？
• 尺寸與 CSS 比例是否符合實際圖片，裁切有沒有移除重要內容？
• 頁面一開始需要的圖片，是否被延後到不合適的時機？
• 刻意讓圖片請求失敗時，載入狀態是否結束，提示和目的地是否仍成立？
• 關閉 JavaScript 後，主要內容、替代文字及原生連結是否還能理解？

若答案只有「圖片有出來」，這份檢查就還沒碰到失敗和替代內容。

紀錄範圍

本文依據本站目前的作品頁、設計圖資料、關於頁、文章作者元件，以及共用和圖牆腳本整理。外部圖片比例、螢幕閱讀器表現、斷網與所有圖片失敗路徑，沒有在本輪逐項實測；也沒有新的載入速度或版面位移量測。

目前能確認的是原始碼如何分配這些責任，以及哪些圖片採用了哪些設定。要判斷呈現是否合適，還得回到圖片內容和真正的使用情境。

Sources

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img [3] https://www.w3.org/WAI/tutorials/images/decorative