Compare the page with the actual image
- Keep a copy of the approved logo you uploaded.
- Open your website at normal zoom. Note where the logo looks soft.
- Use the site editor to find the picture assigned to that area.
- If possible, open that picture on its own and read its pixel dimensions.
- Compare it with the approved master at the same size.
If the page copy differs, the problem may begin before display. Check for an old upload, thumbnail or image change made by the site. If your editor hides the loaded file, ask support which resource it serves.
Compare pixels with displayed size
Browsers may choose different image candidates from srcset and sizes. Inspect the loaded candidate, not only the upload.
Sources for this point: MDN browser image guide.
For example, a 120 pixel wide picture placed in a 300 pixel wide slot must be enlarged. That example is a clue to check your own numbers. Dense screens can make the choice of image copy matter too.
Ordinary raster scaling uses interpolation, which estimates new pixels. It does not recover original detail.
Sources for this point: GIMP image scaling guide.
Write down the source width, the loaded width and the displayed width. If the first two differ, ask whether your site can serve a more suitable copy. Do not simply save a larger version of a tiny thumbnail.
Separate blur from stretching
CSS, the website display rules, controls how an image fits its box.
Sources for this point: W3C image fitting rules.
| Symptom | Check |
|---|---|
| Edges look soft but the shape is right | Compare source and loaded pixel sizes. |
| Round shape looks oval | Inspect width and height settings. |
| Top or side is missing | Check cropping and the display box. |
| Whole name is too small to read | Try an approved layout suited to the available space. |
Choose a better replacement
If the master is clear and the loaded copy is small, replace the assigned resource or ask how to prevent that unwanted reduction. If the master itself has fuzzy letters, look for the original artwork.
Use SVG only if your platform accepts it and you have checked its contents. A file extension cannot fix a poor source. If the logo is clear but too detailed for a tiny slot, ask for an approved small version.
Check the logo in its real header
- Save the site change and reload the published page.
- Confirm that the new file is actually loaded.
- View the header on a wide screen and a phone.
- Keep normal zoom for the final readability check.
- Check every letter, the symbol, background and all edges.
If the same problem remains, send support the original and loaded dimensions with the location on the page. You are finished when the live header uses the intended file and its whole mark reads well at that size.
Sources
These sources support the points linked above. Each date shows when we checked that source.
- MDN browser image guide
Browsers can select image candidates using srcset and sizes Checked . - GIMP image scaling guide
GIMP links dimensions and uses interpolation when scaling pixels Checked . - W3C image fitting rules
CSS fitting controls image proportions and clipping in a box Checked .