Images on your site

You upload one image. BrightSite works out what each visitor actually needs and sends them that. You do not make a phone version and a desktop version yourself.

What happens automatically

When an image appears on a page, BrightSite resizes it to the size it is being displayed at. Someone on a phone gets a small image. Someone on a large monitor gets a bigger one. Neither downloads more than they need.

It also serves modern image formats to browsers that support them. These files are smaller than the old formats at the same visual quality, so pages load faster. Browsers that do not support them get a format they do. This is invisible to you and to your visitors.

The practical effect is that your original file stays untouched in the media library, and everything the public sees is derived from it. If you later replace the image, every derived size updates with it.

Cropping and aspect ratio

Aspect ratio is the shape of an image: wide, square, tall. A layout often needs a particular shape. A row of team photos looks tidy when they are all the same shape, and a wide banner needs something much wider than it is tall.

When you place an image you can set the shape it should fill, and crop it to fit. Cropping selects the part of the image that gets shown. The rest is left out of that placement, not deleted from your file.

Because the original is never altered, you can use the same photo cropped square in one place and wide in another.

Focal point and smart cropping

When an image is cropped to a different shape, something has to be left out. The problem is that the important part is often not in the middle. Crop a group photo to a square and you can cut someone's head off.

The focal point solves this. You mark the part of the image that matters, usually a face or the subject of the photo, and every crop keeps that point in view. The picture is trimmed around it rather than through it.

Set a focal point on any image where the subject is off center. On a photo where the subject is dead center, the default handling is already fine.

Alignment

Alignment controls where the image sits relative to the text around it: to the left with text beside it, to the right, centered on its own, or spanning the full width.

Some rough guidance:

• Full width for banners and anything meant to make an impression.
• Centered for a single image that belongs to the text above and below it.
• Left or right for a smaller image, such as a portrait next to a bio, where the text should wrap around it.

Be consistent across a page. Images aligned differently on every section makes a page feel unplanned.

What this means for you

Upload one good image at a decent size, set a focal point if the subject is off center, and let the platform handle the rest. You do not need to resize photos before uploading, compress them, or export multiple copies.

The one thing that is still on you is starting with an image that is good enough. Something too small or badly lit cannot be rescued by processing. See Image best practices for what to aim for.