Start with what “quality” actually means
Resizing changes pixel dimensions, not just the number printed beside a file. A 2400 × 1600 photograph contains 3.84 million pixels; at 1200 × 800 it contains 960,000. Shrinking can preserve a good appearance when the target is appropriate, but the pixels that are discarded cannot be recovered later. Enlarging requires the browser to estimate new pixels, so it may look softer.
File size and image quality are not the same measurement. A PNG may be larger than a visually similar JPG because the formats store pixels differently. Decide the destination dimensions first, then choose the export format and quality.
Preserve proportions
Calculate the new height by multiplying the original height by the new width divided by the original width. For example, scaling 2400 × 1600 to a width of 1200 gives a height of 800. Keeping the aspect ratio prevents faces, lettering and logos from stretching.
If the target placement has a different shape, crop intentionally instead of forcing the photo into it. A square profile photo often needs a crop; a rectangular banner may need more negative space around the subject.
Avoid accidental upscaling
When preparing a smaller image for a website, do not upscale a small source just to match a suggested pixel width. For a display slot that is 600 CSS pixels wide, a 1200-pixel export can be useful on high-density screens, but a source that is only 400 pixels wide will not magically gain real detail by exporting at 1200.
Always inspect edges, text and faces at approximately the size people will actually see. Comparing two files at different zoom levels makes quality judgments unreliable.
Choose the appropriate format
For photographs, JPG is widely compatible and offers an adjustable file-size tradeoff. WebP often provides a smaller file at comparable visual quality where supported. PNG is useful for crisp graphics, screenshots with text, and transparency; it is not usually the most compact format for a detailed photo.
Resizing and compression are separate decisions. Reduce pixel dimensions only when the image is unnecessarily large; reduce encoded quality only as much as the destination allows.
A practical browser workflow
Upload the original to the Resize image tool, enable aspect-ratio locking if offered, and enter the maximum width or the exact dimensions you need. Export once, open the result and compare it with the original. Keep an untouched copy so you can make another size without repeatedly recompressing an already compressed image.
If the image is destined for a CMS or a social platform, check that platform’s current requirements and test a final upload because automatic recompression can change the result.
Common mistakes
Typing width and height independently distorts proportions. Enlarging a tiny thumbnail produces softness. Choosing extreme JPG compression creates blocky artifacts and ringing around text. Repeatedly saving a JPG at lower quality accumulates losses. Exporting a photo as PNG may inflate the file without improving the source.
A realistic resize decision
Suppose your source is 4032 × 3024 pixels, but the image will appear in a product card at roughly 600 CSS pixels wide. First ask whether the card needs a tighter crop. If it does, make that composition decision before resizing. Then export a size that accommodates the intended display without keeping the camera's full dimensions. For the tradeoff between PNG, JPEG and WebP after resizing, read our image format comparison.
The difference between a correctly sized image and an aggressively compressed image matters: a dimension reduction addresses unnecessary pixels; a low quality setting removes detail within those pixels. Avoid changing both drastically in the same step, or you will not know which change caused an artifact.
What to inspect after exporting
Open the export at its intended display size and examine edge contrast, text, small patterns and subject details. If you see ringing around lines, compare with a higher-quality export. If an upload portal imposes a byte limit, use the gradual workflow from our email and uploads guide rather than repeatedly saving the same lossy file.
An image's pixel dimensions can be precisely calculated; its compressed byte size cannot be predicted from dimensions alone. Detailed tree leaves, noise, text and smooth skies each compress differently. Keep the original for future exports.