Skip to content
Get packs

Image File Size Auditor

Audits project images for oversized files and suggests WebP/AVIF compression and responsive sizes.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent checks image files in a web project against file-size budgets (for example, photos over 200KB, icons over 100KB, hero images over 400KB) and reports which ones are too large, with their paths and sizes. It then suggests fixes such as converting to WebP or AVIF, compressing PNGs and SVGs, stripping metadata, and serving multiple srcset sizes. It also explains why large images hurt page speed and Core Web Vitals.

Great for

  • Front-end developers preparing a site for performance review
  • Teams checking a CMS or image pipeline for unoptimised uploads
  • People who want a plain-language explanation of why image weight matters

Skip it if

  • Projects that need exact compression results: the thresholds are general guidelines, and the skill does not run the compression tools itself, so output is advice rather than measured results
  • Sites where images are already served and optimised by a CDN that handles this automatically, since the audit may flag files that are already fine after transformation

Try asking

  • “Audit the images in my public folder and list anything over the recommended size limits.”
  • “Which hero images on my homepage are too big, and what size should I aim for?”
  • “Suggest how to convert my PNG icons and JPEG photos to WebP or AVIF.”
  • “Explain why my images might be slowing down Largest Contentful Paint.”
Step-by-step guide: how to use Image File Size AuditorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    image-file-size.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip image-file-size.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip image-file-size.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a specific folder such as public/ or assets/ so the audit covers the right files.
  • Ask for estimated target sizes and then run the suggested tool (Sharp or Squoosh) to confirm the real savings.
  • Check the referenced rule page for framework-specific guidance before changing build settings.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.