#601

Global Rank · of 601 Skills

responsive-images AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

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

36

Installs

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

Installs

Installs 36
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 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

How to use this skill

1

Install responsive-images by running npx skills add oakoss/agent-skills --skill responsive-images in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of responsive-images, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

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
Customer Support