Aglet

How to investigate image weight from bytes to layout

An image-weight investigation follows an asset from its source dimensions to the pixels delivered and painted in the user's viewport. Measure the full path, preserve visual and accessibility requirements, and test one reduction such as responsive sizing, deferred loading, or a smaller encoded asset.

Build a useful investigation brief

  1. Compare intrinsic and displayed dimensions

    Record source dimensions, displayed dimensions, density assumptions, encoded bytes, decoded memory, and whether the asset is reused. Identify images delivered far larger than the visible role requires. Keep aspect ratio, focal point, text embedded in the image, and alternative text requirements explicit.

  2. Map loading order to first action

    Align image request, response, decode, layout, paint, and control readiness. Check whether below-action images compete with essential content or whether a layout reservation waits for dimensions. Compare cold and cached paths so a warm cache does not hide first-visit cost.

  3. Test one visual-safe reduction

    Try one change such as matching delivered dimensions to the viewport, choosing a suitable encoded variant, deferring a secondary image, or reserving layout space earlier. Compare bytes, decode, paint, visual fidelity, alt text, and first-action timing on the same route.

What to carry forward

Deliver a brief with asset dimensions and bytes, first blocking boundary, visual role, tested reduction, and unresolved tradeoffs. Investigation is complete when implementation has a single measurable change and verification can check both faster usefulness and preserved visual meaning.

Keep the decision with the work.

Use a Work Item in Aglet to record the problem, the evidence you have, and the next decision. Add an owner and priority, then keep updates in the discussion so the next person can follow the reasoning.

Create an account See the product workflow