Two operations, constantly confused, with completely different effects on a file.
Resizing changes how many pixels the image contains. A 4000×3000 photo resized to 1000×750 has one-sixteenth the pixels, and roughly one-sixteenth the data before any compression is applied.
Compressing keeps the pixel count and changes how efficiently those pixels are stored, discarding detail your eye is unlikely to notice.
Almost everyone reaches for compression first. For a modern phone photo, resizing is usually the bigger lever by an enormous margin.
The arithmetic
A 12-megapixel phone photo is 4000×3000. If it is going into a blog post displayed 800 pixels wide, you are storing 15 times more pixel data than the page will ever show. The browser downsamples it on the fly, every time, for every visitor.
Resize it to 1600 pixels wide, twice the display width, which covers high-density screens, and you have removed 84% of the data before touching the quality slider. The visible result on the page is identical.
Compressing the full-size original to reach the same file size means quality settings low enough to introduce visible artefacts. You end up with a large, ugly image instead of a small, clean one.
The DPI misunderstanding
DPI (or PPI) is a number stored in the file's metadata that says how large the image should be when printed. A 1000×1000 image tagged at 300 DPI prints at 3.33 inches square. The same image tagged at 72 DPI prints at 13.9 inches square.
The pixels are identical in both cases. The file size is identical. Changing the DPI value changes nothing about the image data.
On screen, DPI is ignored entirely. Browsers, phones and monitors work in pixels. So:
- "Save this at 300 DPI for the website" is a meaningless instruction. What matters is pixel dimensions.
- "Save this at 300 DPI for print" is meaningful, and what it really means is: make sure the pixel dimensions are at least 300 × the physical size in inches. An A4 page at 300 DPI needs roughly 2480×3508 pixels.
- Increasing the DPI number in software without resampling gives you a smaller print at higher density, not more detail.
Never upscale to gain quality
Enlarging an image cannot add detail that was not captured. Traditional upscaling interpolates between existing pixels, producing a larger, softer version of the same picture with a bigger file size.
AI upscalers are different, they hallucinate plausible detail based on training data, and they are useful. But it is invention, not recovery. For anything where accuracy matters (a document, a product photo, evidence), do not upscale; go back to the source.
Sizing guidelines that hold up
| Use | Sensible width |
|---|---|
| Full-width hero on a website | 1920–2560 px |
| In-article image | 1200–1600 px |
| Thumbnail / card | 400–600 px |
| Email attachment | 1600 px is plenty |
| Social media post | 1080–1440 px |
| Print, A4 full page | ~2480 px (300 DPI) |
The rule for screens: target roughly twice your display width, which handles high-density displays without going further.
The correct order
- Crop to the composition you want. Removing what you do not need is free.
- Resize to the target pixel dimensions.
- Choose the format appropriate to the content.
- Compress, starting around quality 80.
- Strip metadata if it is not needed.
Doing it in this order means each step operates on the smallest data possible, and you only apply lossy compression once, at the end.
Batches
If you are preparing a gallery or a product catalogue, doing this by hand for sixty images is how it stops getting done. Batch resizing applies a single width to a whole folder in one pass, in the browser, without uploading any of them, which matters when the folder is client work or unpublished product photography.