Why Do My Images Look Blurry on the Web?

Diagnose it in thirty seconds

Right-click the image, open it in a new tab, and look at its actual dimensions in the tab title. Then compare with how large it is displayed on the page. If the file is 600 pixels wide and the page shows it at 1,200, that is the problem. If the file is large enough but still looks soft, it is compression or format. If it looks fine in the new tab but wrong on the page, it is CSS.

Cause 1: the file is smaller than the space

The most common cause. An image exported at 800 pixels wide is placed in a container 1,200 pixels wide, and the browser stretches it. Every pixel becomes one and a half, and the edges go soft. This happens when a designer's mockup used a small placeholder, when a CMS resized the upload, or when a stock image was downloaded at the free preview size.

The fix is to export from the original at the size it will be displayed, or larger, which brings us to the second cause.

Cause 2: high-density screens

Phones, tablets and most laptops now have screens with two or three physical pixels for every CSS pixel. An image displayed at 400 CSS pixels wide is drawn on 800 or 1,200 physical pixels. If the file is 400 pixels wide, the device has to invent the rest, and the result is the soft, slightly smeared look that people describe as "fine on my monitor, blurry on my phone".

The fix is to export photographs at twice the largest CSS size they will be displayed at, and use srcset so the browser can choose: a 1x file for standard screens, a 2x for dense ones. Serving the 2x file to everyone wastes bandwidth; serving only the 1x file guarantees blur on most devices. Our guide to optimising images covers the markup.

Cause 3: over-compression

JPEG and WebP are lossy: they throw away detail to shrink the file, and at low quality settings the loss is visible as blur, blockiness, and haloes around edges. Quality 40 looks bad; quality 60 looks soft; quality 75–85 is the range where the file is small and the loss is hard to see. Some CMS plugins and optimisation services default to aggressive settings; some images have been re-saved several times, each pass compounding the loss.

The fix is to re-export from the original at a sensible quality, once. Never re-compress an already compressed JPEG; go back to the source. If the source is lost, the damage is permanent.

Cause 4: the wrong format

JPEG is for photographs. Used for a logo, a diagram, a screenshot with text, or anything with sharp edges and flat colours, it produces fuzzy edges and noise around lettering, because the format is built to approximate smooth gradients, not crisp lines. Conversely, a PNG of a photograph is enormous but not blurry.

The fix: SVG for logos, icons and diagrams, which are vector and stay sharp at any size and any density. PNG for screenshots and images with text or transparency. JPEG, WebP or AVIF for photographs. A logo exported as a JPEG is one of the most common and most fixable causes of a site looking cheap.

Cause 5: CSS is stretching it

An image with a fixed width: 100% and height: 300px is distorted to fit, and distortion reads as blur. An image scaled up by a transform, or a background image with background-size: cover on a container far larger than the file, has the same problem as cause 1 with an extra layer of indirection.

The fix: set width and height attributes to the file's real dimensions so the browser reserves the right space, use object-fit: cover rather than fixed heights when cropping is intended, and check that background images are large enough for the largest container they will ever fill.

The export checklist

• Photographs: export at 2x the largest displayed CSS width, JPEG or WebP at quality 75–85, and provide 1x and 2x (and ideally several widths) via srcset.
• Logos, icons, diagrams: SVG, always. If a raster is unavoidable, PNG at 2x.
• Screenshots and text: PNG, or a high-quality WebP, at 2x.
• Set width and height on every img. It prevents stretching and prevents layout shift.
• Never upscale. If the source is too small, find a larger source; there is no setting that adds detail that was not captured.
• Check the result on a phone, not just a monitor.

A note on "AI upscaling"

Upscaling tools that use machine learning can produce plausible detail from a small image, and for a one-off hero photograph with no better source they can rescue a page. They invent what they add; on faces, text and fine textures the invention is sometimes visible and sometimes wrong. Use them as a last resort and inspect the output closely.

If a site has hundreds of images with mixed problems, a bulk pass with correct settings is a day's work and usually the single largest visible quality improvement available; book a call if you would like it done properly.

Common questions