#601

Globales Ranking · von 601 Skills

responsive-images AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill responsive-images

36

Installationen

Responsive Images

Overview

Responsive images serve the right image size and format based on viewport, device pixel ratio, and browser capabilities. Proper implementation prevents layout shift (CLS), optimizes Largest Contentful Paint (LCP), and reduces bandwidth by 50-70% with modern formats.

When to use: Any page with images, especially content images, hero images, product photos, and gallery layouts.

When NOT to use: Inline SVG icons, CSS background patterns, or canvas-rendered graphics.

Quick Reference

Pattern Approach Key Points
Responsive sizing srcset with width descriptors (w) + sizes Browser selects optimal image for viewport and DPR
Modern formats <picture> with AVIF, WebP, JPEG sources AVIF saves 70%, WebP saves 50% vs JPEG
Art direction <picture> with media queries Different crops per viewport
LCP hero image loading="eager" + fetchpriority="high" Prioritize download for Core Web Vitals
Below-fold images loading="lazy" Defer until near viewport
Prevent CLS width + height attributes Browser reserves space before load
Fixed containers object-fit: cover or contain Maintain aspect ratio in constrained space
Format fallback AVIF, WebP, JPEG source order Best compression first, universal fallback last

Recommended Image Sizes

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

Loading Strategy

Image Position loading fetchpriority Why
Hero/LCP eager high Optimize LCP, prioritize download
Above fold (not LCP) eager omit Load normally
Below fold lazy omit Defer until near viewport
Off-screen carousel lazy omit Defer until interaction

Format Comparison

Format Quality File Size Browser Support Use Case
JPEG Good Medium 100% Photos, complex images
PNG Lossless Large 100% Logos, transparency
WebP Excellent Small 96%+ Modern browsers, photos
AVIF Excellent Smallest 93%+ Newest format, fallback required

Common Mistakes

Mistake Correct Pattern
Omitting width and height attributes on img elements Always include width and height to prevent CLS layout shift
Lazy loading the LCP hero image Use loading="eager" and fetchpriority="high" for LCP images
Using density descriptors (1x, 2x) for variable-width images Use width descriptors (400w, 800w) with a sizes attribute
Missing alt text on content images Provide descriptive alt text; use alt="" only for decorative images
Serving only JPEG without modern format fallbacks Use <picture> with AVIF and WebP sources falling back to JPEG

Delegation

  • Audit a page for responsive image issues and CLS problems: Use Explore agent to scan HTML for missing attributes, incorrect loading strategies, and format gaps
  • Convert all images on a page to use picture element with modern formats: Use Task agent to rewrite img tags with AVIF/WebP/JPEG fallback chain
  • Plan an image optimization pipeline for a multi-page site: Use Plan agent to design srcset breakpoints, format conversion workflow, and CDN integration

References

Installationen

Installationen 36
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install responsive-images by running npx skills add oakoss/agent-skills --skill responsive-images in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für responsive-images, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport