How to Resize an Image for the Web (Without Making It Blurry)

October 18, 2026 • NOFYI Editorial Team

A photo that looks crisp on your phone can turn soft, fuzzy, or jagged after you put it on a website. That usually does not mean the photo was bad. It means the image was resized the wrong way, saved at the wrong size, or stretched to fit a space it was never meant to fill. Resizing an image for the web is a small skill, but it makes a visible difference to how professional a page looks, how fast it loads, and how easy it is for readers to trust what they see.

The good news is that resizing does not require expensive software or design training. You need a clear target width, a tool that keeps the aspect ratio locked, and a habit of checking the result before you publish it. This guide explains each part in plain language, then walks through a complete worked example that takes a 4000-pixel-wide photo down to 1200 pixels.

What Resizing Actually Changes

An image has dimensions measured in pixels, such as 4000 pixels wide by 3000 pixels tall. It also has a file size, such as several megabytes, and a format, such as JPEG, PNG, or WebP. When you resize an image, you change the number of pixels. You are not simply making the picture look smaller on the screen. You are asking the software to rebuild the image with fewer pixels, which means it has to decide which detail to keep and which detail to discard.

That decision is why quality matters. If you shrink an image carefully, the software averages nearby pixels and keeps edges looking clean. If you enlarge a small image, the software has to invent pixels that were never there, so edges become blurry and text becomes hard to read. If you change the width without changing the height by the same proportion, circles become ovals and faces look stretched. The goal, therefore, is to shrink from a larger original, keep the proportions the s

Step 3: Export a New Copy at a Sensible Quality

Do not overwrite the original file. Save the resized version under a new name, such as photo-1200w.jpg, so the original stays available if you later need a larger version, a different crop, or a print. When you export a JPEG photo, a quality setting around the middle to upper range is often a good starting point. Too low, and you will see blocks and smearing around edges. Too high, and the file stays large without a visible benefit. For graphics with sharp lines, flat colour, or text, PNG or WebP may preserve edges better, but PNG files can be larger, so check the result.

If the tool offers an option to remove metadata, keep it simple and leave the default unless you have a privacy reason to strip location data. If it offers progressive JPEG, that option can help a large photo appear gradually while it loads, which readers often prefer to a blank space. The important point is to export once from the original, not to resize an already resized file again and again. Each round of saving, especially for JPEG, can lose a little detail.

Step 4: Check the Output Before You Publish

Open the resized file at 100 percent zoom, which means one image pixel is shown as one screen pixel. At that zoom, look at faces, text, edges, and fine detail such as hair, leaves, or fabric. Then view it at the size it will appear on the page. If it looks sharp at both sizes, it is ready. If it looks soft, check whether you enlarged a small image, saved at a very low quality, or stretche

Limitations

Resizing cannot add detail that was never captured. If the original is already blurry, noisy, or out of focus, a smaller version may hide some flaws, but it will not make the photo sharp. Resizing also cannot fix a photo that was saved at very low quality. A heavily compressed JPEG may look acceptable at thumbnail size, but the artefacts will still be visible if you look closely.

Aspect ratio locking protects the shape, but it does not choose the best crop. A wide landscape photo resized to 1200 pixels wide will still be wide, and it may look small on a tall phone screen. In that case, you may need a separate cropped version for a banner or a social preview, rather than forcing one file to do every job. Resizing is also not the same as optimising for every device. Some sites serve different sizes to phones and desktops. This guide covers the single-size case, which is enough for most articles, but a large site may need a responsive image workflow.

Finally, file format and quality settings vary between tools, so two tools can produce slightly different results from the same settings. That is normal. Judge the output by looking at it, not by assuming a particular number means the same thing everywhere.

Frequently Asked Questions

What width should I use for a blog image?

Use the width at which the image will actually be displayed. For many articles, that is 800 to 1200 pixels. A full-width banner may need more. A thumbnail needs less. When in doubt, match the content width of your layout and check the result at 100 percent zoom.

Why does my image look blurry after resizing?

The most common reasons are enlarging a small image, stretching one dimension without locking the aspect ratio, saving at a very low quality, or resizing a copy of a copy. Go back to the largest original you have, lock the proportions, resize once, and check the output before publishing.

Should I resize or compress an image?

They solve different problems. Resizing changes the pixel dimensions. Compression reduces the file size by removing some data. For web use, you often need both: resize to the display width first, then export at a quality that keeps the image clean without keeping an unnecessarily large file.

Can I resize an image back to a larger size later?

You can enlarge it, but the result will usually look softer than the original because the software has to invent pixels. That is why you should keep the original file. If you need a larger version later, resize again from the original rather than enlarging the small copy.

Conclusion

Resizing for the web is a short routine: choose a target width, lock the aspect ratio, resize once from the original, save a new copy, and check the output. In the worked example, a 4000 by 3000 photo became a clean 1200 by 900 image because both dimensions were scaled by the same factor of 0.3. Keep the original safe, do not stretch or enlarge a small file, and judge the final image by looking at it at the size readers will see. Those habits will keep your pages sharp, fast, and easy to read.

d one dimension. If it looks pixelated, check whether the target width was too small for the space.

Also check the file size. A resized web image is often far smaller than the original, which is expected. If the resized file is still very large, you may need to lower the quality slightly, choose a more efficient format, or check whether the dimensions are still larger than the display size. A quick check on a phone is also useful, because many readers will see the image on a small screen first. A file that looks clean on a desktop and on a phone is a good sign.

Worked Example: From 4000 Pixels to 1200 Pixels

Suppose you have a landscape photo from a camera. The original is 4000 pixels wide and 3000 pixels tall, and it will sit inside an article that displays images at a maximum of 1200 pixels wide. Here is the whole process, step by step.

First, confirm the target. The article column shows images at 1200 pixels wide, so the target width is 1200 pixels. You do not need a larger version for this placement, and you do not want the browser to download a 4000-pixel file only to display it at less than one third of that width.

Second, calculate the scale. Divide the target width by the original width: 1200 divided by 4000 equals 0.3, or 30 percent. That means every dimension should become 30 percent of its original size. Apply the same factor to the height: 3000 multiplied by 0.3 equals 900 pixels. The resized image should therefore be 1200 pixels wide by 900 pixels tall. The shape stays the same, because both dimensions were multiplied by the same number. A circle in the original will still be a circle, and a horizon will stay level.

Third, resize with the aspect ratio locked. Open the original, turn on lock aspect ratio, type 1200 in the width field, and confirm that the height becomes 900 automatically. If the height shows a different number, stop and check the lock. Do not type 900 by hand while the lock is off and hope it matches, because a small rounding difference is harmless but a large difference means the proportions changed.

Fourth, save a new copy. Name it something clear, such as landscape-photo-1200w.jpg, and keep the original file untouched in a separate folder. Export as JPEG at a sensible quality. If the photo has a lot of smooth sky, watch for banding. If it has text or a logo, zoom in and confirm the letters still look clean.

Fifth, check the output. Open the new file at 100 percent and at the article display size. Compare it with the original at the same display size, not with the original at full size. The resized version should look the same at 1200 pixels wide, or very close to it, while using far less data. If it does, you are done. If it looks soft, go back to the original and resize again, rather than trying to sharpen a blurry resized copy over and over.

This example also shows why starting from the original matters. If you first shrink the 4000-pixel photo to 600 pixels, then enlarge that 600-pixel version to 1200 pixels, the final image will look worse than a direct resize from 4000 to 1200. The detail lost in the first step cannot be recovered in the second step.

ame, and stop at a size that matches where the image will actually appear.

There is also a difference between resizing and cropping. Resizing changes the whole image, so everything in the frame stays in the frame, only smaller. Cropping cuts away part of the frame, so the subject may become larger in the remaining area but some content disappears. Many blurry or awkward images happen when someone crops and enlarges at the same time, or when a website theme stretches a small image to fill a large banner. Knowing which operation you need is the first step.

How to Resize an Image for the Web

Step 1: Decide the Target Width

Start with the place where the image will be used, not with the original file. A full-width hero image on a blog may need to be 1200 or 1600 pixels wide. An image inside an article column is often displayed at 800 to 1200 pixels wide. A thumbnail, sidebar image, or small card may only need 400 to 600 pixels. If you are not sure, check the layout on a desktop screen, or look at the content width of your site. The displayed width is your target. Making an image much larger than that wastes bandwidth and slows the page. Making it much smaller forces the browser to stretch it, which causes blur.

Write the target width down before you open any tool. For example, you might write: target width 1200 pixels, keep the original height in proportion, export as JPEG for a photo. That one sentence prevents most mistakes. It also helps you stay consistent when you resize several images for the same article. If every image in a post uses the same maximum width, the layout looks calmer and the page behaves more predictably.

Step 2: Resize With the Aspect Ratio Locked

Open the image in an image editor, a free online resizer, or the image tools built into your operating system. Find the resize or image size option. Before you type a number, make sure the option that preserves proportions is turned on. It may be called lock aspect ratio, keep proportions, constrain proportions, or a small chain or lock icon between the width and height fields. When it is locked, changing the width will update the height automatically.

Enter the target width in the width field and let the height update by itself. Do not type a new height separately unless you have a specific reason and you understand that you are changing the shape. If the tool asks for a percentage instead of pixels, calculate it from the original width. For example, to go from 4000 pixels to 1200 pixels, you need 30 percent of the original width, because 1200 divided by 4000 equals 0.3. A percentage can be useful, but pixels are clearer because they match the display size you chose in Step 1.