⚡AgentSkills
🎨 Frontend Engineering · Web Performance

Ship images that cost almost nothing

Modern formats, responsive sizes, lazy strategies, and priority hints for above-fold heroes.

foundation~25 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

  1. 1Serve AVIF/WebP with automatic fallbacks via an image component or CDN
  2. 2Generate responsive srcsets at 3-4 widths matched to actual layout slots
  3. 3Lazy-load below-fold images; set fetchpriority=high on the LCP hero only
  4. 4Always set explicit width and height to protect CLS
  5. 5Strip metadata at upload; cap decoded size for thumbnails
  6. 6Audit monthly for orphaned assets and unoptimized direct <img> usage

Common Pitfalls

  • ▲Lazy-loading the hero because a global wrapper applied it
  • ▲Serving 2400px originals into 300px cards

Commands

Install with skills CLI
$ npx skills add aniruddhaadak80/skills --skill web-performance-image-pipeline
Install globally
$ npx skills add aniruddhaadak80/skills --skill web-performance-image-pipeline -g

Tags

#images#performance#frontend-engineering#web-performance

Related skills

Fix Core Web Vitals regressions systematicallyadvanced

Diagnose LCP, INP, and CLS from field data and apply targeted fixes per metric rather than guessing.

🎨 Frontend Engineering·~45m
Open →
Put JavaScript bundles on a dietintermediate

Analyze, split, and replace dependencies so routes ship only the code they execute.

🎨 Frontend Engineering·~35m
Open →