If a website photograph looks soft, uploading it again may change nothing. First find out whether the problem is in the original photograph, the file selected by the browser or the way the page displays it. Those three problems need different fixes.
On 11 October 2026 we checked the images on the Set It Once blog. This guide uses that specific check, then gives you a short acceptance brief for your own site. It does not claim a measured improvement in loading speed, traffic or rankings.
1. Check what is actually in focus in the original
Open the source file at its native size. Look at the subject you need the visitor to understand: the product edge, a person’s face, a label or a diagram. A soft background does not automatically mean the entire image is low quality. In a workspace photograph, the notebook can be sharp while the objects behind it are deliberately out of focus.
Write down the important subject before judging sharpness. If a product label must be read, choose a frame where that label is genuinely readable. Enlarging a small file does not restore missing detail. If the subject itself is blurred in the source, replace the source rather than repeatedly increasing its export dimensions.
2. Check the file loaded on the customer-facing page
Ask the person maintaining the site to inspect the browser’s selected image URL, available through currentSrc, on the page where the problem occurs. Compare it with the original and the alternatives in srcset. The default src matters too. The HTML Standard explains how browsers select among responsive image candidates; an attribute present in the editor is not proof that its candidate was used.
For our blog, an earlier check still selected a WordPress derivative ending in -1024x683.jpg, even after the high-resolution original was listed as a density candidate. We changed the default source as well as the candidate, then checked the page again. The selected URL now points to the verified sio-lead-handoff-hd.jpg original, whose file dimensions are 2400 × 1600 pixels.
This records a file-selection correction. It does not mean that every 1024-pixel photograph is insufficient, or that every site should deliver its largest file to every visitor. Different images and layouts need different choices. See the HTML Standard on responsive image selection.
3. Compare the displayed size with the required detail
As a planning example, a photograph displayed 500 CSS pixels wide on a display with a pixel ratio of 2 needs roughly 1000 source pixels across that displayed area. A heavy crop may require more of the original. Check the physical dimensions of the selected file; browser-reported intrinsic dimensions can be adjusted for density, so do not use that number alone as the source-file specification.
Give your implementer the card width, the screen density being tested and the selected URL. That is more useful than asking for "a bigger image". Keep the dimensions and crop consistent, and test the actual browser result. MDN documents the image attributes used for this.
4. Separate cropping, distortion and compression
A crop can remove part of the scene while keeping its proportions. Distortion stretches the scene. Check that circles stay circular and people do not become unusually wide. Then inspect fine edges for compression damage. Photograph exports and text diagrams need different treatment: a small label that survives in the original may become unreadable after an aggressive export.
For our explanatory blog diagrams we use source-rendered, lossless PNG files at 1800 pixels wide. That preserves the lettering we drew. It cannot repair a badly focused photograph. Keep a readable text equivalent beside a complex diagram so the advice remains available without deciphering the image. The W3C guidance on complex images explains accessible alternatives.
5. Verify the page where people will see it
Check the blog index, article cover and any related-article card. They can use different sizes of the same attachment. Repeat the check on a real mobile layout as well as desktop. Below-the-fold images must be brought into view before you treat an unloaded lazy image as broken.
Use the brief below for the affected image. It makes completion observable without asking your implementer to regenerate the whole site.
| Record | Acceptance check |
|---|---|
| Page and position | Exact URL and the card, cover or body image that needs work |
| Important subject | The detail that must be clear, such as a label or product edge |
| Selected file | The actual browser URL and verified physical file dimensions |
| Layout | Expected crop, natural proportions and no horizontal overflow |
| Desktop and mobile | Loaded image, readable essential detail and a usable text alternative |
| Download cost | Compare image weight and loading behaviour after the change |
Keep useful descriptions and honest credits
Describe the image in its article context. A clear filename, relevant nearby text and useful alt text help people and search systems understand it. Do not fill alt text with repeated search phrases. Google’s image SEO guidance also asks site owners to balance visual quality with loading cost.
Label stock photography as illustration, keep its author and source, and distinguish it from evidence of your own work. Our example proves which files we selected on the checked blog pages. It does not prove how another website performs.
Take one practical next step
Pick one important image and complete the six-row brief. If you need help checking the rendering and download trade-off, explore our website speed optimisation service. Start with the exact page and the detail that looks wrong.
Quick answers
Frequently asked questions
Does every website photograph need to be 2400 pixels wide?
No. Choose a source and responsive versions for the displayed size, screen density, crop and acceptable download weight. In our blog check, using the verified 2400-pixel original removed the uncertainty about which derivative was selected. That is a documented choice for those cards, not a universal rule.
Why can an image look sharp in the media library but soft in a blog card?
The card may load a different derivative, apply a crop or undergo another compression step. Inspect the browser’s selected file on the actual page rather than judging the media-library preview.
Should I sharpen a photograph until every background detail is clear?
No. A photograph can deliberately keep the background out of focus. Preserve honest product and people details. If the important subject is already blurred in the original, choose a better source instead of claiming that sharpening recovered missing detail.
About the author
Martin Iliev
Martin builds Set It Once to help people spend less time on repeated work. His guides explain what you can try, how to check the result and where the limits are.
More about Martin