Why does my image look blurry, and how to tell which kind it is

“Blurry” describes a symptom, not a cause, and the six causes need six different responses. Spending an hour enlarging a photograph that was out of focus is a common way to waste an afternoon, so the first job is diagnosis.

The thirty second diagnosis

Open the file in a viewer that lets you set the zoom precisely, and set it to 100 percent. Not “fit”, not “fill”: 100 percent, where one pixel of the file is one pixel of your screen.

• Sharp at 100 percent, soft where you are using it. The picture is fine. Something is stretching it. Go to “stretched by the app” below.
• Soft at 100 percent, and it does not have many pixels. Not enough resolution. Go to “too few pixels”.
• Soft at 100 percent with plenty of pixels, and the softness follows a direction. Camera shake.
• Soft at 100 percent with plenty of pixels, evenly, and something else in the frame is sharp. Missed focus.
• Sharp-ish but with blocky squares and coloured smears near edges. Compression.
• Crisp except that the edges wobble or the text has coloured fringes. A display scaling problem, or a vector that should not have been a bitmap.

That is the whole decision tree. Everything below is what to do with each answer.

Too few pixels

The picture does not have enough detail for the size it is being used at. A 600 pixel wide photo on a 1200 pixel wide layout has to invent half of what you see, and whatever is doing the inventing is almost certainly a two pixel average.

How to check it properly: note the pixel width of the file, note the width it appears at, and compare. For a screen, you want the file to be twice the displayed CSS width. For print, inches times 300. Image resolution explained has the tables.

Fixes, in order: find the original at full size; use the picture smaller; enlarge it properly with a model or a Lanczos filter. Ordinary stretching is not one of the options, because that is what is happening already.

This is the one case where an upscaler genuinely solves the problem. How to upscale an image covers the method and which engine suits which kind of picture.

Stretched by the app

The file is sharp and whatever is showing it is scaling it up.

On a web page, this is a mismatch between the image’s pixel width and the CSS width it is given, and it is much more visible on phones and modern laptops, which draw two or three device pixels for every CSS pixel. A logo exported at exactly 200 pixels and displayed at 200 CSS pixels is drawn at 400 device pixels on a retina screen, so half of what you see is interpolation.

In a slide deck or a document, it is usually a picture dragged larger by its corner. The file has not changed; the frame around it has.

Fix: export at twice the displayed size for screens, or drop the picture back to its natural size in the document. For logos and icons, use a vector and the problem disappears permanently, which is the subject of enlarging a logo without blur.

Compression

JPEG throws information away to save space, and when pushed hard it shows: eight by eight blocks in flat areas, ringing along hard edges, and colour smearing, which is worst on red text against a light background.

Once it has happened, it is permanent. Saving the file again as a PNG preserves the artefacts perfectly.

How to check: zoom to 200 or 400 percent and look at a hard edge. Compression damage sits next to edges and in flat gradients such as skies. Focus blur does not respect edges at all.

Fixes: find a less compressed copy, or start again from the original. If you are producing the file, save at quality 85 or above, and never re-save a JPG repeatedly: every save compresses what the previous save left. For artwork, screenshots and anything with text, use PNG, which is lossless. Reducing PNG file size covers keeping files small without going back to lossy formats.

Enlarging a heavily compressed picture is possible but works against you, because a model may read the compression blocks as structure and enlarge them into texture.

Camera shake and missed focus

Both are optical, both happened before the file existed, and neither can be genuinely undone.

Shake looks directional: highlights smear along a line, and the whole frame moves together. It comes from a shutter speed too slow for the lens and the hands holding it.

Missed focus looks even and affects part of the frame: the ear is sharp and the eye is not, or the background is sharp and the subject is not.

What sharpening does: it increases contrast at edges that already exist. On a slightly soft picture it helps. On a genuinely blurred one it produces a crunchy, haloed version of the same blur.

What a model does: it draws a plausible sharp picture consistent with your blurry one. On a landscape, that is often a pleasing result. On a face, it is a different person’s skin and a different arrangement of hairs. What AI upscaling can and cannot do has the detail, and the short version is that it is fine for a poster and wrong for a record.

The wrong kind of file

A logo, an icon, a chart or a diagram is made of shapes. Stored as a bitmap it has one fixed resolution and gets soft the moment it is used larger. Stored as a vector it has no resolution and is sharp at any size.

If the blurry thing is graphic rather than photographic, the real fix is usually to get or recreate the vector, not to enlarge the bitmap. When there genuinely is no vector, enlarge with a classical filter rather than a photographic model, because a model will add texture to flat fills.

Display scaling

Occasionally the picture is fine everywhere and looks wrong only on one machine. Windows display scaling at 125 or 150 percent, a browser zoom left at 110 percent, or an external monitor running at a non-native resolution will all soften everything on screen, including text.

Check: does text elsewhere on the screen look soft too? If so, the picture is not the problem. Set the browser zoom to 100 percent and the monitor to its native resolution before blaming a file.

Blurry in one place and fine in another

A surprising number of “blurry image” reports are about a picture that is perfectly sharp in the file and soft only in one destination. The destination did something to it.

Messaging apps re-encode photos aggressively by default. A photograph sent through WhatsApp or Messenger arrives smaller and more compressed than it left, and if that arrival is the copy you are now using, you are three generations from the original. Both apps have a way to send the file as a document or at original quality, and it is worth using when the picture matters.

Social platforms resize on upload to their own fixed widths and re-compress on top. A logo that looks crisp in your design tool can look furred on a profile page simply because the platform’s resizer is not doing the job carefully. The usual workaround is to upload at exactly the size the platform wants rather than letting it resize for you.

Slide decks and word processors often store a compressed copy rather than your file. Both PowerPoint and Word have a setting that discards the original resolution of inserted pictures to keep the document small, and it is on by default in some versions. If a deck’s images degrade every time it is saved, that setting is why.

Content management systems generate their own thumbnails and responsive sizes. If a site looks soft, check which generated size the page is actually loading rather than the file you uploaded; the browser’s developer tools will tell you the natural width of the image being served. Making a picture transparent in Word touches on the same category of quiet re-encoding inside Office documents.

In all four cases the fix is upstream, not in an editor: send or upload a file that survives what the destination is going to do to it. If the destination is your own website, you can measure it rather than guess: getReport’s image size checker reports, for every picture on a page, the size it was saved at against the size it is being displayed at, which is exactly the mismatch behind a soft logo, and image sizes that do not hurt covers what to do about it.

Summary

Zoom to 100 percent first. If it is sharp there, fix the layout. If it is not, work out whether you are short of pixels, short of focus or short of quality, because only the first of those has a good answer, and the good answer is either a bigger original or a proper enlargement.

Questions

Why is my picture blurry when I enlarge it?

Because there are not enough pixels for the size, and whatever is displaying it is filling the gaps with a two pixel average, which is fast and soft. A proper enlargement with a trained model or a Lanczos filter produces a much better result at the same size.

How can I tell whether a photo is out of focus or just small?

Zoom to 100 percent, so one image pixel is one screen pixel. At that zoom a small picture is sharp and simply does not go very far; an out of focus picture is soft at every zoom level. This one check answers the question in five seconds.

Can a blurry photo be fixed?

Motion blur and missed focus cannot be genuinely undone. Sharpening exaggerates the edges that are there, and a model will invent a plausible sharp version that is not your subject. If the picture is small rather than blurred, that is fixable.

Why does my logo look blurry on my website?

Usually because a bitmap is being displayed larger than its pixel size, or because a single resolution file is being shown on a dense display. Use an SVG where you can; if you cannot, export at twice the size the logo appears at.

Why does my image look sharp on my computer and blurry on my phone?

Phone screens pack two or three device pixels into each CSS pixel, so a picture that exactly fits a layout on a desktop is being stretched on a phone. Export web images at twice the width they are displayed at.

Does saving as PNG make a blurry picture sharper?

No. PNG is lossless, so it stops the picture getting any worse, but it cannot undo compression that has already happened or add pixels that are not there.