元伸科技
設計師習慣把標題、Slogan、訴求刻在 Banner 圖片上——視覺漂亮、字體自由、層次豐富。但 AI 看不懂這些圖，等於你把最重要的訊息對 AI 隱藏起來。
這篇談的是視覺設計與 AI 友善的平衡點：怎麼讓圖片繼續美，但 AI 也能讀懂。完整的 客製化網頁設計 流程中，圖片與 alt 是最容易被忽略卻影響最大的環節。
AI 看圖片時看到什麼？
當 AI 爬到一張圖片，它看到的是這幾個資訊：
<img src="/images/banners/hero-ai-ready.webp"
alt="AI-Ready 網站架構圖，展示首頁如何整合 Schema、FAQ、定義段落三大要素"
width="1200"
height="600">
它讀得到：
- 檔名（
hero-ai-ready.webp） - alt 文字（描述圖片內容）
- 尺寸（推估視覺重要性）
- 周圍 HTML 文字（標題、段落）
它讀不到（或讀取成本很高）：
- 圖片本身的視覺內容
- 圖片內刻死的文字
- 圖片內的色彩、構圖、品牌風格
如果你的圖片只有 <img src="/banner.jpg">，AI 大概只能猜「這裡有一張叫 banner 的圖」，僅此而已。
6 個 AI 友善的圖片設計原則
原則 1：關鍵訊息必須以 HTML 文字呈現
這是最重要的一條。Banner 上的「24 年深耕」「AI-Ready 領導品牌」如果只刻在圖上，AI 完全讀不到，等於沒講。
正確做法：
<section class="hero">
<div class="hero-bg" style="background-image: url('/banner-decorative.webp')"></div>
<div class="hero-content">
<h1>AI-Ready 智慧網站，元伸 24 年深耕</h1>
<p>3,000+ 企業實績，原始碼 100% 移交</p>
<a href="/contact" class="cta-button">免費諮詢・24hr 回覆</a>
</div>
</section>
視覺上仍可華麗，但所有訊息都是真文字，AI 一目了然。
原則 2：每張圖片都要有 alt 屬性
沒寫 alt 的圖片，AI 直接放棄。寫 alt 的方法：
| ❌ 不好 | ✅ 好 |
|---|---|
alt=""（裝飾用除外） |
alt="AI-Ready 網站架構圖，展示樞紐頁與 5 個群集頁的連結關係" |
alt="image" |
alt="元伸科技 2002 年成立至今的服務里程碑時間軸" |
alt="ai-ready-website-structure-diagram-with-hub-and-cluster-pages-showing-internal-linking-strategy-for-seo-and-aiso-optimization" |
alt="網站知識圖譜：樞紐頁連結 5 個子主題群集頁" |
寫法原則：
- 描述圖片實際內容，不是把關鍵字塞滿
- 30-50 字（中文），自然句子
- 包含 1-2 個關鍵字但不刻意
- 如果圖片內有文字，alt 要包含這些文字
原則 3：裝飾性圖片用 alt=""
純裝飾的圖片（背景花紋、分隔線、icon）用空 alt：
<img src="/decoration.svg" alt="">
這明確告訴 AI 與螢幕閱讀器「跳過這張」，不要寫成 alt="裝飾圖"——那等於浪費 AI 的解析資源。
原則 4：檔名語意化
檔名也是訊號。雖然權重不如 alt，但累積起來有幫助：
| ❌ | ✅ |
|---|---|
| IMG_5847.jpg | hero-ai-ready-website.webp |
| screenshot1.png | dashboard-analytics-overview.png |
| 1.gif | logo-animation-loop.gif |
用連字符（-）分隔詞，全小寫，描述性命名。
原則 5：使用 Schema.org ImageObject
對重要圖片（商品圖、文章主圖、團隊照片）加結構化標記（完整作法可參考 Schema.org 結構化資料完整指南）：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "https://example.com/hero.webp",
"caption": "AI-Ready 網站結構示意圖",
"width": 1200,
"height": 600,
"license": "https://example.com/license"
}
</script>
商品圖則用 Product.image，文章主圖用 Article.image，這樣 AI 能精確識別每張圖的角色。
原則 6：使用 <figure> + <figcaption>
需要說明的圖片，用 figure 元件包覆：
<figure>
<img src="/topic-cluster.webp"
alt="主題群集模型示意圖，含樞紐頁與 5 個群集頁">
<figcaption>
Topic Cluster 模型：樞紐頁居中，群集頁圍繞並互相連結
</figcaption>
</figure>
<figcaption> 會被 AI 視為「圖片的延伸說明」，比單純 alt 權重更高。圖文配對的視覺資訊特別需要這個結構。
視覺與 SEO 兼顧的 3 個進階技巧
技巧 1：用 <picture> 提供多格式
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg"
alt="AI-Ready 網站架構示意圖"
width="1200"
height="600"
loading="lazy">
</picture>
現代瀏覽器用 AVIF（最小），舊瀏覽器 fallback JPG。檔案小 = 載入快 = Core Web Vitals 高分 = AI 信任度高（更多技巧見 圖片優化的網頁設計實作）。
技巧 2：明確指定 width 與 height
避免「載入時版面跳動」（CLS, Cumulative Layout Shift）：
<img src="/hero.webp"
width="1200"
height="600"
alt="...">
CLS 是 Core Web Vitals 三大指標之一，CLS 高代表使用體驗差，AI 會降低該網站的引用權重。
技巧 3：lazy loading 不要用在首屏
<!-- 首屏圖片：立即載入 -->
<img src="/hero.webp" alt="..." width="1200" height="600">
<!-- 下方圖片：延遲載入 -->
<img src="/below-fold.webp" alt="..." width="800" height="400" loading="lazy">
首屏 lazy loading 反而會讓 LCP 變慢，要小心使用。
設計師的圖片檢查清單
每次交付前自我檢查：
- 所有圖片都有 alt 屬性（裝飾圖用
alt=""） - 重要訊息（標題、Slogan、CTA）以 HTML 文字呈現
- 圖片檔名語意化（hero-ai-ready.webp 而非 IMG_001.jpg）
- 提供 width 與 height 屬性
- 使用 WebP 或 AVIF 格式（搭配 fallback）
- 商品圖、文章主圖、人像加 ImageObject Schema
- 圖文配對使用
<figure>+<figcaption> - 首屏圖片不用 lazy loading
- 圖片總大小控制在 200KB 以下（Hero 可放寬至 500KB）
結語：讓圖片從「漂亮的裝飾」變成「AI 看得懂的內容」
設計師不需要因為 AI 友善而犧牲視覺，只是要把過去刻在圖上的訊息，變成 HTML 文字 + alt 描述。視覺仍然你的，AI 也讀得懂——這就是平衡點。圖片與文字搭配的另一個重點是 FAQ 區塊的 AI 引用設計，兩者一起做才能讓 AI 真正理解網頁。
元伸科技在驗收網站時，圖片檢查清單是 QA 標準流程之一。一個 AI-Ready 網站，所有圖片都應該能通過上述 9 項檢查。少一項都會在 AI 引用率上打折扣。完整的 AI-Ready 升級服務可參考我們的 解決方案頁。
