圖片最佳化分析

檢查項目

替代文字 (Alt Text)

所有 <img> 元素（裝飾性圖片除外，role="presentation"）都需有替代文字。parse_html.py 會將這類圖片標記為 decorative: true；請勿因缺少替代文字而對其發出警告。
具描述性：描述圖片內容，而非「image.jpg」或「photo」
在自然的情況下包含相關關鍵字，避免關鍵字堆砌
長度：10-125 個字元

良好範例：

"Professional plumber repairing kitchen sink faucet"
"Red 2024 Toyota Camry sedan front view"
"Team meeting in modern office conference room"

不良範例：

"image.jpg"（檔案名稱，非描述）
"plumber plumbing plumber services"（關鍵字堆砌）
"Click here"（不具描述性）

檔案大小

依圖片類別分層級閾值：

圖片類別	目標	警告	嚴重
縮圖	< 50KB	> 100KB	> 200KB
內容圖片	< 100KB	> 200KB	> 500KB
主視覺/橫幅圖片	< 200KB	> 300KB	> 700KB

建議在盡可能不影響畫質的情況下，壓縮至目標閾值。

格式

格式	瀏覽器支援度	使用案例
WebP	97%+	預設推薦
AVIF	92%+	最佳壓縮，較新格式
JPEG	100%	相片的備援格式
PNG	100%	含透明度的圖像
SVG	100%	圖示、標誌、插圖

建議使用 WebP/AVIF 取代 JPEG/PNG。檢查是否使用 <picture> 元素搭配格式備援。

判斷實際提供的格式，而非 URL 副檔名

許多網站會從 .jpg/.png URL 提供 WebP 或 AVIF 格式（當瀏覽器要求時），例如 WordPress WebP 外掛（EWWW、ShortPixel、WebP Express、Imagify）、Cloudflare Polish、圖片 CDN 等。副檔名並非訪客實際收到的格式。請執行 "${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py --url <url> --probe-images --json，它會以瀏覽器 Accept 標頭擷取每張圖片，並為每個圖片項目新增以下欄位（對於延遲載入的圖片，它會探查 resolved_src，即實際來源，因為此時 src 僅為佔位符）：

欄位	意義
`served_format`	實際提供的格式（`webp`、`avif`、`jpeg`、`png`、`gif`、`svg`、`jxl`），來自魔術位元組，否則為 `null`
`served_bytes`	實際提供的大小（Content-Length），若伺服器省略則為 `null`
`negotiated`	當回應包含 `Vary: Accept` 時為 `true`，表示格式取決於瀏覽器
`probe_error`	無法檢查圖片的原因（擷取失敗、URL 格式錯誤、或回應非可識別的圖片，例如 HTML 錯誤或防盜連頁面），否則為 `null`

僅根據 served_format / served_bytes 標記「錯誤格式」與大小節省。如果 .jpg URL 的 served_format: webp，表示已最佳化：請勿建議轉換。
如果設定了 probe_error，請將格式回報為未驗證。切勿從副檔名推斷格式。
在確認 HTTP 200 回應之前，切勿建議更換圖片 URL（例如 photo.webp）。

建議的 `<picture>` 元素模式

使用漸進增強，將最高效的格式放在最前面：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

瀏覽器會使用第一個支援的格式。全球瀏覽器支援度（caniuse.com，檢查日期 2026-09-28）：AVIF 約 95.4%，WebP 約 96.8%。引用前請重新檢查 caniuse。

JPEG XL：新興格式

第三方報導與維基百科描述，基於 Rust 的 JPEG XL 解碼器已於 Chrome 145 穩定版（2026-02-10）中，在 chrome://flags/#enable-jxl-image-format 標誌後方推出，但預設未啟用；事實包中未檢索到 Google 自己的確認。由於預設支援尚未確認，目前還不適合用於實際生產的網頁傳遞。請繼續提供 AVIF/WebP 搭配 JPEG 備援，並持續關注。

響應式圖片

srcset 屬性用於多種尺寸
sizes 屬性需符合版面配置斷點
根據裝置畫素比使用適當解析度

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

延遲載入

對摺頁以下的圖片使用 loading="lazy"
請勿對摺頁以上/主視覺圖片使用延遲載入（會損害 LCP）
檢查使用的是原生還是 JavaScript 驅動的延遲載入

<!-- 摺頁以下 - 延遲載入 -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- 摺頁以上 - 立即載入（預設） -->
<img src="hero.jpg" alt="Hero image">

偵測到的延遲載入方法（`lazy_method` 欄位）

"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py 會透過每個圖片項目的 lazy_method 欄位分類圖片的延遲載入機制。共有五種值：

`lazy_method`	偵測到的信號	常見技術棧
`native`	`loading="lazy"` HTML 屬性	現代瀏覽器、純 HTML
`perfmatters`	`data-perfmatters-src`/`-srcset` 或 class `perfmatters-lazy`	WordPress + Perfmatters 外掛
`ewww`	`data-ewww-src` / `data-eio` 或 class `lazyload-eio`	WordPress + EWWW Image Optimizer
`js-generic`	`data-src` / `data-lazy-src` / `data-original` / `data-srcset` 或 class `lazyload`/`lazyloaded`/`lazy`	Lazysizes、vanilla-lazyload、jQuery 外掛
`none`	無屬性或 class 信號	此圖片未使用延遲載入

稽核圖片 SEO 時，請將 lazy_method 與 loading 一併回報，讓使用者知道他們的網站是使用 JS 驅動的延遲載入（此時原生 loading="lazy" 屬性會刻意省略，這並非退步）。

為 LCP 圖片設定 `fetchpriority="high"`

為您的主視覺/LCP 圖片加上 fetchpriority="high"，以在瀏覽器的網路佇列中優先下載：

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

關鍵： 請勿對摺頁以上/LCP 圖片使用延遲載入。對 LCP 圖片使用 loading="lazy" 會直接損害 LCP 分數。僅對摺頁以下的圖片使用 loading="lazy"。

為非 LCP 圖片設定 `decoding="async"`

為非 LCP 圖片加上 decoding="async"，以防止圖片解碼阻塞主執行緒：

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

CLS 預防

所有 <img> 元素都需設定 width 和 height 屬性
或使用 aspect-ratio CSS 作為替代方案
標記未設定尺寸的圖片

<!-- 良好 - 已設定尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- 良好 - 使用 CSS aspect ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- 不良 - 未設定尺寸 -->
<img src="photo.jpg" alt="Description">

檔案名稱

具描述性：使用 blue-running-shoes.webp 而非 IMG_1234.jpg
以連字號分隔、全小寫、無特殊字元
包含相關關鍵字

CDN 使用

檢查圖片是否從 CDN 提供（不同網域、CDN 標頭）
對於圖片較多的網站，建議使用 CDN
檢查邊緣快取標頭

輸出

圖片稽核摘要

指標	狀態	數量
圖片總數	-	XX
缺少替代文字	❌	XX
檔案過大 (>200KB)	⚠️	XX
格式錯誤	⚠️	XX
未設定尺寸	⚠️	XX
未延遲載入	⚠️	XX

優先最佳化清單

按檔案大小影響排序（節省空間最多的優先）：

圖片	目前大小	格式	問題	預估節省
...	...	...	...	...

建議

將 X 張圖片轉換為 WebP 格式（預估節省 XX KB）
為 X 張圖片加入替代文字
為 X 張圖片加入尺寸屬性
對 X 張摺頁以下圖片啟用延遲載入
壓縮 X 張過大的圖片

圖片 SERP 分析

當 DataForSEO MCP 可用時，使用競爭資料增強圖片稽核。

`/seo images serp <keyword>`

將網頁上的圖片與 Google SERP 中顯示的圖片結果進行交叉比對。

工作流程：

固定的 DataForSEO MCP 伺服器 (2.8.10) 沒有 Google 圖片 SERP 工具。當 SERP 包含圖片元素時，請使用 serp_organic_live_advanced (depth=100) 的 images 元素；如果沒有可用的圖片 SERP 資料，請直接說明。
提取：頂級網域、圖片類型、替代文字模式
輸出競爭對手的圖片 SERP 概況

輸出：

排名	網域	標題/替代文字	圖片 URL	頁面 URL
1	example.com	"Blue running shoes..."	.../shoes.webp	/products/...

分析內容包括：

網域主導度：哪些網站佔據最多的圖片排名位置（前 10 名）
替代文字模式：排名靠前圖片的常見標題/替代文字模式
格式分佈：熱門結果中 WebP、JPEG、PNG 的佔比
機會分數：您在該關鍵字有頁面排名但缺乏圖片曝光的項目

如果 DataForSEO MCP 不可用，請告知使用者並建議安裝擴充功能。

圖片檔案最佳化

為 SEO 最佳化圖片檔案：格式轉換、中繼資料注入、壓縮。

`/seo images optimize <path>`

為網路與 SEO 最佳化圖片檔案。轉換為 WebP/AVIF、注入 IPTC 中繼資料、壓縮，並產生響應式變體。

使用的工具（依偏好順序）：

exiftool -- 讀寫 EXIF/IPTC/XMP（安裝：sudo apt install libimage-exiftool-perl）
cwebp -- WebP 轉換（安裝：sudo apt install webp）
ImageMagick convert -- 格式轉換、調整大小（多數系統已預裝）
FFmpeg -- 格式轉換的備援方案（已預裝）

執行前： 使用 which exiftool cwebp convert ffmpeg 檢查哪些工具可用。

格式轉換

將圖片轉換為現代格式，並保留中繼資料：

# WebP（建議預設）- 保留中繼資料
cwebp -q 82 -metadata all input.jpg -o output.webp

# 透過 ImageMagick 轉換 WebP（若未安裝 cwebp 時的備援）
convert input.jpg -quality 82 output.webp

# 透過 FFmpeg 轉換 AVIF（編碼較慢，壓縮最佳）
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -still-picture 1 output.avif

# 響應式變體（400w、800w、1200w）
convert input.jpg -resize 400x -quality 82 image-400.webp
convert input.jpg -resize 800x -quality 82 image-800.webp
convert input.jpg -resize 1200x -quality 82 image-1200.webp

中繼資料注入（IPTC，用於 Google 圖片顯示）

Google 圖片會在搜尋結果中顯示 IPTC 的建立者、信用標示與版權資訊。這並非排名因素，但可以改善 Google 圖片的顯示效果與品牌歸屬。

使用 exiftool（建議）：

# 讀取所有中繼資料
exiftool image.jpg

# 為 Google 圖片豐富結果注入 IPTC + XMP 中繼資料
exiftool \
  -IPTC:ObjectName="Product Photo Description" \
  -IPTC:Caption-Abstract="Detailed image description" \
  -IPTC:By-line="Brand Name Photography" \
  -IPTC:Credit="Brand Name" \
  -IPTC:CopyrightNotice="Copyright 2026 Brand Name" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="Product Photo Description" \
  -XMP:Description="Detailed image description" \
  -XMP:Creator="Brand Name Photography" \
  -XMP:Rights="Copyright 2026 Brand Name" \
  image.jpg

# 批次注入目錄中的所有圖片
exiftool -overwrite_original \
  -IPTC:By-line="Brand Name" \
  -IPTC:CopyrightNotice="Copyright 2026 Brand Name" \
  *.jpg *.webp *.png

使用 ImageMagick（備援）：

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "Product Photo Description" \
  -set IPTC:2:80 "Brand Name Photography" \
  -set IPTC:2:116 "Copyright 2026 Brand Name" \
  output.jpg

注意：WebP 支援 EXIF 和 XMP，但原生不支援 IPTC。對於 WebP 檔案，請使用 XMP 欄位代替 IPTC。exiftool 會自動處理此轉換。

AI 生成圖片：`DigitalSourceType`（Merchant Center 要求）

對於生成式 AI 產生的產品圖片，Google Merchant Center 要求 包含 IPTC DigitalSourceType: TrainedAlgorithmicMedia 中繼資料。這是操作性的政策要求，而非排名因素：未對 AI 生成的圖片加上此標籤的資料饋送可能會被拒登。

主要來源（Merchant Center AI 生成內容政策）： https://support.google.com/merchants/answer/14743464 （ai-optimization-guide 未記錄 DigitalSourceType/IPTC/Merchant 標籤。）

稽核指令：

# 稽核目錄中的 IPTC 標籤（統計：缺少、AI、擷取等）
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./images/ --json

# 稽核單一圖片
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./hero.webp --json

# 為圖片注入 AI 標籤
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# 其他詞彙值：
#   compositeSynthetic               （混合擷取 + AI 元素）
#   algorithmicMedia                 （完全由演算法建立，非來自取樣訓練資料）
#   compositeWithTrainedAlgorithmicMedia（例如在真實媒體上進行 AI 內補繪/外補繪）
#   digitalCapture                   （完全實拍的照片）

原始 exiftool 等效指令（用於臨時使用）：

# 手動注入
exiftool \
  -XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
  ai-generated-product.jpg

# 稽核：找出目錄中缺少標籤的圖片
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
  -filename -DigitalSourceType *.jpg *.webp *.png

Google 會提取以下 IPTC DigitalSourceType 值：

trainedAlgorithmicMedia：完全由 AI 生成（擴散模型的產品圖片請使用此值）
compositeSynthetic：混合擷取 + AI 生成的元素
algorithmicMedia：完全由演算法建立，非來自取樣 ...

[翻譯因篇幅而截斷]

在你喜歡的 AI 中提問

預覽

說明文件

圖片最佳化分析

檢查項目

替代文字 (Alt Text)

檔案大小

格式

判斷實際提供的格式，而非 URL 副檔名

建議的 <picture> 元素模式

JPEG XL：新興格式

響應式圖片

延遲載入

偵測到的延遲載入方法（lazy_method 欄位）

為 LCP 圖片設定 fetchpriority="high"

為非 LCP 圖片設定 decoding="async"

CLS 預防

檔案名稱

CDN 使用

輸出

圖片稽核摘要

優先最佳化清單

建議

圖片 SERP 分析

/seo images serp <keyword>

圖片檔案最佳化

/seo images optimize <path>

格式轉換

中繼資料注入（IPTC，用於 Google 圖片顯示）

AI 生成圖片：DigitalSourceType（Merchant Center 要求）

Individual skills in this repo

orlandoneto/aaron-short-video-scripter

相關技能

steipete/songsee

affaan-m/frontend-design

mattpocock/improve-codebase-architecture

lobehub/add-provider-doc

addyosmani/browser-testing-with-devtools

bytedance/chart-visualization