There is no single perfect image size for every website. The correct export depends on the layout width, device pixel density, crop behavior and whether the browser receives responsive alternatives.
Export for the largest real display size
Measure the maximum width the image occupies in the layout. An article image inside a 760-pixel column does not need the same source as a full-width hero on a large monitor. A somewhat larger source can support high-density screens, but sending the original camera dimensions is rarely necessary.
For a card shown at 400 pixels wide, providing a 400-pixel and an 800-pixel version is often more efficient than serving one 2400-pixel file to every device.
Use responsive image markup
The HTML srcset and sizes attributes let the browser choose from multiple file widths based on the viewport and layout. The picture element can also offer modern formats or art-directed crops.
Responsive markup matters because compression alone cannot prevent a phone from downloading an unnecessarily wide desktop image.
Useful starting points, not rigid rules
- Small card or thumbnail: prepare widths around 320, 640 and possibly 960 pixels.
- Article content: prepare widths around 640, 960 and 1280 pixels.
- Large hero: prepare several widths up to the layout maximum, often 1600 or 1920 pixels.
- Logos and icons: prefer SVG when appropriate, or export exact raster sizes with high-density variants.
Reserve layout space
Set width and height attributes or use CSS aspect-ratio so the browser can reserve space before the image loads. This reduces layout movement and makes the page feel more stable.
This guide was reviewed for practical clarity and updated for the current NEXDOWNLOAD toolset on July 28, 2026.