optimize-page-images

To audit page images, resolve on-disk paths to measure actual file bytes and pixel dimensions against rendered layout slots. This generates an audit table with budget-driven findings to identify oversize sources and improve Core Web Vitals.

The best way to find image optimization issues is analyzing the JSX structure for slot evidence alongside disk measurements. This flags missing width/height attributes, wrong formats, missing responsive sizes, and absent lazy-loading for below-the-fold images in Next.js or TanStack components.

Apply byte budgets to responsive images by comparing on-disk pixel dimensions against the rendered slot constraints from the JSX structure. This produces a ranked fix list proposing targeted resize and format decisions to reduce overall page weight for frontend performance optimization.

This image optimization approach does not work with remote or dynamically generated images. It explicitly skips REMOTE and DYNAMIC images that cannot be measured, requiring the presence of resolved local image references on disk to quantify the mismatch versus the rendered slot.

You cannot automatically fix image loading and priority discipline issues immediately. The system operates in a report-only phase, presenting an audit table and ranked fix list until you explicitly select specific fixes to apply for the flagged responsive images.