Website images
How to optimize website images: dimensions, format and file size
By ResizeFox · Published
A large image can slow a web page when the browser must download far more pixels than it displays. But image optimization is not simply making every file tiny. Plan each asset around its display area, device density and purpose, then evaluate the exported copy in the real page layout.
Quick reference
| Use | Size or purpose | Note |
|---|---|---|
| Illustrative card displayed at 400 CSS px | 800-pixel-wide source | Example 2× density; not a universal requirement |
| Illustrative hero displayed at 1200 CSS px | Up to 2400-pixel source | Depends on responsive design and device density |
| File size | No universal KB target | Balance loading cost with readable details |
Step by step
- List the places an image appears: hero, product listing, article body or thumbnail. Note the displayed CSS widths at common viewport sizes.
- Crop the original to the intended composition. Keep important subjects away from edges that may be hidden by responsive layouts.
- Choose one or more export widths appropriate to the displayed size and device pixel density. Avoid uploading the same enormous source for every thumbnail.
- Export a suitable modern format where your publishing stack and audience support it; use JPG or PNG fallbacks if necessary.
- Review the actual web page on mobile and desktop. Check sharpness, image layout shifts and whether loading prioritizes the main visible image.
Pixel width and displayed width are not identical
An image element that looks 400 CSS pixels wide can be shown on a screen with a device-pixel ratio of 2. An 800-pixel-wide export is therefore a useful illustrative candidate, but real responsive image choices depend on the layout and browser. Avoid blindly doubling every image without considering its content and placement.
When different screen sizes need different assets, use responsive delivery through srcset, sizes or your site's image framework. A single compressed file cannot solve every responsive layout need.
How image optimization affects performance
Reducing unnecessary bytes may help pages load faster, particularly on slower connections. Yet compressing a hero image aggressively can make the most prominent visual look poor. Compare representative devices and pages rather than optimizing for a single arbitrary number.
Dimensions also matter for layout stability. Set intrinsic width and height or an aspect ratio so the browser can reserve the correct space before the image downloads. Load offscreen images lazily where appropriate, but do not reflexively lazy-load the most important above-the-fold image.
An e-commerce image example
Suppose a catalog uses a 400-pixel-wide product tile and a separate full-screen zoom view. These are two different use cases. A smaller image can serve the grid, while a larger version can preserve fabric texture and small product labels when visitors zoom in.
After exporting, check transparency, background consistency and the actual storefront preview. Compression should not hide relevant product information or turn a logo's transparent background into an opaque block.
See the tradeoffs yourself in the Image Compression Lab: compare text, gradients and transparent graphics with downloadable results.
Sources and further reading
Platform specifications and application rules can change. Refer to the current destination instructions; the worked calculations and preparation choices in this tutorial are not a guarantee of acceptance.