responsive-images
✓Implementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die künstlerische Leitung und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie sie, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren.
Installation
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
| Use Case | Widths to Generate | Sizes Attribute |
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |
Implementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die künstlerische Leitung und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie sie, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren. Quelle: jezweb/claude-skills.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- Quelle
- jezweb/claude-skills
- Kategorie
- </>Entwicklung
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist responsive-images?
Implementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die künstlerische Leitung und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie sie, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren. Quelle: jezweb/claude-skills.
Wie installiere ich responsive-images?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/jezweb/claude-skills --skill responsive-images Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/jezweb/claude-skills
Details
- Kategorie
- </>Entwicklung
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01