image-optimization
✓Kompetente Anleitung zur Bildoptimierung für die Webleistung. Verwendung bei der Arbeit mit Bildformaten (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), Komprimierungseinstellungen, responsiven Bildern, Lazy Loading, CDNs, Core Web Vitals oder jeder bildbezogenen Webentwicklungsaufgabe. Behandelt Formatauswahl, Qualitätseinstellungen, Quellensatz/Größen, Bildelement, Art Direction, Abrufpriorität, Platzhalterstrategien (LQIP, Blur-up, Blurhash), Containerabfragen, HDR/breiter Farbraum, KI-gestützte Bildtools, Edge-/serverlose Verarbeitung und Leistungsoptimierung.
Installation
SKILL.md
| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |
| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |
Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560
Kompetente Anleitung zur Bildoptimierung für die Webleistung. Verwendung bei der Arbeit mit Bildformaten (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), Komprimierungseinstellungen, responsiven Bildern, Lazy Loading, CDNs, Core Web Vitals oder jeder bildbezogenen Webentwicklungsaufgabe. Behandelt Formatauswahl, Qualitätseinstellungen, Quellensatz/Größen, Bildelement, Art Direction, Abrufpriorität, Platzhalterstrategien (LQIP, Blur-up, Blurhash), Containerabfragen, HDR/breiter Farbraum, KI-gestützte Bildtools, Edge-/serverlose Verarbeitung und Leistungsoptimierung. Quelle: igorvaryvoda/image-optimization-skill.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization- Kategorie
- </>Entwicklung
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist image-optimization?
Kompetente Anleitung zur Bildoptimierung für die Webleistung. Verwendung bei der Arbeit mit Bildformaten (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), Komprimierungseinstellungen, responsiven Bildern, Lazy Loading, CDNs, Core Web Vitals oder jeder bildbezogenen Webentwicklungsaufgabe. Behandelt Formatauswahl, Qualitätseinstellungen, Quellensatz/Größen, Bildelement, Art Direction, Abrufpriorität, Platzhalterstrategien (LQIP, Blur-up, Blurhash), Containerabfragen, HDR/breiter Farbraum, KI-gestützte Bildtools, Edge-/serverlose Verarbeitung und Leistungsoptimierung. Quelle: igorvaryvoda/image-optimization-skill.
Wie installiere ich image-optimization?
Ö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/igorvaryvoda/image-optimization-skill --skill image-optimization 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/igorvaryvoda/image-optimization-skill
Details
- Kategorie
- </>Entwicklung
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01