STUDIO April 7, 2024
A Practical Guide to Correctly Sizing Web Images
Deliver images at the dimensions users actually need, with responsive variants, compression and measurable performance budgets.
An image should not transfer thousands of pixels when the layout displays only a few hundred. Correct sizing reduces bandwidth, improves loading time and keeps media sharp on different screens.
Start from the rendered layout
Identify the largest size an image reaches at each breakpoint and account for device pixel density. A card thumbnail, article image and full-width hero need different source dimensions even when they originate from the same photograph.
Use responsive sources
Provide a srcset with meaningful widths and an accurate sizes attribute. This gives the browser enough information to choose before layout completes. Avoid generating many near-identical variants that add storage and processing cost without practical benefit.
Compress and select the right format
Use JPEG, WebP or AVIF for photographic content, PNG where lossless transparency is genuinely needed and SVG for suitable vector assets. Review compression visually; the smallest file is not useful if artefacts damage the message.
Reserve layout space
Set intrinsic width and height or use an aspect-ratio rule so the browser can reserve space before the image arrives. This prevents disruptive layout shifts and improves Core Web Vitals.
Verify in the browser
Use developer tools to inspect the selected resource at several viewport sizes. Measure with Lighthouse or PageSpeed Insights, then confirm the field experience. Image sizing belongs in the component and content workflow, not in a one-time launch checklist.
