Skill

image-optimization

WebP/AVIF format selection, responsive images with srcset, lazy loading, and Firebase Storage image resize extension

Install

Run in your terminal

npx claudepluginhub javimontano/jm-adk-alfa

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

agents/guardian.md

agents/lead.md

agents/specialist.md

agents/support.md

evals/evals.json

knowledge/body-of-knowledge.md

knowledge/knowledge-graph.md

prompts/meta.md

prompts/primary.md

prompts/variations/deep.md

prompts/variations/quick.md

templates/output.docx.md

templates/output.html

Skill Content

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.5k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.5k

agent-eval

Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.

everything-claude-code

139.2k

Stats

Stars1

Forks0

Last CommitMar 28, 2026

Actions

View Source View Plugin View on GitHub View README

098 — Image Optimization {Performance}

Purpose

Minimize image payload while maintaining visual quality. Serve the optimal format, size, and resolution for each device and viewport through modern formats, responsive images, and automated processing. [EXPLICIT]

Physics — 3 Immutable Laws

Law of Format Efficiency: AVIF > WebP > JPEG > PNG for photographic content. Always serve the most efficient format the browser supports. [EXPLICIT]
Law of Right-Sizing: Never serve a 2000px image to a 375px viewport. Responsive images deliver the exact resolution needed. [EXPLICIT]
Law of Deferred Loading: Images below the fold are lazy-loaded. Only above-the-fold hero images load eagerly. The browser decides when to fetch the rest. [EXPLICIT]

Protocol

Phase 1 — Format Pipeline

Source images stored as high-quality originals (JPEG/PNG) in Firebase Storage. [EXPLICIT]
Install Firebase Extension: storage-resize-images — auto-generates resized variants. [EXPLICIT]
Configure sizes: [320, 640, 960, 1280, 1920] widths. Formats: [webp, avif]. [EXPLICIT]
Build-time alternative: sharp or squoosh CLI for static assets in public/. [EXPLICIT]

Phase 2 — Responsive Image Markup

Use <picture> element with <source> for format selection:

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="description">
</picture>

Add srcset with width descriptors: srcset="img-320.webp 320w, img-640.webp 640w". [EXPLICIT]
Add sizes attribute: sizes="(max-width: 768px) 100vw, 50vw". [EXPLICIT]
Set explicit width and height attributes to prevent CLS. [EXPLICIT]

Phase 3 — Loading Strategy

Above-the-fold images: loading="eager", fetchpriority="high", preload in <head>. [EXPLICIT]
Below-the-fold images: loading="lazy", decoding="async". [EXPLICIT]
Background images: use IntersectionObserver for lazy loading CSS backgrounds. [EXPLICIT]

I/O

Input	Output
Original image (JPEG/PNG)	Resized variants (320-1920px) in WebP + AVIF
Firebase Storage upload	Auto-generated resized images via extension
Image component	`<picture>` with srcset, sizes, lazy loading
Build pipeline	Optimized static images in `dist/`

Quality Gates — 5 Checks

No images > 200KB served to any device — resize or compress further. [EXPLICIT]
WebP/AVIF served to supporting browsers — <picture> fallback for others. [EXPLICIT]
All images have width/height — prevents CLS. [EXPLICIT]
Below-fold images lazy-loaded — loading="lazy" present. [EXPLICIT]
Hero image preloaded — <link rel="preload"> in document head. [EXPLICIT]

Edge Cases

SVG images: Don't convert SVGs to raster. Optimize with svgo instead.
User-uploaded images: Process via Firebase Extension on upload — never serve originals.
Animated images: Use <video> for animations instead of GIF. MP4 is 90% smaller.
High-DPI displays: Serve 2x images for Retina (srcset with density descriptors).

Self-Correction Triggers

LCP image slow → check if preloaded, verify CDN cache, reduce image size.
CLS from images → add missing width/height attributes.
Storage costs rising → audit image sizes, remove unused resized variants.
AVIF not serving → verify <picture> source order (AVIF before WebP).

Usage

Example invocations:

"/image-optimization" — Run the full image optimization workflow
"image optimization on this project" — Apply to current context

Assumptions & Limits

Assumes access to project artifacts (code, docs, configs) [EXPLICIT]
Requires English-language output unless otherwise specified [EXPLICIT]
Does not replace domain expert judgment for final decisions [EXPLICIT]