How to Shrink an Image for the Web Without Making It Look Blurry

October 17, 2026 • NOFYI Editorial Team

A large photo can make a web page slow, even when it looks perfect on your computer. A phone photo or a camera image may be 4000 pixels wide and several megabytes in size. A web browser rarely needs all of that. If you shrink the image correctly, the page loads faster and the image still looks sharp. If you shrink it the wrong way, it looks soft, blocky, or blurry. This guide explains the difference between resizing and compressing, how to choose JPG quality and WebP, what dimensions to use for the web, and how to check your result. It includes a worked example that takes a 4000 by 3000 image down to 1200 by 900.

Why Image Size Matters for the Web

Every image on a page must be downloaded before the page feels complete. A large image uses more data, takes longer on slow connections, and can delay other content. Search engines and visitors both prefer fast pages. Shrinking images is one of the simplest ways to improve loading time without changing what the page says. The goal is not to make the smallest possible file. The goal is to make the smallest file that still looks good at the size it will be shown.

An image has two kinds of size. Pixel dimensions describe how many pixels wide and tall it is, for example 4000 by 3000. File size describes how much storage it takes, for example 3 megabytes. Both matter. Pixel dimensions control how large the image can be displayed without stretching. File size controls how long it takes to download. A good web image balances both: dimensions matched to the display size, and compression that removes data the eye will not miss.

Resize Versus Compress

Resizing changes the pixel dimensions. If you resize a 4000 by 3000 image to 1200 by 900, you remove pixels. The image becomes smaller in display size and usually much smaller in file size. Compressing changes how the remaining pixels are stored. Lossy compression, used by JPG and WebP, discards some detail to make the file smaller. Lossless compression keeps all detail but produces a larger file. For photos on the web, you usually need both: resize to the display size, then apply sensible lossy compression.

Do not rely on HTML or CSS alone to shrink a large image. Setting a 4000-pixel image to display at 1200 pixels wide in code still forces the browser to download the full file. The page looks smaller, but the download cost stays large. Always resize the actual image file before uploading it. Similarly, do not upscale a small image to make it larger. Upscaling does not add detail. It stretches the existing pixels and makes the image look soft or blurry. If you need a larger display size, start from a larger original.

How to Shrink an Image Step by Step

Step 1: Decide the display size

Check where the image will appear. A full-width blog header might need 1200 to 1600 pixels wide. A half-width image in an article might need 800 to 1000 pixels wide. A thumbnail might need 300 to 400 pixels wide. Use the largest size the image will actually be shown at, plus a small margin for high-resolution screens. For most blog images, 1200 pixels wide is a practical maximum. It looks sharp on laptops and phones without creating a huge file.

Step 2: Keep the aspect ratio

Aspect ratio is the relationship between width and height. A 4000 by 3000 image has a 4 to 3 ratio. If you change width without changing height in proportion, the image will look stretched or squashed. When you resize, lock the aspect ratio in your editor, or calculate the new height from the new width. For a 4 to 3 image, 1200 wide becomes 900 tall. For a 3 to 2 image, 1200 wide becomes 800 tall. For a 16 to 9 image, 1200 wide becomes 675 tall.

Step 3: Resize the image

Open the image in an editor, such as Photoshop, GIMP, Preview on Mac, Photos, Squoosh, or your website image tool. Set the new width, keep the aspect ratio locked, and export a copy. Keep the original file untouched. Work on a copy so you can try again if the result looks wrong. Use a high-quality resampling method if your editor offers one. It helps edges stay clean.

Step 4: Choose the format

For photographs, JPG is a safe choice. It handles smooth tones and complex detail well and produces small files. WebP is often even smaller than JPG at similar quality and supports transparency. It is now supported in modern browsers. PNG is best for logos, screenshots, diagrams, and images with sharp text or large flat areas. PNG files for photos are usually much larger than JPG or WebP, so avoid PNG for large photos. If you use WebP, keep a JPG fallback only if you need to support very old browsers or tools that cannot read WebP.

Step 5: Set the quality

For JPG, a quality setting of 70 to 85 is a good starting point. Quality 80 often looks nearly identical to the original for web use while cutting file size sharply. Below 60, you may start to see blocky artifacts, especially in skies, gradients, and skin tones. For WebP, a quality setting of 70 to 80 is often enough. Test your image at a few settings and compare. Zoom to 100 percent and look at edges, text, and smooth areas. Choose the lowest quality that still looks clean at the display size.

Step 6: Export and check the file size

Export the resized, compressed copy and check its file size. A 1200-pixel-wide JPG photo at quality 75 to 80 is often 100 to 300 kilobytes, depending on detail. A simple graphic may be much smaller. If the file is still over 500 kilobytes, try a slightly lower quality, check whether the dimensions are larger than needed, or try WebP. After export, view the image at its actual display size on a phone and a laptop. If it looks sharp there, it is ready.

Worked Example: 4000 by 3000 to 1200 by 900

Start with a 4000 by 3000 photo. That is a 4 to 3 image, likely several megabytes as a JPG from a camera. It is far larger than a blog page needs. The display target is 1200 pixels wide. Divide 1200 by 4000 to get a scale factor of 0.3. Multiply the height by the same factor: 3000 times 0.3 equals 900. The new size is 1200 by 900. The aspect ratio is unchanged, so the image will not look stretched.

Resize the copy to 1200 by 900. Export it as JPG at quality 80. The file size should drop sharply, often from several megabytes to around 150 to 250 kilobytes for a typical photo. Export the same resized image as WebP at quality 75 and compare. The WebP file is often 20 to 40 percent smaller at similar visual quality. View both at 1200 pixels wide. Look at fine detail, such as leaves, hair, or text on a sign. If the WebP version looks clean and your site supports WebP, use it. If not, the JPG version is still a large improvement over the original.

Now check what not to do. If you take the 1200 by 900 result and upscale it back to 4000 by 3000, it will look soft because the detail removed during resizing cannot be recovered. If you display the original 4000-pixel image at 1200 pixels using only HTML width, the page will still download the full file. If you compress the original 4000-pixel image heavily without resizing, the file may still be large and the image may show artifacts. The correct order is resize first, then compress at a sensible quality.

Common Reasons Images Look Blurry

Blurry images usually come from one of four mistakes. First, upscaling: displaying a small image larger than its pixel size. Second, over-compression: using a quality setting so low that blocks and smearing appear. Third, repeated saving: opening and saving a JPG many times, which adds compression loss each time. Always work from the original or a high-quality copy, and export the web version once. Fourth, wrong display size: showing a 1200-pixel image at 2000 pixels wide on a large screen. Check the image at the largest size it will be shown, including on a high-resolution display, and choose dimensions that cover that case.

Limitations

Resizing cannot add detail that was never there. A blurry original will stay blurry. Compression always involves a trade-off. Very detailed photos, such as dense foliage or fine patterns, need higher quality to avoid artifacts. Text in images is less forgiving than photos. Small text may become hard to read after compression, so test screenshots and diagrams carefully. WebP support is broad but not universal in every tool. If you share images outside the web, keep a high-resolution original for print or future use.

FAQ

What is the best width for a web image? For most blog and content images, 1200 pixels wide is a good maximum. Use smaller widths for thumbnails and half-width images. Match the width to the display size, not to the camera size.

Should I use JPG or WebP? Use JPG for broad compatibility. Use WebP when you want smaller files and your site and tools support it. For photos, both can look good. For logos and sharp graphics, PNG is often better.

What JPG quality should I use? Start at 75 to 85. Quality 80 is a good balance for most photos. Go lower only if the image still looks clean at full display size, and avoid going below 60 for photos with smooth gradients.

Why does my image look blurry after shrinking? The most common causes are upscaling, over-compression, repeated JPG saving, or displaying the image larger than its pixel size. Work from the original, resize once to the display size, and test at 100 percent zoom.

Shrinking an image for the web is a simple habit with a large payoff. Resize to the display size, keep the aspect ratio, choose JPG or WebP, use a quality setting around 75 to 85, and never upscale. The 4000 by 3000 to 1200 by 900 example shows how much you can save without losing visible quality. Test each image at its real display size, keep the original safe, and your pages will load faster and still look sharp.