Match the size to where it is shown
Look at the widest space the image will fill on your page. A full-width banner may need about 1600-2000 pixels. An image inside an article column often needs 800-1200 pixels. A small thumbnail may need only a few hundred. Your browser developer tools or your theme settings can usually tell you the displayed width. If you do not know it, a width of 1200 pixels is a common safe choice for an article image.
Allow for sharp screens
High-density screens show more detail per pixel. For important images, using about twice the displayed width keeps them sharp. For ordinary images, the displayed width is enough. Doubling the size roughly quadruples the pixel count, so only do it where sharpness matters. Photos with fine detail benefit more than simple graphics or blurred backgrounds.
Keep the proportions
Change only the width or the height and let the other follow. Stretching both to fixed values distorts people and circles. When you need an exact shape, crop instead of stretching. For example, to turn a 4:3 photo into a square, crop it to a square first and then resize to the width you need.
Shrink, do not enlarge
Making an image smaller works well. Making it larger cannot add detail, so it looks soft. If you need a bigger image, start from a larger original. If the original is small, it is often better to display it smaller than to stretch it.
A worked example
Suppose you have a 4000x3000 phone photo for a blog post whose text column is 800 pixels wide. Resize it to 800x600, or to 1600x1200 if you want it sharp on high-density screens. Either way the pixel count drops a great deal compared with the original, and compression can then shrink the file further. Figures are illustrative and real savings depend on the picture.
A second case is a thumbnail grid where each picture appears at about 300 pixels wide. Loading full-size photos there makes the page heavy for no visible benefit. Resizing each one to roughly 300-600 pixels wide keeps the grid fast and sharp. Product images are similar: if the shop template shows them at 600 pixels wide, a 1200-pixel version is usually plenty even for sharp screens, while a 5000-pixel original only adds download time.
Hero banners need more care. They fill the full width, so check the widest layout you support, and avoid putting essential text inside the picture where cropping on small screens could cut it off.
Step-by-step workflow
- Find the displayed width of the image on your page.
- Decide whether you want 1x or about 2x that width.
- Open the original, not a previously shrunk copy.
- Set the width and keep the aspect ratio locked.
- Crop first if you need a different shape.
- Compress the resized image for the web.
- Check it on a phone and on a desktop screen.
- Replace the old image on your page and reload to confirm it looks right.
Common mistakes
- Relying on the browser to shrink a huge image, so visitors still download all of it.
- Setting both width and height and squashing the picture.
- Enlarging a small image to fill a banner.
- Resizing an already compressed copy repeatedly.
- Forgetting to keep the original.
- Using one size for every image on the page instead of matching each to its slot.
Quick checklist
- Displayed width known
- Size set to 1x or about 2x of it
- Proportions kept
- Original untouched
- Compressed after resizing
Tip: name the resized file clearly, for example with the width at the end, so you can tell it apart from the original later.
Resize and compress with DoneImg
Open the resize tool in DoneImg, add your image and enter the width you need. Your browser does the work, so nothing is uploaded. Then open the compress tool to reduce the file size and download the result. Repeat the same width for every image in a gallery so the page looks consistent and loads predictably. Always preview the result before you download it, and keep the original untouched. If you need a different shape, use the crop tool before resizing.
Should I resize or compress first?
Resize first, because fewer pixels give the compressor less to do and a smaller file.
Does resizing lower quality?
Making an image smaller keeps it looking sharp at its new size, though you cannot enlarge it again later without softness, so keep the original.