Why does an image look blurry on the page but clear when I click it? (and how to fix it)

Short answer: The image looks blurry because your article is displaying a small (thumbnail) version of it stretched to a larger size. Pointing the image at the full-size version fixes it — here’s how to do it yourself.

Why this happens

When you upload an image, WordPress automatically creates several sizes of it (thumbnail, medium, large, and the full original). If an article displays one of the smaller sizes — say a 240×300 thumbnail — inside a space that’s larger than that, the browser has to stretch the small image to fill the space. Stretching a small image is what makes it look pixelated or blurry.

Clicking the image usually opens the full-size original, which is why it looks perfectly sharp there but not on the page itself.

How to fix it yourself

1. Edit the article or blog post.
2. Click the blurry image and open the code / HTML view for that image or its caption.
3. Find the image’s src — the link that starts with your site’s address and ends in the image filename. A stretched image usually has a size suffix in the filename, like ...-240x300.jpg.
4. Get the full-size URL: open the Media Library, select the same image, and copy its File URL / “Copy URL to clipboard.” The full-size link has no size suffix (e.g., Check-Distribution-2026.jpg instead of Check-Distribution-2026-240x300.jpg).
5. Replace the src link with that full-size URL.
6. Update and preview the post — the image should now be crisp.

How to avoid it next time

• Upload images at least as large as the space they’ll display in. If an image still looks blurry, upload a bigger version.
• Match the image’s orientation to its frame (put a landscape photo in a landscape spot).