How to prepare images for your website: size, format and file names

Wireframes, colour swatches and a laptop on a desk

Most of the content changes our clients make after launch involve images: a new team photo, a project shot, a product update. Getting a few basics right before you upload keeps your pages fast, sharp and easier to find. This is the same advice we give every team in their website training.

1. Resize before you upload

Photos from a phone or a professional camera are made for print. They are often 6,000 pixels wide or more, which is far bigger than any screen needs. Resize images to a maximum of about 2,500 pixels wide before you upload them. Anything larger only adds weight and slows the page down.

Don’t go too small either. An image that fills the full width of the screen needs enough resolution to stay sharp, so keep large banner images close to that 2,500-pixel mark.

2. Convert to WebP

JPEG and PNG are the formats most people know, but for websites we use WebP. It is a modern format developed by Google that keeps quality and transparency while producing much smaller files. A page with ten large PNGs can weigh many times more than the same page with WebP images.

You don’t need special software. Search online for “JPEG to WebP” or “PNG to WebP” and you’ll find free tools that convert images in bulk. If you’re not sure, ask us and we’ll point you to one.

3. Give every file a meaningful name

A file called image1.png or untitled-design-5.png tells search engines nothing. Name the file after what is in the picture, for example team-photo-total-health-choice.webp or ndis-physiotherapy-session.webp. If a page is targeting a particular search term, it helps to use that term in the file name where it fits naturally.

4. Set the focal point instead of cropping

On sites we build with Flatsome, you can choose the focal point of an image in the page builder. Drag the handle to the part of the photo that matters, such as a face or a product, and the image stays well framed on desktop and mobile. There’s no need to make a separate cropped version for each screen size.

5. Keep videos short and light

Background videos should be MP4 files, and we aim to keep them under about 20 MB. Online MP4 compression tools can reduce the size without a visible drop in quality. For longer videos, upload them to YouTube and paste the link into the page instead.

6. Tidy up the media library

Old images you no longer use still take up space. Every so often, check the media library and delete images that aren’t on the site any more, so it stays light and easy to search.

Need a hand?

If you’re not sure an image is ready, send it to us. We record short videos for clients all the time to show exactly how to make a change, and if you’d rather we handle it, updates like this can be part of a website care plan.

Leave a Reply

Your email address will not be published. Required fields are marked *