Guide · Agent skill
How to use the Image File Size Auditor agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Image File Size Auditor is an agent skill that checks the image files in a web project against file-size budgets, reports which ones are too large, and suggests how to shrink them. This guide explains what an agent skill is, how to install this one, how to ask for an audit in plain language, and what to expect from the results. By the end you will be able to run an audit and act on the findings.
Image File Size Auditorthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this directory's page for image-file-size.
- 2Install it. Unzip into ~/.claude/skills/ for all projects, or into the project's .claude/skills/ folder for one project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
- 3Make image files accessible. Open the project that contains the image files, public/ folder or CMS export you want audited.
- 4Ask for an audit. Describe the scope and goal in plain language, for example asking the agent to check public/ for files over budget.
- 5Review the report. Check each flagged image's path, current size and target size, and confirm whether a CDN already serves a smaller version.
- 6Apply fixes and recheck. Convert or compress the flagged files with the suggested tools, keep originals as backups, then run the audit again.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions (a SKILL.md file plus optional reference files) that an AI agent loads when a task matches the skill's description. This skill is designed for auditing the image pipeline, static assets in public/, CMS-managed media, and image CDN transforms.
Once installed, the agent checks image files in your project against budgets such as photos over 200KB, graphics and icons over 100KB, hero images over 400KB, and thumbnails under 200px wide over 30KB. It reports each oversized image with its path and current size, and suggests a target size. It also explains why large images hurt page speed and Core Web Vitals.
- Checks file size in bytes for each image asset
- Flags photos (JPEG, WebP, AVIF) over 200KB and PNG or SVG graphics over 100KB
- Flags hero or full-width images over 400KB and thumbnails over 30KB
- Notes whether Lighthouse reports 'Properly size images' or 'Efficiently encode images' as opportunities
- Separates file-size problems from dimension mismatches, so you can tell whether the issue is compression, format choice, or responsive delivery
Install the Image File Size Auditor skill
Download the skill as a ZIP file from the skill's page on this directory, then choose one of the two options below.
For Claude Code, unzip the download into ~/.claude/skills/ to make it available in all your projects, or into a project's .claude/skills/ folder to make it available only in that project. For the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How do you trigger the skill with a natural request?
You do not need to type a command. The agent uses a skill when your request matches its description, so describe the job in plain terms that mention images, assets or performance. Naming the folder or the kind of media helps the agent know where to look.
Good requests name the scope (for example public/ or the CMS upload folder) and the goal (find files that are too large, or explain why page speed is poor). If you only want an explanation, say so; the skill also covers why image weight matters.
- 'Audit the images in public/ for file size and tell me which ones are over budget.'
- 'Check our hero images for files over 400KB and suggest fixes.'
- 'Explain why our product photos are slowing down the page.'
- 'Review our image pipeline and tell me whether we are shipping original uploads instead of compressed versions.'
What do the results look like and how do you act on them?
The audit output lists each flagged image with its path, its current size and an estimated target size. Fixes are grouped by cause. Compression fixes address oversized files in the current format. Format fixes suggest WebP or AVIF. Responsive fixes suggest serving multiple srcset sizes so mobile users download smaller files.
The suggested tools are Squoosh, Sharp, ImageOptim, oxipng, pngquant and SVGO. The skill gives advice; it does not run these tools itself. The reference file includes a Sharp example using these settings: WebP at quality 80, AVIF at quality 60 with effort 6, progressive JPEG at quality 80, and PNG at compression level 9. Treat those as starting points and check the visual result.
- Convert JPEG and PNG to WebP at 80% quality, then try AVIF at 60% quality
- Strip EXIF and IPTC metadata from images served on the web
- Compress PNGs with oxipng or pngquant, and SVGs with SVGO
- Serve multiple srcset sizes so smaller screens get smaller files
sharp('input.jpg').webp({ quality: 80 }).toFile('output.webp')
sharp('input.jpg').avif({ quality: 60, effort: 6 }).toFile('output.avif')What does the skill need, and what should you check first?
The skill needs access to the project's image files and build output, because it reads files in the project to measure them. Lighthouse is optional. If you run it, the audit can also use its 'Properly size images' and 'Efficiently encode images' reports.
Check whether a CDN already transforms and optimises your images. If it does, the audit may flag files that are already fine once delivered, so compare the audit against what the CDN actually serves.
- Required: access to project image files and build output
- Optional: Lighthouse reports for cross-checking
- Optional tools named in fix steps: Squoosh, Sharp, ImageOptim, oxipng, pngquant, SVGO
Safety notes: scripts and network access
This skill does not run scripts and does not use the network, according to its listing. It reads files in your project and reports on them. It does not change your images on its own, so any compression you apply is a separate step you choose to run.
Because the thresholds are general guidelines and not measured results, review every flagged file before changing it. Keep original images in version control or a backup before running any compression tool.
- Runs scripts: no
- Uses network: no
- Output is advice, not measured compression results
What people use it for
- Auditing public/ before a front-end performance review to find photos over 200KB
- Checking a CMS upload folder for unoptimised originals and suggesting WebP or AVIF versions
- Explaining to a non-technical stakeholder why large hero images slow down Largest Contentful Paint
Frequently asked questions
How do I install the Image File Size Auditor skill?
Download the ZIP from this directory's page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Is the Image File Size Auditor skill free?
The skill is listed under the MIT licence, which is a permissive open-source licence. This page does not list any price, so check the licence file in the source repository for the terms.
What file size limits does the skill use?
The skill uses general guidelines: photos over 200KB, graphics and icons over 100KB, hero images over 400KB, and thumbnails under 200px wide over 30KB. These are not exact rules, so treat them as starting points for review.
Does the skill compress images for me?
No. The skill reads files and reports oversized ones with suggested fixes. It does not run compression tools like Squoosh, Sharp, ImageOptim, oxipng, pngquant or SVGO itself, and it runs no scripts and uses no network.
Why does the audit flag images that already look fine?
If a CDN already resizes and optimises images on delivery, the files stored in your project may be large even though visitors receive smaller versions. Compare the audit against what the CDN serves before changing anything.
What are good alternatives if this skill does not fit my project?
This page does not name alternatives, so it cannot compare them. For measured results, you can run Lighthouse and check its 'Properly size images' and 'Efficiently encode images' reports, then use the tools named in the fix steps directly.
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 are a front-end developer or a team that wants a plain-language audit of image weight and suggested fixes before a performance review. Pick something else if you need exact, measured compression results, or if a CDN already optimises every image, since the advice here may flag files that are already fine.
Download the skill