picture-element

thedaviddias/Front-End-Checklist · Agent Skill

檢查使用帶有<img>備用圖像的<picture>標籤，分析大小、加載和性能影響。

前往安裝 ↓

安裝選項

預設為含檢閱步驟的提示。您可以切換到直接指令。

透過 Claude 或 Codex 安裝

複製提示，貼入 Claude、Codex 或其他助手，它會檢視技能頁面並安裝。

I'd like to install this Claude Code skill:
https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/picture-element

Please review the SKILL.md file, verify the skill is legitimate, then copy the skill folder into .claude/skills/ of my project.

技能檔案

1 個檔案 下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

SKILL.md 內容

作者原文 · 唯讀

Use <picture> with an <img> fallback

A <picture> without an <img> fallback renders nothing in browsers that don't support <picture> (IE11) or don't support any of the <source> formats. The <img> child is also where alt, width, height, loading, and fetchpriority attributes live—these apply regardless of which source the browser selects.

Quick Reference

  • Every <picture> must end with an <img> element—it is the required fallback and carries alt
  • <source> elements are evaluated top-to-bottom; the first match wins
  • Use type="image/avif" and type="image/webp" on <source> for format selection
  • The <img src> should point to a JPEG or PNG—the universal fallback for all browsers

Check

Scan all <picture> elements in this codebase. Verify: 1) Every <picture> has an <img> as its last child (required fallback). 2) The <img> has an alt attribute. 3) The <img> has width and height attributes. 4) <source> elements appear before the <img> child. 5) Each <source> has either a srcset attribute or a media attribute. 6) format-selecting <source> elements have a type attribute (type="image/avif", type="image/webp"). Flag any <picture> missing an <img> child or with <img> not as the last child.

Fix

For each <picture> element with issues: 1) If missing <img>: add <img src="{fallback-url}" alt="{description}" width="{w}" height="{h}"> as the last child. 2) If <img> is not last: move it to after all <source> elements. 3) If <source> elements lack type attributes for format selection: add type="image/avif" or type="image/webp". 4) Verify the <img src> points to a universally supported format (JPEG or PNG) as the ultimate fallback. Show the corrected <picture> markup.

Explain

Explain how the <picture> element works. Browsers evaluate <source> elements in document order and use the first one whose conditions match (type, media, srcset). The <img> element is the fallback for browsers that don't support <picture> (IE11) or don't support the source format. Without an <img> child, <picture> is invalid HTML and produces no output. The alt attribute must be on the <img>, not the <source> elements—it applies regardless of which source is selected.

Code Review

Review image assets, markup, and delivery configuration related to Use <picture> with an <img> fallback. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.

---

For full implementation details, code examples, and framework-specific guidance,

see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/images/picture-element