Choose image dimensions for a website without guessing

Quick reference

Step by step

1. Inspect the intended page on a phone and a larger screen. Find the largest width at which this image is meant to appear, not the width of the entire monitor.
2. Decide the crop or canvas shape in your image editor. Keep faces, labels and the meaningful part of the picture inside the composition.
3. Use ResizeFox to prepare an appropriately sized copy with its aspect ratio locked. Keep the full-resolution original outside this export workflow.
4. Compare JPG and WebP for a photograph if your publishing system supports both. Use PNG when transparent or text-heavy artwork requires it.
5. Upload the candidate and inspect the real page. Check loading, sharpness and cropping on more than one screen; verify that your site serves the intended file rather than an old oversized original.

Worked example: an 800-pixel article column

For a source photo measuring 3000 × 2000, reducing width to 800 produces roughly 800 × 533 pixels. A 1600-pixel-wide version is roughly 1600 × 1067. The second candidate has about four times the pixel count, although its compressed byte size will not necessarily be four times as large.

Compare both in the actual page. A higher-density display may benefit from the larger candidate, while a small thumbnail may not justify it. Preparing several sizes is useful only if the publishing system chooses between them; putting all versions in a folder does not automatically make the page responsive.

An image budget is a decision, not a universal rule

A simple flat illustration and a detailed photograph can need different byte budgets. Begin with acceptable visible quality, measure the downloaded file size and reduce unnecessary dimensions before forcing extreme compression. There is no single 100 KB rule that makes every website image correct.

Use a real page preview to inspect small text, smooth gradients and edges. A file that looks acceptable inside the resizer can become soft if the page enlarges it beyond its prepared dimensions. Fix the mismatch between the layout and source rather than repeatedly lowering image quality.

What resizing does not solve

ResizeFox prepares image files; it does not change your site's responsive image markup, caching, image-loading order or alternative text. Those concerns belong to your website editor or implementation. Smaller exports can help reduce transferred bytes, but they do not guarantee a particular speed score.

Provide meaningful alternative text in the destination page when the image conveys information. Avoid placing essential instructions only inside a picture: normal page text remains readable when images fail to load and is easier for visitors to copy or translate.