Why Do My Website Images Look Blurry or Broken?

First, figure out which problem you actually have, because "blurry" and "broken" look different and get fixed differently. Blurry means the image loads but looks soft or pixelated. Broken means the image doesn't show at all, just a placeholder icon or an empty box. Here's what's behind each.

Fixing blurry images

Blurriness is nearly always a resolution problem. The image is smaller than the space it's filling, so the browser stretches it and softens every detail. A logo saved at 200 pixels wide looks crisp at that size and mushy when it's blown up to fill a 600-pixel header.

The fix is to upload a source file at least as large as the space it displays in. Modern phones and laptops have high-density screens that pack in extra pixels, so a good rule is to use an image roughly twice the display dimensions. Displaying at 400 pixels wide? Upload an 800-pixel version. It stays sharp without being wastefully huge.

Watch out for over-compression too. Some platforms and optimization plugins squeeze images so hard to save space that they visibly degrade. If your originals are sharp but they look blocky once uploaded, dial the compression back a notch. There's a balance between file size and quality, and pushing too far toward small ruins the look. That same balance matters for speed, which our guide on mobile-only slowness gets into.

Fixing broken images

A broken image is a different animal. The quality is irrelevant, because the file isn't loading at all. The browser went looking for it at a specific address and found nothing, so it shows a placeholder. Something happened to the file or the link that points to it.

The usual causes are simple: the file was deleted from the media library, it was renamed, a folder got moved, or the link in your page points to the wrong location. Broken images that appear right after a site migration or a domain change are almost always caused by URLs still pointing at the old location or a media library that didn't come across in the move.

To fix one, check the image's link and confirm the file actually exists at that address. Re-uploading the image and re-inserting it usually clears a one-off case. When a whole batch breaks after a migration, the fix is a search-and-replace on the old paths, which is faster than fixing each image by hand.

Upload images the right size in the first place

The habit that prevents both problems is sizing images to their real display size before uploading. Too small and they blur. Way too large and they load slowly and sometimes get auto-compressed into mush. Matching the file to where it'll appear keeps images sharp and pages quick, and it saves you from re-doing this later.

How to fix blurry images in WordPress, Squarespace, Wix and Shopify

The principle is the same everywhere, but the setting you touch is different on every platform, and on two of them there is no setting at all. Here's where to look on each.

WordPress

WordPress makes several copies of every image you upload. The three built-in sizes live under Settings > Media: Thumbnail (150 by 150 pixels, cropped), Medium (300 by 300) and Large (1024 by 1024). Your theme almost certainly registers a few more on top of those. The catch is that changing a number in Settings > Media only affects images you upload afterward. Everything already in the library keeps the copies WordPress made the day it was uploaded, which is why a theme switch can make a whole site go soft at once. The fix is the Regenerate Thumbnails plugin: install it, then run it from Tools > Regenerate Thumbnails to rebuild every size across the media library. Regenerating a large library takes a while, so start it when the site is quiet.

Squarespace

Squarespace has no quality slider, so there is nothing to adjust. It resizes every upload into seven widths, 100, 300, 500, 750, 1000, 1500 and 2500 pixels, and then serves the smallest one that still fills the space on screen. That's the whole reason a photo goes blurry here. Upload a 900-pixel file into a full-width banner and there is no 1500 or 2500 version to reach for, so a 750-wide copy gets stretched. Squarespace's own guidance is to upload around 2500 pixels wide and keep the file at 500 KB or less (the hard limit is 20 MB). The fix is always the same: replace the image with a bigger source file.

Wix

Wix converts uploads to AVIF and asks for high-resolution originals, a minimum of 2560 by 1440 pixels, with anything over 25 MB compressed before you upload it. Unlike Squarespace, Wix does give you a quality control, but only inside the Pro Gallery: click the gallery, click Settings, open the Advanced tab and scroll to Advanced Image Settings. There's an Image Quality slider and a sharpening toggle. Wix advises against pushing quality past 90, because past that you pay in load time for a difference nobody sees. For images outside a gallery, the answer is the same as Squarespace: better source file.

Shopify

Shopify's documentation says 2048 by 2048 pixels usually displays best for square product images, with a ceiling of 5000 by 5000 pixels (25 megapixels) and 20 MB per file. Blurriness on a Shopify store is often less about resolution and more about ratio. Theme templates crop product images to one aspect ratio, so a photo shot in a different shape gets scaled to fit and softens. Shoot and export every product image at one consistent ratio and the whole grid stays sharp.

1. 1Measure the space the image will fill. Right-click that spot in your browser, choose Inspect, and read the rendered width in pixels. Guessing is where most of this goes wrong.
2. 2Double it. Phone and laptop screens pack in extra pixels, so an image shown at 600 pixels wants a 1200-pixel file.
3. 3Then check the platform's own number. Roughly 2500 pixels wide on Squarespace, 2048 square on Shopify, at least 2560 by 1440 on Wix. Those override your own math when they're larger.
4. 4Pick the right format. JPEG for photographs, PNG when you need transparency on a flat graphic, SVG for logos and icons so they stay crisp at any size.
5. 5Look at the file size before you upload. Around 500 KB is a sane target for a full-width photo. A 6 MB camera original helps nobody.
6. 6Upload one and check it on a phone. If that single image holds up on a real handset, batch the rest. If it doesn't, you've saved yourself doing forty of them twice.

If you'd rather never fuss with this again

Getting images right, correctly sized, properly compressed, and not broken after a change, is exactly the kind of small ongoing detail that's easy to let slide. We handle image and media upkeep as part of our maintenance plans, which start at $99 a month, so new photos go up at the right size and nothing quietly breaks after a migration or update.

We're based in Mill Creek, Washington, north of Seattle, and we work with businesses across the Puget Sound and remotely nationwide. If your images look rough and you'd rather someone just fix it, that's an easy one for us.