picture-element

thedaviddias/Front-End-Checklist · Agent Skill

Controlla l'uso del tag <picture> con un fallback <img>, analizzando dimensioni, caricamento e impatto sulle prestazioni.

Vai all'installazione ↓

Panoramica

AutorethedaviddiasCommunity
Repositorythedaviddias/Front-End-Checklist ↗
Cartella dello skillpicture-element
Stelle74.050
File inclusi1
LicenzaMIT
Aggiornato28 maggio 2026
LinkSorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza
rischio basso · nessun rischio evidente — il report completo mostra i dettagli
Compatibilità
solo istruzioni — funziona con la maggior parte degli agenti
Skill simili
37 skill simili trovati
Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

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.

File dello skill

1 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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

Domande frequenti

Che cosa fa lo skill picture-element?

Controlla l'uso del tag <picture> con un fallback <img>, analizzando dimensioni, caricamento e impatto sulle prestazioni.

Come si installa picture-element?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona picture-element?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi picture-element funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

picture-element è gratuito?

Lo skill è pubblicato apertamente da thedaviddias con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →
meme-maker Crea meme da modelli pronti, suggerendo formati e generando immagini localmente o ospitate. openclaw390k stable-diffusion Genera immagini da descrizioni testuali, consente di modificare immagini esistenti e crearne di nuove basate su di esse. NousResearch245k clip Classificazione di immagini zero-shot e ricerca di immagini tramite testo. Comprende le immagini dal linguaggio naturale. NousResearch245k segment-anything-model Segmenta qualsiasi oggetto nelle immagini senza addestramento preliminare, utilizzando punti, caselle o maschere. NousResearch245k imagegen Genera o modifica immagini raster come foto, illustrazioni, texture o sprite per il tuo progetto. openai122k nanobanana-ppt Genera presentazioni PowerPoint dall'analisi dei documenti, utilizzando l'IA e immagini stilizzate dello stack NanoBanana. nexu-io95.9k