Why Do My Website Images Look Blurry?

Find where the image becomes blurry

A website image passes through several steps: capture or design, export, upload, automatic processing and display. The useful question is where the detail first disappears. Changing every setting at once makes that difficult to find.

Open the original on your device and inspect it at 100% zoom. Then open the exact file you uploaded. Finally, inspect the image loaded by the published page. Compare the same feature in all three: an eye, a product label, a thin line or a word. A small thumbnail can hide differences, while extreme zoom makes even a good photograph show pixels.

If the original is already out of focus or contains motion blur, resizing and compression will not recover the scene. Use a sharper source or retake the photograph. If only the downloaded export is poor, fix the export before investigating the website.

Match the symptom to the next check

Inspect the file the page actually loads

Uploading a large photograph does not guarantee the page displays it. A content management system may create thumbnails and several intermediate sizes. A page block or theme can request one of those smaller copies, even while the original remains available in the media library.

Inspect the published image with your browser's developer tools. Look at the image request in the Network panel and open that file. Record its pixel dimensions and compare them with the space it fills on the page. The original upload's dimensions are not enough to diagnose this step.

For example, a 300-pixel-wide thumbnail displayed across a 900-pixel article column is being enlarged. Choosing the full original might fix softness but deliver an unnecessarily large file. A suitable intermediate version is a better candidate. Check the selected size in your editor or template rather than compressing the thumbnail again.

If the page has several image sources, the chosen URL can change with the viewport. Check both phone and desktop layouts. Our responsive images guide covers the implementation; the MDN responsive images documentation explains source selection and screen density.

Choose enough pixels for the actual placement

Image pixels and page display width are different measurements. A photograph displayed at 600 CSS pixels wide can be tested with 600- and 1200-pixel-wide copies. Compare them on the screens that matter for your site, including a high-density phone. The larger version may show more detail, but it also needs a file-size check. Compare both versions to see which one suits the placement.

Use the image resizer to create a copy from a sufficiently large original. Keep the proportions locked. Enlarging a 300-pixel source to 1200 pixels creates a bigger pixel grid, not the missing photographic detail. For placement-based examples, read best image sizes for websites.

A crop also reduces the available pixels. If a face occupies only a small corner of a wide photograph, cropping tightly around it may leave too little detail for a large portrait. Check the cropped file's dimensions before sizing the final export.

Check compression and small text separately

Blocky gradients, smeared texture and speckles around letters suggest excessive lossy compression. Return to the best source and compare a less compressed export at the same dimensions. Saving a damaged JPG as PNG preserves the damage; it does not undo the earlier export.

For a screenshot or diagram, read the smallest important text at its intended display size. Compare PNG with your current export instead of assuming the format best suited to a photograph also suits text. The JPG vs PNG guide explains that choice. Text that is simply too small may need a redesigned graphic rather than a higher quality setting.

Do not repeatedly feed a lossy download back into another converter while testing. Keep separate candidates from the original, with filenames identifying dimensions and format. That gives you a useful comparison rather than a chain of accumulated changes.

Here, 100% means viewing the image at its actual pixel size in an image viewer: one image pixel is shown as one screen pixel. The browser’s page zoom is a separate setting.

Example: a sharp upload becomes a soft article image

Suppose your 2400 × 1600 photograph is clear locally, but looks soft in a 600-pixel-wide article block. The published page loads a 300 × 200 thumbnail.

1. Keep the original and confirm that the thumbnail is the file the page uses.
2. Change the block's image selection or template to request a suitable larger version.
3. Compare 600 × 400 and 1200 × 800 candidates at the same displayed width.
4. Inspect the result on a phone and desktop, then compare the actual delivered file sizes.
5. Keep the smallest candidate that shows the details your readers need.

The important fix is selecting an appropriate image version. Compressing the 300-pixel thumbnail cannot supply the missing detail. If the page still shows the previous version, check the requested URL and refresh the relevant cache before exporting again.

Frequently asked questions

Will changing DPI make my website image sharper?

Changing the resolution label alone does not add pixels. Check the pixel dimensions, displayed size and delivered version. See DPI, PPI and pixels for the distinction.

Does switching to WebP fix blur?

A format change cannot recover detail lost in the source. Start with the sharp original, then compare exports for clarity and file size.

Why does the image look fine in the media library?

The library and the page may display different versions at different sizes. Compare the file requested by the published page with the preview you checked.