optimize-page-images

What problem does it solve?

This Skill finds the real, measurable image waste on a specific UI page by comparing on-disk image size and pixel dimensions to the rendered layout slot, then recommends concrete fixes that reduce bytes and improve image loading behavior.

Core Features & Use Cases

• Per-image measurement from source: Reads each referenced local image to capture actual file bytes and pixel dimensions, then quantifies mismatch vs. the rendered slot.
• Actionable optimization findings: Flags oversize sources, wrong formats, missing width/height, missing responsive sizes, priority discipline issues, and missing lazy-loading for below-the-fold images.
• Budget-driven recommendations: Uses surface-specific byte budgets to propose targeted resize and format decisions, producing an audit table and a ranked fix list.

Quick Start

Ask for an audit by route or file with the phrase: "audit images on this page" (for example, "/dashboard") and request the per-image findings table so you can choose which fixes to apply.