File size is easy to count, so it often becomes the default measure of media optimization. It is useful, but incomplete. A smaller image that arrives late, looks visibly damaged, shifts the page, or misses the cache is not a successful outcome.
A practical media scorecard needs four views: user experience, network delivery, visual fidelity, and operational health.
Measure the experience first
Start with what the user can perceive.
Largest Contentful Paint helps identify when the main content becomes visible. Cumulative Layout Shift reveals whether late media changes the layout. Neither metric is an image-only measure, but both can expose image delivery problems.
The current W3C Largest Contentful Paint specification defines browser visibility into the largest paint candidates. Use that signal to identify the element, then investigate the resource path behind it.
For an image LCP candidate, split the total time into questions:
- How long did the initial document take to arrive?
- Was the image discoverable in the original HTML?
- How long after discovery did its request begin?
- How much time did the resource spend in transfer?
- How long passed between load completion and rendering?
The web.dev LCP optimization guide organizes these as distinct opportunities. That is more actionable than treating LCP as one opaque number.
Pair field data with lab diagnostics
Lab tests create repeatable conditions. They are ideal for comparing a branch, inspecting a waterfall, testing candidate selection, and catching a regression before release.
Field data captures the devices, networks, caches, geographies, and user journeys that actually occurred. It also reveals long-tail conditions that one synthetic profile cannot represent.
The web.dev measurement guidance recommends using both. It also explains why LCP and CLS can differ between lab and field results, and why Interaction to Next Paint requires real interaction data.
For media work, use lab tests to answer “why did this test page behave this way?” Use field data to answer “how often do real visitors receive a good experience?”
Record transfer behavior, not just encoded bytes
Encoded size is one field. Add:
- transfer size after protocol compression where applicable;
- request start and completion timing;
- connection reuse or new-origin setup;
- cache status and age;
- response content type;
- the selected responsive image candidate;
- the rendered dimensions at selection time;
- priority and initiator.
The W3C Resource Timing specification defines the browser interface for detailed resource timing. Server timing and CDN response headers can add processing and cache context.
A useful derived value is pixel oversupply: delivered intrinsic pixels divided by the pixels needed for the rendered slot. Do not chase an exact ratio across every device, but use large mismatches to find incorrect sizes values or missing candidates.
Inspect discovery and priority
Two equally sized images can have different outcomes if one is discovered immediately and the other waits behind CSS or JavaScript.
For likely LCP images, record:
- whether the URL appears in the initial HTML;
- whether lazy loading is disabled;
- whether a preload is necessary because the resource is otherwise hidden;
- whether
fetchpriority="high"improves scheduling; - whether another origin adds connection delay.
Do not set every hero-adjacent image to high priority. The Fetch Priority API guide notes that priority hints are most useful when they distinguish a small number of critical resources.
Keep visual fidelity in the scorecard
Compression has a benefit and a cost. Automated similarity metrics can help compare many variants, but they are not a universal proxy for human judgment.
Build a reference set that represents your actual media. Include photographs, illustrations, screenshots, transparency, gradients, fine texture, faces, products, and embedded text where those appear in production.
For every candidate recipe, retain:
- the source and decoded output;
- format, dimensions, and quality parameters;
- encoded bytes;
- one or more objective comparison scores when useful;
- a human review result for high-value or failure-prone classes.
Review at the intended display size and at a zoom level appropriate to the task. Product zoom imagery needs a different bar than a small editorial thumbnail.
Visual acceptance should be categorical enough to drive action: pass, retry with a safer preset, require review, or reject.
Measure layout stability
Media causes layout shift when the browser does not know how much space to reserve or when a late state changes the box unexpectedly.
Track whether images have intrinsic dimensions or an explicit aspect ratio. Reproduce shifts with the Performance panel and identify the element that moved. Pay special attention to ads, embeds, lazy-loaded galleries, and responsive art direction where sources have inconsistent ratios.
A zero-byte placeholder can still create a poor experience if the final media changes the layout.
Measure the pipeline and the cache
User metrics explain the front end. Operational metrics explain whether the media system can sustain it.
Track:
- transformation success, failure, and timeout rates;
- processing latency by operation and source class;
- cache hit ratio by transformation family;
- origin fetch volume;
- derivative count per source;
- duplicate source rate;
- fallback format and fallback image frequency;
- queue age for asynchronous processing;
- storage growth and orphaned derivatives.
These values expose systems that look fast in a single lab run but are expensive or fragile at scale. A rapidly growing derivative count may indicate unconstrained transformation URLs. A low cache hit ratio may indicate inconsistent parameters or an overly granular width ladder.
The image optimization pipeline defines the stages that should emit this evidence.
Build a reviewable scorecard
Use a compact scorecard for each important template or media class:
| Dimension | Questions to answer | | — | — | | Experience | Which element is LCP? Is layout stable? What do field distributions show? | | Delivery | Was the correct candidate selected? When was it discovered? Did it hit the cache? | | Fidelity | Does the output preserve the detail and truth required for the task? | | Operations | Are transformations reliable, bounded, traceable, and economical? |
Set budgets by template and asset class, not as one universal number. An article card, a product zoom, and a video poster have different purposes.
Use the optimization loop
The strongest process is iterative:
- capture a baseline in lab and field data;
- identify the limiting stage;
- change one delivery or encoding rule;
- compare user timing, bytes, fidelity, and cache behavior;
- keep the change only when the complete result improves;
- monitor the production distribution for regressions.
That loop reflects the full definition of media optimization. The goal is not the smallest file. The goal is the best defensible visual experience for the least practical delivery and operational cost.