How to Fix Blurry Images on Your Website
Find out whether blur comes from the source image, responsive sizing, cropping, or compression, then follow practical steps to fix it.
If an image looks blurry on your website, first check three things: whether the original file is already soft, whether the displayed area is larger than the file can support, and whether the browser downloaded a small responsive version. Then check theme cropping, temporary previews, and compression. A format change or sharpening filter cannot restore detail that is missing from the source.
1. Diagnose the source image and displayed size
Open the original file at its native size. Compare its pixel dimensions with the image’s rendered width and height on the page. Browser developer tools can show the rendered dimensions; the downloaded file’s dimensions are available from your image viewer or editor.
- Blurry at native size: replace it with a clearer original or export it again from the original at appropriate quality.
- Clear at native size, blurry on the page: the site may be enlarging it, selecting a smaller variant, or applying aggressive compression.
- Only some parts are missing or cut off: investigate the crop and aspect ratio; cropping is a framing problem, not necessarily a sharpness problem.
There is no universal pixel dimension that suits every image. The right source size depends on its rendered dimensions, layout, and display density. WordPress.com recommends choosing a larger image resolution such as Full Size when a smaller selection looks poor. It also cautions that a low-quality file cannot be enlarged with good results. WordPress.com’s blurry-image troubleshooting guide
2. Check which responsive image the browser selected
An <img> can offer several files in srcset. The sizes attribute describes the image’s expected rendered width so the browser can choose a candidate. If the browser thinks the image will be narrower than it really is, it may select a file that looks pixelated when enlarged.
- Open the affected page at the viewport size where the blur occurs.
- Inspect the image element and note
src,srcset, andsizes. - In the browser’s developer tools, open the Network panel, reload the page, and identify the image request that was actually downloaded.
- Compare that file’s pixel dimensions with the rendered size and display density. Repeat at another viewport where the image looks clear.
- Correct the candidate list or make
sizesreflect the actual layout. Do not copy a sample sizing string without adapting it to your page.
For example, if an image occupies the full viewport below 700 pixels and about half the viewport above that breakpoint, a simplified markup pattern could be:
<img
src="/images/article-1200.jpg"
srcset="/images/article-480.jpg 480w,
/images/article-800.jpg 800w,
/images/article-1200.jpg 1200w"
sizes="(max-width: 700px) 100vw, 50vw"
width="1200"
height="800"
alt="A person working at a desk">These values are examples: choose candidates and a sizes value that match your real layout. WordPress documents browser selection using srcset and sizes, and notes that pre-existing attributes in content HTML are left unchanged by its responsive-image handling. Shopify’s guide likewise explains that inaccurate sizes can result in a source that is too small, and recommends checking downloaded image sizes in Chrome DevTools. WordPress responsive images · Shopify responsive images guide
3. Determine whether the blur is temporary
Watch the image after the page finishes loading. Some Shopify themes initially show a smaller preview while a larger image loads. If it sharpens shortly afterward, that may explain the initial softness; persistent blur still warrants checking the source and delivered variant. Compare the behavior after a full reload and on another network connection. A slow connection can affect how quickly a full image arrives, but the preview behavior is platform- and theme-specific. Shopify image guidance · WordPress.com troubleshooting
4. Separate blur from theme cropping
Compare the source aspect ratio with the image area in the banner, slideshow, card, or product section. A theme may crop an image to fill a fixed shape. If the image is sharp but the subject is cut off, try a source with a more suitable aspect ratio, adjust the focal point, or choose a different section setting. These changes improve framing; they do not add resolution to a soft source. Theme controls vary by theme and version. Check the theme’s own documentation before editing code.
5. Review format and compression
Choose a format based on the image and inspect the result at its intended display size:
| Image type | Starting point | Check |
|---|---|---|
| Photographs | JPEG or a modern format served by your platform | Look for softness or compression artifacts at the actual rendered size. |
| Logos, icons, flat-color graphics, or transparency | PNG where appropriate | Check edges and transparency; do not convert blindly if another suitable format is available. |
Compression can reduce file size, but too much can remove visible detail. Changing formats does not recreate detail lost through low resolution or over-compression. Shopify documents image format and delivery considerations; WordPress explains the trade-off between quality and file size. Shopify image guidance · WordPress image size and quality
6. Check platform settings and customizations
WordPress
Check the Image block’s resolution setting and try a larger source such as Full Size if the current choice is too small. If the source and selected variant are correct, investigate recent theme or plugin changes. WordPress.com’s troubleshooting guide also recommends checking the connection and, where the plan and setup support it, investigating Jetpack CDN behavior. Jetpack CDN is not present on every WordPress site, so verify your own configuration before changing it. WordPress.com troubleshooting
Shopify
Check the section’s image settings, theme documentation, and the resource actually downloaded at the affected viewport. Shopify recommends its Liquid image_tag filter with appropriate width candidates and an accurate sizes value. If custom theme code is responsible, use the theme’s documentation or seek a Shopify Partner for work beyond the theme editor. Shopify responsive images guide
7. A practical troubleshooting checklist
- Inspect the original file at native size.
- Compare source pixels with rendered dimensions.
- Check whether the image sharpens after loading completes.
- Inspect
srcset,sizes, and the resource fetched in Network tools. - Determine whether the symptom is softness, compression damage, or simply a crop.
- Review CMS block, theme section, and image delivery settings.
- Test after disabling or reverting a recent plugin, theme change, or image optimization setting, one change at a time.
Common errors and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Image is blurry everywhere, including the original file | The source is soft or has low resolution. | Replace it with a better original. Upscaling or sharpening cannot reliably restore missing detail. |
| Looks fine in the editor but soft on one viewport | A responsive candidate or inaccurate sizes value may select a small file. |
Inspect the fetched resource at that viewport; correct candidate widths and layout sizing. |
| Initially soft, then becomes clear | A theme may use a small preview while the full image loads. | Confirm whether it sharpens after loading; investigate further if it remains soft. |
| Subject looks soft or oddly framed in a banner | The section may enlarge or crop the source to fill its shape. | Check resolution separately from framing; adjust focal point or use a more suitable aspect ratio. |
| Fine detail looks smeared or edges show artifacts | Compression may be too aggressive or the selected format unsuitable. | Re-export at a suitable quality and format, then compare at the intended size. |
| Problem appeared after a site change | A theme, plugin, CDN, or optimization setting may have changed delivery. | Review recent changes and isolate them one at a time; use platform-specific troubleshooting guidance. |
Performance, reliability, and cost considerations
Sending a much larger file to every visitor can improve sharpness but increase transfer size and loading time. Responsive candidates let the browser choose a suitable file for the layout and display; accurate sizes helps that choice. Use the smallest candidate that remains clear at its rendered size and density, and verify the actual request rather than guessing. Shopify’s responsive-image guide describes using correctly sized candidates, while its layout guidance explains that explicit image dimensions reserve space and help prevent layout shift; dimensions help layout stability, not sharpness. Responsive image guidance · Image dimensions and layout shift
There is no single image-size or compression setting that guarantees both clarity and fast delivery for every asset. Compare quality and transfer size on representative images, and recheck after changing a CDN or optimization plugin. Avoid judging only from an editor preview: confirm the delivered file on the published page.
Or skip the browser setup
To capture a page while investigating how it renders, ScreenshotNeo provides a website screenshot API. It can help you inspect a visual result, but it does not diagnose or repair the source image or responsive markup.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the example URL with the page you want to capture. See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, no card required.
FAQ
Can CSS sharpening fix a low-resolution image?
No. CSS filters can change appearance, but they cannot restore source detail that was never present. Use a better source and deliver an appropriately sized variant.
Should I always upload the largest possible file?
No. Choose dimensions that suit the layout and display density, then offer responsive candidates so smaller displays need not download an unnecessarily large file.
Does changing a JPEG to PNG make it sharper?
No. A format conversion does not recover detail already lost. Select a format suited to the image and export from the best available source.
Why is blur visible only on a phone?
The phone may be receiving a smaller responsive candidate, or the theme may use a different crop at that breakpoint. Inspect the fetched file and compare its dimensions with the rendered image.
