You exported a clean, good-looking photo, dropped it into your hero, and on a large monitor it looks soft, fuzzy, or pixelated. The frustrating part is that the same image often looks fine on your phone. That usually means the problem is not the image itself, but a mismatch between its size and the space it's being asked to fill.
A hero (the big banner image at the top of a page) is the largest image slot on most sites. It stretches edge to edge across wide screens, so it exposes any shortage of detail more harshly than a small thumbnail ever would. The good news: blurry heroes usually come from a short list of causes, and you can work through them in order. The honest caveat: a few of them can't be fully fixed without going back and starting from a larger source file. We'll flag those as we go.
This is a follow-on to the beginner's guide to using images on your website. If you haven't sized a hero before, that guide covers the basics; this post is about diagnosing one that already looks wrong.
Diagnose in order of likelihood
Don't randomly try fixes. Walk the causes from most to least common, stop when you find yours, and apply the matching fix.
| # | Likely cause | Quick tell | Fix difficulty |
|---|---|---|---|
| 1 | Source image too small for the display size | Looks worse the wider the screen; fine on mobile | Hard (needs a bigger source) |
| 2 | Missing retina / 2x export | Crisp on an old laptop, soft on a newer high-density screen | Medium |
| 3 | Over-compression or saving twice | Blocky patches, muddy gradients, halos around edges | Easy |
| 4 | Builder upscaling | You uploaded something small and the builder stretched it up | Hard (needs a bigger source) |
| 5 | Wrong aspect ratio causing stretch | Image looks squashed or smeared in one direction | Easy |
Work top to bottom. If your hero is soft on a big screen but sharp on your phone, start at cause 1.
Cause 1: the source is too small for the display size
This is the most common reason, and the most important to understand.
A hero element might display at, say, 1600 pixels wide in the browser. If the file you uploaded is only 800 pixels wide, the browser has to stretch 800 pixels of real detail across 1600 pixels of space. There simply isn't enough information, so the browser invents the in-between pixels and the result looks soft. No setting fixes this. The detail was never captured.
How to check it:
- Open the original file and look at its pixel dimensions (width by height in pixels, not the on-screen size or the file weight in MB).
- Compare that width to how wide the hero actually displays. In most browsers you can right-click the hero, choose Inspect, and read the rendered width.
- If the file's pixel width is smaller than the displayed width, you've found your cause.
The fix is to re-export or re-source the image at the correct dimensions. To find the right target, use the image sizes and aspect ratios cheat sheet and read off the hero row. Full-width heroes generally need a wide source file, often well over a thousand pixels across, because they fill the whole viewport. Your builder's documentation should list the exact recommended hero dimensions for your theme.
Be honest with yourself here: if your only copy of the image is small, you cannot recover detail that was never there. Enlarging it just enlarges the blur. The durable fix is a larger source, which we cover at the end.
Cause 2: missing retina (2x) export
If your hero is sharp on an older laptop but soft on a newer phone, tablet, or high-end monitor, this is usually the culprit.
High-density (sometimes called retina) screens pack roughly twice as many physical pixels into the same space. To look crisp on them, an image needs about twice the pixel dimensions of the space it fills. So a hero that displays at 1600 pixels wide wants a source closer to 3200 pixels wide to stay sharp on those screens. An image that's exactly 1600 wide will look fine on a standard display and a little soft on a high-density one.
The fix:
- Export your hero at roughly 2x its displayed width, then let the browser scale it down. Downscaling stays sharp; upscaling does not.
- If your builder supports responsive images (serving different sizes to different screens), enable that so high-density screens get the larger file and small screens aren't forced to download it.
- Re-check the cheat sheet for the 2x target, because doubling the width also roughly quadruples the file weight, which leads straight to the next cause.
Cause 3: over-compression and double saving
If the dimensions are right but the image still looks blocky, muddy in gradients (like skies or soft backgrounds), or shows faint halos around hard edges, the problem is compression, not size.
Two things commonly cause this:
- Compression set too aggressively. Pushing JPEG quality too low strips out the fine detail that keeps an image looking crisp.
- Saving the same file repeatedly. Each time a JPEG is exported, it's re-compressed and loses a little more. Edit, export, re-open, edit, export again, and the damage stacks up. This is sometimes called generation loss.
The fix is to go back to the cleanest original you have and export once, at a sensible quality, sized correctly for the hero. Don't compress an already-compressed file. For the full method, including how to find a quality setting that stays sharp while keeping the file light, see how to compress images without making them blurry. That post also covers when a different format makes sense, so this one won't repeat it.
If the image was already over-compressed before you got it, re-saving won't bring the detail back. Like cause 1, the durable answer is a better source.
Cause 4: builder upscaling and aspect-ratio stretch
These are two distinct problems, but they live in the same place: how your builder treats the hero slot.
Builder upscaling
Some website builders will happily accept a small image and stretch it to fill a full-width hero. The upload succeeds, the preview fills the space, and it all looks fine until you view it on a big screen. Under the hood this is the same as cause 1: the builder is enlarging a small source, and no upscaling, including AI-based tools, reliably invents detail that was never captured. Treat AI upscalers as a last resort that sometimes helps and often produces a smooth, plasticky result, not a guaranteed fix.
The fix is the same: upload a source that's already at or above the hero's target size so the builder never has to scale up.
Aspect-ratio stretch
If the image looks squashed, stretched, or smeared in one direction (faces too wide, circles turned into ovals), the file's shape doesn't match the slot's shape, and the builder is distorting it to fit.
The fix:
- Match the image's aspect ratio to the hero's. A wide hero needs a wide source; a tall mobile hero may need a different crop.
- Crop the image to the right shape before uploading instead of letting the builder squash it.
- Where the builder offers it, use a "cover" or "fill" setting that crops to fit rather than one that stretches.
The cheat sheet lists common hero aspect ratios so you can crop to the right shape the first time.
The durable fix: start from a properly sized image
Most of the fixes above are versions of one rule: the file you upload should already be the right size, the right shape, and lightly compressed before it ever reaches your builder. When you start from a correctly sized source, causes 1, 2, and 4 disappear, and cause 3 becomes a single careful export.
That's why where your image comes from matters. Picdrome's hero images are AI-generated and provided as source files sized for large display slots, so you're not stretching a small photo to fill a wide banner. They're free to use for personal and commercial website projects, subject to the Picdrome Image License (general guidance, not legal advice). Five homepage hero image mistakes covers what else to check before you commit to a hero file.
For more on the patterns that make a hero look soft, cheap, or off-brand, see the image mistakes that make a site look cheap.
Next step: confirm the right target size for your hero with the image sizes and aspect ratios cheat sheet, then re-export your image at that size (or 2x it for high-density screens) and re-upload.
In Plain English
A blurry hero is almost always a size mismatch, not a bad photo. Work the causes in order: a source that's too small for the wide hero slot, a missing 2x export for high-density screens, over-compression from saving too hard or too many times, your builder stretching a small file up, or a wrong aspect ratio squashing the image. Easy ones (compression, stretch) you can fix today; the size ones need a bigger source file, and detail that was never captured can't be recovered. This helps anyone building a site who uploaded a decent image and got a soft hero anyway. Use it the moment your banner looks fuzzy on a large screen. The durable fix is to start from a file already sized for the slot: check the cheat sheet for the target, re-export at that size, and re-upload.