Image best practices

BrightSite does the technical work of resizing and optimizing your images. These are the decisions still worth making yourself.

What size to upload

Upload an image large enough to look sharp at the biggest size it will ever be shown, and no larger.

As a rough guide:

• Full-width banners and hero images: around 1600 to 2400 pixels wide.
• Images inside a column of text: around 1000 to 1600 pixels wide.
• Small images like team portraits or logos in a row: around 600 to 1000 pixels wide.

If in doubt, err slightly large. An image with a bit more detail than needed is fine. One that is too small looks soft and blurry when stretched, and nothing can fix that afterwards.

The reason not to go enormous is that very large files take longer to upload and use more storage, and past a certain point the extra pixels never reach anyone. A 6000 pixel wide photo straight from a camera is more than any website needs.

File size

Because images are optimized when they are served, the size of your original matters less than it used to. It is still worth keeping originals sensible. A few megabytes per photo is normal. Tens of megabytes means it is probably an uncropped, uncompressed camera or phone original, and cropping it first will save you time on every upload.

Photos from a phone are usually fine as-is.

Photos versus graphics

Two broad categories, and they behave differently.

• Photos are real-world pictures with lots of colors and soft edges. Use JPEG or the format your camera produces. Photos compress well and small imperfections are invisible.
• Graphics are logos, icons, diagrams, screenshots, and anything with flat color, hard edges, or text in it. Use PNG. These need crisp edges, and compressing them like a photo makes text look fuzzy and puts smudges around lines.

The common mistake is saving a logo as a JPEG. It will look slightly dirty around the edges, especially on a white background. Use a PNG.

If you need a transparent background, for example a logo that sits over a colored section, you need a PNG. JPEGs cannot be transparent.

Writing alt text

Alt text is a short written description of an image. It is not shown on the page in normal use, but it does real work.

It matters for two reasons:

• Accessibility. People who use a screen reader hear the alt text instead of seeing the image. Without it they get nothing, or just a file name. If the image carries information, that information is simply lost to them.
• Search. Search engines read alt text to understand what an image shows. It helps your images appear in image search and gives search engines more context about the page.

How to write it

Describe what is in the image, briefly and plainly, as if you were telling someone over the phone what they are looking at.

• Good: "Two decorators painting the front of a Victorian terraced house."
• Poor: "image1", "photo", "painting decorating painters near me".

A sentence is usually enough. Do not start with "Image of" or "Picture of", because screen readers already announce that it is an image. Do not stuff in keywords; it reads badly to people and search engines discount it.

If an image is purely decorative and carries no information, a short description is still better than nothing, though keep it brief.

Write alt text when you place the image, while you still remember what it shows. Going back later to add it across a whole site is a tedious job nobody enjoys.