Guide · Agent skill
How to use the Image Optimization Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Image Optimization Checker is an agent skill, a packaged set of instructions that an AI coding agent loads when a task matches it. This guide explains what the skill makes the agent do, how to install it, how to ask for it in plain language, and what to check in the results. It is written for front-end developers, designers and site owners who have never used agent skills before.
Image Optimization Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the image-optimization ZIP from this skill's page on the directory.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project for one project only.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Ask in plain language. Describe a review task that mentions images, such as checking a site's images before launch.
- 5Review the grouped report. Read the issues by severity, check the file paths, and review any proposed HTML before applying it.
What does the image-optimization skill make the agent do?
Once installed, the agent scans a web project for image files and <img> elements. For each image it checks whether the format suits the content, whether file sizes look reasonable, whether responsive srcset and sizes attributes are present, whether width and height are set to avoid layout shift, and whether images below the fold use lazy loading.
The agent reports issues grouped by severity with file paths. It can show corrected HTML using modern formats such as WebP or AVIF, and it explains how these choices affect page load and Core Web Vitals, including Largest Contentful Paint and Cumulative Layout Shift.
- Format: WebP or AVIF for photos, SVG for icons and logos, PNG only where transparency is needed
- File size: the skill's guideline is under 200KB for photos and under 50KB for graphics
- Responsive images: srcset and sizes for images wider than 100px
- Layout shift: explicit width and height attributes
- Loading: loading='lazy' for below-the-fold images, none for priority images
How do you install the image-optimization skill?
Download the ZIP for this skill from its page on this directory. The package contains SKILL.md and references/rule.md. Unzip it so the skill folder sits in one of the locations below.
For a personal setup that applies across your projects, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into the .claude/skills/ folder inside that project.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How do you trigger the skill with a natural request?
You do not need a special command. The skill's description tells the agent to use it when reviewing image assets, markup, and CDN or build transforms. Describe the task in ordinary words that mention images, pages or performance, and the agent can load the skill.
Be specific about the scope. Name the folder, page or component you want checked so the agent scans the right files and reports exact file paths.
- Review the images in this website project for performance issues.
- Check the product page templates for missing width and height on images.
- Audit our hero images before launch and tell me which ones need srcset.
- Show me corrected HTML for the gallery component using WebP with an AVIF fallback.
What does the skill's HTML fix look like?
For photos, the skill's reference material recommends a <picture> element that offers AVIF and WebP sources to browsers that support them, with a JPEG or PNG <img> as the fallback. Lazy loading is set on the <img> element. The agent applies this pattern when it proposes fixes, and you should review the result against your own templates.
The reference also includes a format comparison table covering best use, compression and browser support for each format.
- Use the skill's quality guidance as a target: 80% quality for photos and 60% for AVIF, as stated in its instructions.
- Keep priority images, such as a large above-the-fold image, without lazy loading.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>What should you check before applying the agent's changes?
The skill describes quality targets and fixes, but it ships no image-processing script. Any compression or conversion depends on the agent's own edits and the tools available in your environment. Treat the output as a list of findings and proposed markup, not as finished optimization.
Review changes against your CMS or templates. The skill's own scope warns that aggressive rewriting of markup could break layouts or CMS-generated templates. Confirm the fix in your browser's DevTools, as the skill's review section suggests.
- The skill requires nothing listed, runs no scripts and makes no network calls.
- Test changed pages in a staging copy before release.
- Keep a backup or version control so you can revert markup changes.
What people use it for
- Auditing image markup in a website codebase before launch against a front-end checklist
- Checking a template or component for missing width and height attributes that cause layout shift
- Finding <img> elements below the fold that should use lazy loading
- Preparing a page for a performance review by listing format and sizing issues with file paths
Frequently asked questions
How do I install the image optimization agent skill?
Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project. In the Claude apps, you can instead upload the ZIP under Settings, then Capabilities, then Skills.
Is the image-optimization skill free to use?
The listing states the licence is MIT. The source does not state a price, so check the directory page for any current terms before you rely on it.
What do I need to run the image optimization skill?
The skill lists no requirements. It runs no scripts and uses no network access, so it works by reading your project files and having the agent suggest edits.
Does the skill compress my images automatically?
No. The skill ships no image-processing script. It gives quality targets and suggested fixes, and any compression depends on the agent's own edits and the tools it has available.
Why isn't my agent using the skill?
Check that the skill folder, including SKILL.md, sits in ~/.claude/skills/ or the project's .claude/skills/ folder, or that the ZIP was uploaded under Settings, Capabilities, Skills. Then describe a task that mentions images or performance so the description matches.
Does this skill work for native mobile apps or image editing?
No. The checks target HTML <img> elements and image assets in web projects, so it is not useful for native mobile apps or pure image editing.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a quick, file-by-file audit of image markup in a website codebase, with clear fixes and an explanation of the Core Web Vitals impact. Pick something else if your project has no HTML image markup, if you need automatic compression, or if you cannot review changes against a CMS or templates before they go live.
Download the skill