How do I install the Image Optimization skill?

Run npx skillmds@latest add amey-thakur/image-optimization in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Image Optimization safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Image Optimization?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Image Optimization free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Image Optimization?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Image Optimization by amey-thakur — Agent Skill

Name: Image Optimization
Author: Amey-Thakur

Image Optimization

Serve right-sized images by encoding modern formats, generating responsive srcset widths, and deferring offscreen decode while prioritizing the hero. Use when images are the heaviest bytes on a page or the LCP element loads slowly.

Amey-Thakur 071a47a 2.5 KB Updated Sep 17, 2026

File contents

Image optimization

Images are usually the heaviest bytes on a page and the most common Largest Contentful Paint element. Shipping one oversized original to every device wastes bandwidth on phones and delays the first meaningful paint. Serve the right format, the right dimensions for the viewport, and decode off the critical path.

Method

Encode to a modern format. Serve AVIF or WebP with a JPEG fallback through <picture>. AVIF is often 30 to 50 percent smaller than JPEG at equal quality. Produce it with sharp, Squoosh, or a build step; never ship the camera's original file.
Generate responsive widths with srcset. Produce several sizes and let the browser choose: srcset plus sizes so a phone downloads a 400px image and not the 2000px desktop one. On mobile this is the single biggest byte win.
Declare width and height, or an aspect ratio. Missing dimensions let the image shift the layout as it loads. Setting them, or aspect-ratio, lets the browser reserve the box and keeps CLS near zero.
Lazy-load below the fold, prioritize above it. Add loading="lazy" to offscreen images to defer their fetch, and fetchpriority="high" with a preload on the LCP image to pull it forward. Never lazy-load the hero: it delays LCP.
Decode asynchronously and cover the gap. Set decoding="async" so the browser decodes off the main thread. For large images, show a low-quality placeholder or a solid color so the space is not a blank box during load.
Compress to a target, not to lossless. Tune quality to roughly 75 to 85 for photographs and strip metadata. Confirm in the network panel that the delivered bytes match the displayed size, not the source resolution.

Checks

Does each image ship as AVIF or WebP with a fallback, not a raw JPEG or PNG?
Does a phone download a phone-sized file through srcset?
Do images carry dimensions so they never shift the layout?
Is the LCP image prioritized while everything below the fold is lazy?

Boundaries

Tying these fixes to the LCP and CLS numbers is web-vitals; delivering the bytes from an edge cache is cdn-strategy. Vector graphics and icon fonts follow different rules. This skill covers raster images on the web.

---name: image-optimizationdescription: Serve right-sized images by encoding modern formats, generating responsive srcset widths, and deferring offscreen decode while prioritizing the hero. Use when images are the heaviest bytes on a page or the LCP element loads slowly.---# Image optimizationImages are usually the heaviest bytes on a page and the most common LargestContentful Paint element. Shipping one oversized original to every device wastesbandwidth on phones and delays the first meaningful paint. Serve the rightformat, the right dimensions for the viewport, and decode off the critical path.## Method1. **Encode to a modern format.** Serve AVIF or WebP with a JPEG fallback through `<picture>`. AVIF is often 30 to 50 percent smaller than JPEG at equal quality. Produce it with `sharp`, Squoosh, or a build step; never ship the camera's original file.2. **Generate responsive widths with srcset.** Produce several sizes and let the browser choose: `srcset` plus `sizes` so a phone downloads a 400px image and not the 2000px desktop one. On mobile this is the single biggest byte win.3. **Declare width and height, or an aspect ratio.** Missing dimensions let the image shift the layout as it loads. Setting them, or `aspect-ratio`, lets the browser reserve the box and keeps CLS near zero.4. **Lazy-load below the fold, prioritize above it.** Add `loading="lazy"` to offscreen images to defer their fetch, and `fetchpriority="high"` with a preload on the LCP image to pull it forward. Never lazy-load the hero: it delays LCP.5. **Decode asynchronously and cover the gap.** Set `decoding="async"` so the browser decodes off the main thread. For large images, show a low-quality placeholder or a solid color so the space is not a blank box during load.6. **Compress to a target, not to lossless.** Tune quality to roughly 75 to 85 for photographs and strip metadata. Confirm in the network panel that the delivered bytes match the displayed size, not the source resolution.## Checks- Does each image ship as AVIF or WebP with a fallback, not a raw JPEG or PNG?- Does a phone download a phone-sized file through srcset?- Do images carry dimensions so they never shift the layout?- Is the LCP image prioritized while everything below the fold is lazy?## BoundariesTying these fixes to the LCP and CLS numbers is web-vitals; delivering the bytesfrom an edge cache is cdn-strategy. Vector graphics and icon fonts followdifferent rules. This skill covers raster images on the web.

Frequently asked questions