picture-element

thedaviddias/Front-End-Checklist · Agent Skill

檢查使用帶有<img>備用影象的<picture>標籤，分析大小、載入和效能影響。

前往安裝 ↓

總覽

發布者thedaviddias社群
儲存庫thedaviddias/Front-End-Checklist ↗
技能資料夾picture-element
星74,050
附帶檔案1
授權MIT
最近更新2026年5月28日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
低風險 · 未發現明顯風險 — 完整報告會顯示細節
相容性
僅含說明 — 適用於多數代理
相似技能
找到 37 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “picture-element” skill from mozgi.io (https://mozgi.io/skills/picture-element/) for me.

1. Download the archive: https://mozgi.io/skills/picture-element/download
   If it fails, take the skill folder from the source: https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/picture-element
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “picture-element” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/picture-element/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

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

常見問題

picture-element 技能有什麼用途？

檢查使用帶有<img>備用影象的<picture>標籤，分析大小、載入和效能影響。

如何安裝 picture-element？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

picture-element 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 picture-element 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

picture-element 是免費的嗎？

此技能由 thedaviddias 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →
meme-maker 從現有模板建立模因，建議格式並在本地或託管伺服器上生成影象。 openclaw390k stable-diffusion 根據文字描述生成影象，允許編輯現有影象並基於它們建立新影象。 NousResearch245k clip 零樣本影象分類和圖文搜尋。理解自然語言的影象。 NousResearch245k segment-anything-model 使用點、框或掩碼對影象中的任何物件進行零樣本分割。 NousResearch245k imagegen 為您的專案生成或編輯點陣影象，例如照片、插圖、紋理或精靈。 openai122k nanobanana-ppt 利用 NanoBanana 技術棧，透過文件分析和風格化影象生成 PowerPoint 簡報。 nexu-io95.9k