Skip to content
Get packs

Image Optimization Checker

Audits a site's images for format, size, lazy loading and layout shift, then proposes fixes

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

What it does

Once installed, the agent scans a web project for image files and image tags, then checks whether each image uses a suitable format, has sensible file sizes, includes responsive srcset/sizes, sets width and height to avoid layout shift, and uses lazy loading for images below the fold. It reports issues grouped by severity with file paths and can show corrected HTML using modern formats like WebP or AVIF. It also explains how these choices affect page load and Core Web Vitals.

Great for

  • Front-end developers who want a quick audit of image markup in a website codebase
  • Designers or site owners preparing a page for performance review
  • Teams checking a site before launch against a standard front-end checklist

Skip it if

  • Projects that do not use HTML image markup, since the checks target <img> elements and image assets (not useful for native mobile apps or pure image editing)
  • Anyone expecting automatic compression of files: the skill describes quality targets and fixes but ships no image-processing script, so results depend on the agent's own edits and the tools available
  • Sites where aggressive rewriting of markup could break layouts or CMS-generated templates without review

Try asking

  • “Review the images in this project and report problems grouped by severity with file paths”
  • “Add srcset, sizes, width and height to the hero and product images in my site's HTML”
  • “Explain how unoptimized images are hurting my Largest Contentful Paint score”
  • “Convert the JPEG and PNG photos in src/assets to WebP with an AVIF fallback using picture elements”
Step-by-step guide: how to use Image Optimization CheckerInstall, 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-optimization.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip image-optimization.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 or component to keep the audit focused and reviewable.
  • Ask for a report first, then approve fixes file by file, since the agent may edit markup directly.
  • Verify the output in browser DevTools as the skill suggests, and check that converted image files actually exist before deploying.

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.