You upload a photo that looked sharp on your computer, and on the live page it’s soft, fuzzy or oddly grainy. Before you blame your camera or your hosting, know that blurry images almost always trace back to one of a handful of fixable causes.
Cause 1: The image is too small for where it’s displayed
This is the most common one. If an image file is 400 pixels wide but your page shows it at 800 pixels wide, the browser has to stretch it, and stretched pixels look blurry. The fix is to upload a bigger original. As a rule, your file should be at least as wide as the space it fills, and ideally about double for sharp results on modern phones and laptops (more on that below).
Cause 2: CSS is stretching the image
Sometimes a theme forces an image to fill a container regardless of its real size. A small image set to “width: 100%” in a wide column gets blown up. Check how wide the container is, then make sure your file is large enough to cover it. If you’re not sure of the size, right-click the image on your live page and inspect it, since the browser shows both the file’s real dimensions and its displayed size.
Cause 3: Over-compression
Squeezing a JPG too hard leaves blocky patches and smudgy edges, especially around text and fine lines. If you set quality very low to save space, raise it. Somewhere from 75 to 85 is a good range for most photos. Our JPG quality setting guide explains how to find the sweet spot.
Cause 4: High-density (retina) screens
Many phones and laptops pack two or three physical pixels into the space of one CSS pixel. An image that looks fine at 800 pixels on an older monitor looks soft on one of these screens because it needs about 1600 pixels of real detail. Uploading at roughly twice the display width fixes it. For more control, look at responsive images with srcset.
Cause 5: Repeated re-saving
Every save of a JPG loses a bit of data. Resizing a copy of a copy of a copy slowly turns your picture to mush. Always work from the original file. This is one of the common image resizing mistakes.
Cause 6: Your platform is recompressing it
Some platforms, including many social networks and website builders, compress and resize images again after you upload. If your image is far larger than they expect, they shrink it with their own settings, which can soften it. Uploading at the platform’s recommended size avoids a second round of processing. We have guides for the big ones, like Instagram and Facebook.
A quick diagnosis routine
- Find the original image’s pixel dimensions.
- Find the width it displays at on the page.
- If the file is smaller than the display width, replace it with a larger one.
- If sizes are fine, check the quality setting and the number of times it’s been re-saved.
- Look at the page on an actual phone, not just your desktop.
Can you fix a blurry image after the fact?
Only partly. Sharpening tools can make edges look crisper but can’t recreate lost detail. If the original is blurry, the cure is a better original. We dig into this in can you increase image resolution.
When you’re ready to re-export your images at the right size, use our online image resizer and always start from the highest-quality original you have.