Images look wrong

Image problems come in a handful of shapes, and each has a different cause. Find the one that matches what you are seeing.

The image is blurry or pixelated

The source image is too small for the space it is being shown in.

An image is a fixed grid of pixels. Displaying it larger than it was made stretches those pixels, and the result is soft or blocky. Nothing on the site's side can add detail that was never in the file.

This bites hardest on large images, such as a hero banner across the top of a page, or a full-width background. A small image that looked fine in a thumbnail falls apart at that size.

Fix: replace it with a larger version of the same image. Find the original rather than the copy that has been through email or a chat app, both of which shrink images.

Two sources of small images to avoid:

• Images saved from another website. What you download is the already-shrunk display version.
• Images pulled from social media, which compresses everything it stores.

Go back to the photographer's file, the stock library, or your designer for the full-size original.

The wrong part of the image is showing

The image is being cropped to fit a space with a different shape, and the crop is cutting off the part you care about, such as someone's head, or the product in the corner.

Cropping happens because the space on the page has a fixed shape and your image does not match it. Something has to be trimmed.

Fix: adjust the crop or the focal point for that image so the important part is kept. Setting a focal point tells the site which area to keep centered whenever the image is cropped, which is more reliable than cropping once, because the same image may be cropped differently at different screen sizes.

Where an image appears in several places at different shapes, a focal point does more work than any single crop.

The upload failed

Two things stop an upload:

• The file is too large. Photos straight from a modern camera or phone are often far bigger than a web page needs.
• The file type is not supported. Common web image formats work. Camera raw files, design source files, and other specialist formats do not.

Fix: for size, resize or compress the image before uploading. A width of a couple of thousand pixels is more than enough for almost any use on a web page, and the file will be a fraction of the original. For format, export or save the image as a standard web image format first.

Doing this is not only about getting past the upload. Smaller files make your pages load faster, which visitors notice.

The old image is still showing

You replaced an image and the previous one is still there. This is almost always your browser's cache.

Fix: hard refresh the page by pressing Ctrl + Shift + R on Windows and Linux, or Cmd + Shift + R on Mac. If it persists, open the page in a private window, which has no cache and shows you what a visitor sees.

Also check you published the page after changing the image. An image swap is a change like any other and needs publishing.

The image is stretched or squashed

The image's proportions do not match the space it is in, and it is being distorted to fill it. Faces look wide and circles look oval.

Fix: use an image whose proportions match the space, so a wide image for a wide banner and a square one for a square slot. Crop your image to the right shape before uploading rather than relying on the page to force it.

If you are using a component that expects a particular shape, prepare your images to that shape once and reuse them. It is less work than fighting each one individually.

Habits that prevent most of this

• Keep full-size originals somewhere, and upload from those.
• Resize to a sensible width before uploading rather than uploading camera files.
• Set focal points on images of people and products.
• Check new images on a phone as well as a computer.