Resizing is the most underrated image skill on the web. People obsess over compression while uploading photos four times wider than the space they fill, then wonder why their pages are slow. Resizing an image to the dimensions it actually displays is often the single biggest saving available, and it costs you nothing in visible quality. Done right, it makes everything else, including compression, work better.
This guide explains how to resize images online without stretching or blurring them, how to think about pixels and aspect ratio, and how to pair resizing with compression for the best results. Everything happens in your browser with the tools at tinyimgcompress, so your files stay private. Let us begin with why resizing matters so much.
Why Resizing Matters More Than You Think
Image file size grows with the number of pixels, and pixels grow with the square of the dimensions. That means an image 4000 pixels wide holds four times as many pixels as one 2000 pixels wide, and therefore roughly four times the data. If your page displays that image at only 1000 pixels wide, three quarters or more of the file is pure waste, invisible on screen but downloaded by every visitor.
Because images are the heaviest part of most pages, this waste directly slows loading and hurts your Core Web Vitals. Resizing to the real display size removes it instantly, with no loss of visible quality, since the extra pixels were never being shown anyway. It is the highest-impact, lowest-risk image optimisation there is.
Understanding Pixels and Dimensions
An image's dimensions are simply its width and height in pixels, for example 1920 by 1080. The display size is how large it appears on the page, which is often much smaller than the file's actual dimensions, especially with photos straight from a camera or phone. The goal of resizing is to bring the file's dimensions in line with how big it really needs to be.
A useful habit is to find out the maximum width your content area uses, often somewhere between 800 and 1200 pixels for a typical site, and resize images to match. There is rarely any reason to store an image wider than the largest space it will ever fill, unless you are deliberately serving high-resolution versions for sharp displays.
That high-resolution exception is worth a brief mention, because modern phones and laptops often have very dense screens. On those displays an image can look slightly soft if it is stored at exactly its display width, so designers sometimes provide a version at roughly twice the display width to keep it crisp. This is a deliberate, controlled choice rather than an accident, and even then the doubled image should be compressed afterward. The mistake to avoid is the unintentional one: uploading a 4000-pixel photo into an 800-pixel slot with no thought at all, which carries five times the data for no purpose whatsoever.
Keeping the Aspect Ratio
The most common resizing mistake is distortion: making an image look stretched or squashed. This happens when the width and height are changed by different amounts, breaking the aspect ratio, which is the proportional relationship between the two. A photo of a person can end up looking unnaturally wide or tall.
The fix is simple: always keep the aspect ratio locked when resizing. Change the width and let the height adjust proportionally, or vice versa. The resize tool keeps the proportions locked by default, so your images shrink cleanly without any stretching. Only unlock it when you genuinely intend to crop or reshape an image.
If you do need a specific shape, for example a square avatar or a wide banner from a tall photo, the right approach is to crop rather than to distort. Cropping removes part of the image to reach the shape you want while leaving the remaining pixels in their true proportions, so faces and objects still look natural. Stretching, by contrast, keeps every part of the image but warps it, which is almost always the wrong outcome. Whenever you catch yourself about to change width and height by different amounts, pause and ask whether you really want to crop instead.
How to Resize an Image Online: Step by Step
Here is the straightforward process for resizing any image cleanly.
- Find your target width. Check the largest width the image will display at on your page or document.
- Open the resize tool. Drop your image into the resize tool, which works directly in your browser.
- Enter the new width. Type the target width and let the height adjust automatically to keep the aspect ratio.
- Preview the result. Confirm the image still looks sharp at its new size.
- Download. Save the resized file, ready for compression or upload.
That is all there is to it. For most photos this single step removes the majority of the file's weight before you have even compressed it.
Resize First, Then Compress
Resizing and compression are partners, and the order matters. Resize first to remove the wasted pixels, then compress to squeeze out the remaining redundancy. Doing them in this order gives the smallest possible file, because you are compressing only the data you actually need rather than a needlessly large image.
After resizing, run photographs through the image compressor at around 80 percent quality, and graphics through the PNG compressor for lossless savings. The combination routinely cuts an image to a tenth of its original weight or less while looking identical on screen. Our guide on how to compress images without quality loss covers the gentle settings.
Common Resizing Mistakes
- Enlarging small images. Scaling a small image up cannot add detail it never had, so it just looks blurry. Always resize down, not up.
- Unlocking the aspect ratio by accident. This stretches or squashes the image. Keep proportions locked unless you mean to crop.
- Skipping resizing entirely. Uploading full-resolution images is the number one cause of slow pages.
- Resizing after compressing. Do it the other way round so you compress only the pixels you keep.
Avoid these four and your resized images will stay sharp and small. For where format fits into all this, see our guide to the best image format for the web, and to connect resizing to broader speed, read how to make images load faster.
Resizing for Different Uses
Different destinations call for different sizes. A full-width hero image might need 1600 to 1920 pixels wide to look crisp on large screens, while an inline blog image rarely needs more than your content width. Thumbnails can be just a few hundred pixels, and avatars smaller still. Matching the size to the purpose keeps every image as light as it can be while looking right where it appears. When in doubt, resize to the largest size the image will actually display at and no larger, then finish with the image compressor to squeeze out the rest.
Conclusion
Resizing is the quiet hero of image optimisation. By bringing each image down to the dimensions it truly needs, locking the aspect ratio to avoid distortion, and then compressing what remains, you produce files that are dramatically smaller yet look identical on screen. It is the first and most impactful step in any image workflow. Start now by dropping an oversized photo into the resize tool and watching how much weight disappears before you have even compressed it.