Web Image Performance Checklist

Use this checklist as a release gate, not a list of isolated compression tricks. A fast image pipeline coordinates content, dimensions, encoding, markup, priority, caching, accessibility, and monitoring.

1. Inventory and ownership

List every image component and its maximum rendered slots.
Mark likely LCP images by template and viewport.
Identify decorative, informative, functional, and text-bearing images.
Assign a master asset and an owner for regeneration.

2. Source preparation

Crop unused area before exporting derivatives.
Remove excess pixels only after confirming future use.
Preserve vector masters, alpha masters, and high-quality photos.
Avoid generating from an already compressed derivative.

3. Format and quality

Content	Starting candidate	QA focus
Photo	JPEG, WebP, AVIF	Faces, texture, gradients
Transparent graphic	PNG, WebP, AVIF	Alpha edges on multiple backgrounds
Logo/icon	Trusted SVG or PNG	Sharpness, security, accessibility
Screenshot	PNG or lossless-capable output	Text and hard edges

Measure actual outputs. Modern does not automatically mean smaller, and byte reduction is not success when the destination cannot decode the file.

4. Responsive delivery

Provide candidates that match real slots.
Make sizes reflect CSS layout.
Include fallback src.
Set intrinsic width and height.
Use picture only for art direction or format alternatives.

5. Loading priority

Do not lazy-load likely LCP images.
Ensure critical images are discoverable in initial HTML.
Use priority hints or preload selectively and avoid duplicate requests.
Lazy-load genuinely below-the-fold images.

6. Delivery infrastructure

Use stable URLs for cache reuse.
Apply long-lived immutable caching to versioned assets.
Verify correct media types and no unnecessary redirects.
Test CDN transformations against visual requirements.
Budget total image bytes by template and viewport.

7. Accessibility and search

Use useful alt text for informative images and empty alt for decorative ones.
Keep functional controls understandable without the image.
Use standard HTML image elements for discoverability.
Keep filenames descriptive without keyword stuffing.

8. Release validation

Test mobile and desktop candidates with cache disabled.
Inspect visual quality at actual size.
Measure LCP timing components, not only the final score.
Check layout shift and aspect ratios.
Run slow-network and low-end-device tests.
Monitor field data and image errors after release.
Fail builds that exceed agreed byte or dimension budgets.

CMS and design-system controls

Define image roles such as hero, card, thumbnail, avatar, and editorial figure. Attach allowed aspect ratios, slots, candidate widths, formats, and review criteria. Preserve one master, then regenerate every delivery derivative when policy changes.

Performance budgets

Set budgets by template and viewport. Track above-the-fold bytes, candidate-to-slot ratio, missing dimensions, unexpected legacy formats, and LCP discovery. A budget should trigger review, not automatic destructive compression.

Budget signal	What it reveals	Correct response
Candidate much wider than its slot	Responsive selection or candidate widths are inefficient.	Correct `sizes` and derivative widths.
Large resource load delay for the hero	The browser discovers or prioritizes the likely LCP image too late.	Expose it in initial HTML and review loading priority.
High transfer bytes at correct dimensions	Encoding, quality, or format may be inefficient.	Compare outputs using the same master and acceptance criteria.
Good lab score but poor field data	Real templates, devices, networks, or cache behavior differ from the test.	Segment field data and reproduce the affected path.

Template-by-template workflow

Choose one representative URL for each template and one difficult viewport.
List every image request, its rendered slot, selected candidate, transfer bytes, and loading priority.
Fix discovery and layout problems before fine-tuning encoder quality.
Repeat with cold and warm caches, then on a slower device profile.
Record the approved behavior as an automated or release check.

Regression scenarios

A CMS editor replaces a crop with a full camera original.
A redesign doubles the slot while sizes remains stale.
A preload points to JPEG while picture selects AVIF.
A carousel downloads every slide eagerly.
A CDN changes quality or caching unexpectedly.

Common mistakes

Teams often compress everything but leave oversized candidates, lazy-load the hero, omit dimensions, create dozens of unused widths, or allow a CMS to re-encode clean masters repeatedly. Fix the system that generates and selects assets, not just one file.