Why do my images look blurry on some screens?

The device pixel ratio is how many physical pixels a display uses for each CSS pixel: 1 on many desktop monitors, 2 or 3 on most phones and high-density laptops.

An image with exactly as many pixels as its CSS width looks sharp at a ratio of 1 and soft at a ratio of 2.

That is why the same page looks fine on the monitor it was designed on and soft on the designer's phone.

Zooming the page has the same effect, since it raises the effective ratio.

So the question is never whether the image is big enough in general, but whether it is big enough for the screen showing it.

An image element with a single source gives the browser no choice: every screen receives the same file.

Responsive candidates list several widths of the same image, and the browser picks the one that fits the display and its density.

Without them, the only way to be sharp on dense screens is to serve the largest file to everyone, which is the opposite problem.

Adding candidates at roughly one, two and three times the displayed width covers most screens.

When candidates are listed by width, the browser uses the sizes attribute to know how wide the image will be displayed before layout happens.

If sizes claims the image occupies a third of the viewport while the layout actually shows it full width, the browser picks a candidate a third as large as needed.

The markup looks correct, and the result is blurry only at the layouts where the claim is wrong — often on mobile, where a column becomes full width.

This is the mirror image of omitting sizes, which makes the browser assume full width and download files that are too large.

Checking the displayed width against what sizes claims, at each breakpoint, is the diagnosis.

A stylesheet that sets an image wider than its intrinsic width scales it up, and no browser can invent the missing detail.

This happens when a container grows at a breakpoint and the image is told to fill it.

Declared width and height attributes that do not match the file's real proportions stretch it in one direction, which reads as distortion rather than blur.

A cropped display that zooms into part of an image also discards resolution.

Aggressive lossy compression smears fine detail, and it shows first on text within images and on sharp edges.

An image CDN applying an automatic quality setting can produce this without anyone having chosen it.

Re-encoding an already compressed image compounds the loss.

A low-quality placeholder that is never replaced by the real image, because a lazy-loading script failed, looks like a very blurry image.

Looking at the file actually delivered, rather than the original, distinguishes this from the size causes.

In the browser's developer tools, compare the image's rendered size with the intrinsic size of the file that was actually loaded.

If the intrinsic width is smaller than the rendered width times the device pixel ratio, it is a size cause — one, two or three.

If the loaded file is large enough and still soft, it is compression or a placeholder.

Repeat on a dense screen or with device emulation, since the fault may only exist there.