Why your images look blurry on the web (and how to fix it)

Your images look sharp in the editor but blurry on your website. Here's why and how to fix it.

Common causes

1. Serving low-resolution images

A 600px image displayed at 600px looks fine on standard displays. On Retina/HiDPI displays (2x), it's effectively stretched to 1200px, making it blurry.

Fix: Serve 2x images (1200px for 600px display) and let CSS scale them down.

2. Over-compression

JPEG quality below 60 creates visible artifacts that look like blurriness, especially in smooth gradients.

Fix: Use quality 80+ for web images.

3. Browser scaling

When the browser scales an image up or down, it applies interpolation that can create softness.

Fix: Serve images at the exact display size.

4. Wrong resampling algorithm

Some image editors use bilinear interpolation by default, which creates softer results than bicubic or Lanczos.

Fix: Use bicubic resampling when resizing.

Retina/HiDPI fix

For Retina displays, serve 2x images:

<img src="image-1200.jpg" width="600" height="400" alt="..." />

The browser displays at 600px but uses the full 1200px for sharpness.

Testing

1. View on a Retina display. Most modern laptops and phones have Retina screens.
2. Zoom to 200%. If the image looks blurry at 200%, it's not sharp enough.
3. Compare with the original. Open the original image side by side with the web version.

Diagnose the cause fast

Blurriness has a few distinct causes, and the symptom tells you which one:

Fix each cause, step by step

Device pixel ratio (the most common cause). A Retina screen packs 2 physical pixels into each CSS pixel, so a 600px image in a 600px slot is stretched. Export at 2x — a 1200px file for a 600px slot — and set the HTML width/height to the CSS size. Photo Resizer can produce the exact 2x dimensions.

Over-compression. Quality below about 60 introduces artifacts that read as blur, especially in smooth areas. Re-export at quality 80-85 with Image Compressor; the file is slightly larger but visibly cleaner.

Upscaling. Enlarging a small image cannot invent detail — it interpolates, which is soft. Start from a source at least as large as the display size times the pixel ratio. If you must enlarge, do it modestly and add sharpening.

Wrong dimensions / browser scaling. If the browser resizes your image, it applies its own interpolation. Serve the image at the size it will display, and avoid stretching a fixed-size image to fill a wider container. Resizing without stretching covers keeping the aspect ratio correct.

Export settings that stay sharp

Dialing in your export once prevents most blur:

1. Resample with bicubic (sharper) or Lanczos, not bilinear — bilinear is the softest option.
2. Never enlarge past the native resolution. Downscaling is safe; upscaling is not.
3. Apply light output sharpening (a small unsharp mask, ~50-80% at 0.3-0.5px radius) after downscaling to restore crispness lost in resampling.
4. Keep quality at 80 or above for web photos so compression does not undo the sharpening.
5. Match the device pixel ratio by exporting 2x for the slot, then constraining the display size in HTML or CSS.

Getting file size and sharpness right at the same time is the goal of good web export — see reducing image file size for web performance for the size side of the equation.

Frequently Asked Questions

Why does my image look sharp on my laptop but blurry on my phone?

Phones and modern laptops use high-DPR (Retina) screens that render at 2x or 3x. An image sized for a standard 1x display gets stretched on those screens. Export a 2x version to match.

Can I sharpen a blurry image to fix it?

Sharpening can recover mild softness from downscaling, but it cannot restore detail that was never captured or was destroyed by heavy compression or upscaling. Start from a higher-resolution source instead.

Does compressing an image make it blurry?

Only if you compress too aggressively. At quality 80-85 there is no visible blur; below 60, artifacts in smooth areas start to look like blur.

What size should I export web images at?

Export at the display width multiplied by the device pixel ratio — typically 2x. For a 600px slot, export 1200px and display it at 600px for crisp results on Retina screens.

Related tools

• Photo Resizer — resize to exact web dimensions
• Image Compressor — compress without visible quality loss