Sharp images look professional. Blurry images make a site look amateur — even if the actual content is excellent. Five different problems all produce "blurry" output. Diagnose yours.
A blurry image on a website is rarely a single problem with a single fix. The term "blurry" covers several distinct issues, each with different causes and different solutions. This article walks through the five most common ones and shows how to diagnose each.
Pixelated edges, soft details, jagged diagonal lines. Especially noticeable on text within the image.
You're displaying an image at a size larger than its actual pixel dimensions. A 400×300 image stretched to 800×600 on the page is just guessing pixel values — the browser uses bicubic or similar algorithms to interpolate, and you see the interpolation as blur.
Open the image in your browser and look at the URL bar or developer tools. The image's natural dimensions vs the displayed dimensions tell you the scaling factor. If displayed size is larger than natural size, you're upscaling.
Use a higher-resolution source image. The image should be at least as large as the largest display size it will appear at — and ideally 2× larger for retina screens.
For a website where the image displays at 800px wide, the source should be 1600px wide. If you only have a 400px source, you need to either find a larger version or accept that you can't display it at 800px without blur.
Blocky patterns in smooth areas (sky, skin, gradients). Halos around sharp edges. Loss of fine detail. Text becoming hard to read.
Lossy compression at a quality setting too low for the content. JPG below quality 60 starts showing visible blockiness in flat areas. WebP and AVIF degrade more gracefully but still degrade.
Open the image at 100% zoom (no browser scaling). Look at smooth areas like skies and skin tones. If you see blocky patterns or color banding, the compression is too aggressive.
Or: compare the file size to typical sizes for that content. A 1200×800 photo at 50 KB is suspicious. The same image should typically be 100-300 KB for good quality.
Re-encode from a higher-quality source at a more reasonable quality setting (75-85 for JPG/WebP). If you only have the over-compressed version, you can't recover what was lost — you'd need the original.
For the future: don't compress more aggressively than necessary. Start at quality 82 and only drop if file size is truly critical.
Slight softness across the entire image, even when the image is "the right size" on paper. Looks fine on old monitors but slightly fuzzy on phones and modern laptops.
The viewer's screen is high-DPI (retina), meaning the physical pixel density is 2× or more times the logical pixel density. CSS sizing is in logical pixels, but the screen renders in physical pixels.
An image at 800×600 displayed in a CSS 800×600 container looks crisp on a non-retina screen. On a retina screen, the same setup needs to render at 1600×1200 physical pixels, and the browser has to upscale your 800×600 source — back to Problem 1.
View the same site on a retina device and a non-retina device. If images look noticeably blurrier on retina, this is your problem.
Or: check your source image dimensions vs the CSS display size. The source should be at least 2× the display size.
Serve 2× source images for retina displays. Use srcset in HTML to deliver different sizes to different displays:
<img src="photo-800.jpg"
srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
alt="...">The 1x source is delivered to non-retina; 2x is delivered to retina. The browser picks automatically.
Combination of multiple compression artifacts. Blockiness, color shifts, exaggerated edge artifacts. Looks like the image has been compressed several times and re-saved.
Each time you save a JPG, you lose a little quality. Compounded across multiple generations (someone downloads a JPG, edits it, saves a JPG, sends it to you, you compress it again for the web), the damage accumulates.
If you didn't shoot the photo or generate the graphic yourself, you may be working with a multi-generation copy. Particularly common when:
Get the original. If the photographer can send you the RAW or original-quality JPG straight from the camera, do that. Every re-encoding step adds damage that can't be undone.
For the future: keep originals in lossless format. Only export to lossy compression at the final delivery step.
For screenshots and text-heavy images: fuzzy or smeared text. Color halos around letters. Sharp lines becoming wavy.
For photos: blockiness or banding visible in smooth areas.
JPG is optimized for photographic content with continuous tones. It performs poorly on sharp edges and text. PNG is the reverse — great for sharp edges, poor for photos.
Using the wrong format for your content type produces specific kinds of degradation that look blurry or fuzzy.
Examine the image at 100% zoom. Screenshot saved as JPG? Letter edges will have color halos. Photo saved as PNG? File is enormous, but quality is fine.
Doing all six prevents 95% of "blurry image" problems.
Get crisp images at the right size with pictoolkit's resize, compress, and convert tools. Browser-based, instant feedback.