To resize a photo for the web, reduce its pixel dimensions to the size it will be shown at, save it in a suitable format at moderate quality, and keep the original file. This makes pages load faster and keeps uploads small. The process is quick once you know the three settings that matter.
Three Settings That Decide File Size
File size depends on dimensions, format and compression. A camera file may be thousands of pixels wide, while a blog column rarely shows more than a thousand or so. Shrinking the dimensions is the biggest saving, because the number of pixels falls with the square of the change: halving the width and height leaves a quarter of the pixels.
Step-by-Step Resize
- Copy the original into a working folder, so the master file stays untouched.
- Find out the widest space your picture will fill on the page. Check your site layout or ask whoever builds it.
- Open the image in an editor and choose the resize or export option.
- Lock the aspect ratio, then enter the new width. A good rule is to allow up to double the display width for sharp screens.
- Choose a format, set quality, and export with a clear file name.
- Open the exported file and look at it at full size. Check smooth areas like skies for blocky patches.
Choosing a Format
| Format | Best for | Note |
|---|---|---|
| JPEG | Photographs | Small files, slight loss with each save |
| PNG | Graphics, screenshots, transparency | Larger for photos |
| WebP | General web use | Smaller files, widely supported by browsers |
For photographs, a quality setting somewhere in the middle to upper range usually balances size and looks. Test a couple of settings and compare.
Good File Habits
- Use descriptive names with hyphens, such as harbor-at-dawn, instead of camera numbers.
- Write short alt text for each image so screen reader users know what it shows.
- Remove location data from files you publish if you do not want to share where the photo was taken.
- Resize in one step from the original, not from an already shrunk copy.
If you resize many pictures, set up a batch export once and reuse it. Keep a simple folder structure with an originals folder and a web folder, so you never overwrite a master file by accident.
FAQ
Why does my image look blurry after upload?
It may be too small and stretched by the page, or compressed again by the site. Export a bit larger and check the quality setting.
Is smaller always better?
No. Too small looks soft on large or sharp screens. Aim for the smallest file that still looks clean at the display size.
The Short Version
Match the width to the space, choose a suitable format, set a moderate quality and keep the original. Check the result at full size before you upload.