The right way to resize images for web without losing quality
Uploading a 4000×3000 camera photo to a page that displays it at 800px wide wastes bandwidth and slows the page down for no visible benefit. But resizing carelessly, or in the wrong direction, can leave you with something blurry instead. Here's how to actually get it right.
Resizing and compressing are two different levers
It's easy to conflate these, but they affect different things. Resizing changes the pixel dimensions of the image, how many pixels wide and tall it is. Compression changes how efficiently those pixels are stored, at whatever dimensions they already are. Doing only one leaves savings on the table: a huge image compressed hard is still a huge image, and a correctly-sized image at default quality still has room to shrink further.
How to pick target dimensions
Match the image's dimensions to roughly how large it will actually be displayed, not to how large the source happens to be. A reasonable rule of thumb is 1.5–2× the largest size it'll ever be shown at, that headroom keeps it looking sharp on high-density ("retina") screens without being wastefully large. A hero banner displayed at 1200px wide, for example, doesn't need a 4000px source; something in the 1800–2400px range is already more than enough.
Common target sizes
As a starting point, before applying the 1.5–2× headroom above: a full-width blog header image typically displays around 1000–1200px wide, an inline image within an article's text column is often 600–800px, and a thumbnail or product-grid image is usually 200–400px. Social media platforms each have their own preferred dimensions that change periodically, so it's worth checking the specific platform rather than assuming a fixed number.
Downsizing versus upsizing
Shrinking an image (downsizing) preserves quality well, because you're discarding detail the image already has more of than it needs. Enlarging an image (upsizing) works the opposite way, there's no missing detail to invent, so the software can only stretch and interpolate the pixels that already exist, which is what produces that soft, blocky look on an enlarged photo. If an image is too small for where you need it, the fix is a higher-resolution source, not a bigger resize.
Why locking the aspect ratio matters
If you type an exact width and height that don't match the image's original proportions, the result gets stretched or squashed, circles become ovals, faces get subtly distorted, and it's often not obvious at a glance that anything's wrong. Locking the aspect ratio means changing one dimension automatically recalculates the other to keep the original proportions intact, which is what you want the overwhelming majority of the time. Only unlock it if you specifically need to force an image into a shape it wasn't originally, and accept the distortion that comes with it.
Step by step
- Open Resize Image and add your photo.
- Choose "By dimensions" if you know the exact target size (with aspect ratio locked so it doesn't distort), or "By percentage" for a quick proportional shrink.
- Download the resized image, then run it through Compress Image if you want to fine-tune the file size further at the new dimensions.
Ready to resize an image?
Open Resize ImageFrequently asked questions
Should I resize or compress an image first?
Resize first, then compress. Resizing reduces the total pixel count, which is the bigger lever for file size, compression then fine-tunes the size at that resolution.
What's the best percentage to shrink an image by?
There isn't a universal number, it depends entirely on the source size versus how large the image will actually display. Match the target dimensions to the real display size rather than picking an arbitrary percentage like 50%.
Will resizing fix a blurry photo?
No. Shrinking a soft image can make it look marginally sharper relatively, but enlarging an image will never add detail that wasn't captured in the original, it can only stretch existing pixels, which looks blurry or blocky.