The First Impression Has a File Size: A Sensible Image Diet for Small UK Brands

Most small UK brand sites do not fail because the design is ugly. They fail because the pictures arrive late, arrive soft, or arrive at a size that makes a phone work harder than it should. A customer on a train between Leeds and Manchester is not studying your file sizes. They are deciding, in about three seconds, whether you look like a business worth trusting.

That is why image compression belongs in a visual audit, not just a performance spreadsheet. The weight of a photograph changes how it is delivered, how it is rendered, and how it feels. A page that loads a hero image the size of a small album may still look fine on a fast office connection. On a patchy 4G signal, it becomes a grey box, then a soft shrug.

Start with the screen, not the source file

The first mistake is judging an image by the file that came out of the camera or the stock library. The second is judging it on a 27-inch monitor at 100% zoom. Your customer is probably looking at a 390px-wide phone, maybe a 360px Android, maybe a tablet propped up on a kitchen counter. Design for that.

Open your five most important pages in a browser and use responsive mode. Check the actual width the image occupies, not the width of the original file. A hero that fills a desktop screen might display at 1,400 pixels wide there, but only 390 pixels on a phone. Serving a 4,000-pixel original to both is like posting a billboard to someone who asked for a postcard.

For most small brand sites, you need two or three sensible sizes, not twelve. Hero images can often top out around 1,600 pixels wide for desktop and 800 for mobile. Product gallery images rarely need more than 1,200 pixels on the long edge. Team portraits might display at 300 pixels but deserve a 600-pixel source for sharper screens. The exact numbers depend on your layout, but the principle does not: match the file to the space it fills.

Compression is a craft, not a single slider

There is a temptation to drag the quality slider to 100 and call it safe. That is usually backwards. A JPEG at 100 can be several times larger than one at 75, while the visible difference on a phone is often negligible. The trick is to find the point where the image still holds together: skin tones, fabric texture, the edges of a product, the small print on packaging.

Modern formats help, but they are not magic. WebP is a reliable workhorse for most small brand sites in 2026, and AVIF can shrink photographic images further when your audience and hosting setup support it. The practical approach is to test, not assume. Export the same hero as JPEG, WebP and AVIF at the size it will actually display. Put them side by side on a phone. Look for banding in skies, mush in shadows, and that waxy look on faces. If AVIF saves 40KB but makes a model's cheek look plastic, it is not the better file.

Also watch the images that carry text or fine lines. Logos, diagrams and screenshots often belong in SVG or PNG rather than a heavily compressed JPEG. A product photo can survive a little compression. A brand mark with a crisp edge cannot.

Hero images: the handshake before the headline

A hero image is doing a lot of work. It sets the mood, establishes pace and tells the visitor something about the brand before they read a word. It is also the most likely image on the page to be enormous, because it looks impressive in the design file.

Audit it at mobile size first. Does the subject still read? Is the crop doing anything useful, or is it just a wide shot with the interesting part off-screen? A hero does not need to be a 6MB photograph of a warehouse to feel substantial. A well-cropped, well-compressed image with a clear focal point will often feel more confident. Aim for a file that arrives quickly on a middling connection. If a mobile hero is drifting past a few hundred kilobytes, ask what the extra weight is buying. Usually it is detail nobody can see.

Product photos: clarity beats megapixels

Product images have a different job. They need to answer questions: what is it, how big is it, what colour is it, what does the texture feel like? Compression that smears a label or shifts a colour is a sales problem, not a technical one.

Resize before you compress. A 6,000-pixel product shot displayed in a 600-pixel gallery slot is mostly wasted data. Crop to the right aspect ratio, then export at the display size you need. Test the result on a phone, not just a desktop. Look at the darkest and lightest areas, where compression artefacts tend to hide. If your deep green jacket turns into a muddy smudge, dial the compression back or try another format.

Team portraits: the face is the format

Team portraits are quietly important. They are the visual proof that a small brand is made of real people. They are also routinely uploaded at 5MB because the photographer delivered a beautiful high-resolution file and nobody wanted to touch it.

A portrait can be smaller than you think. Crop consistently, export at around twice the display size, and check the eyes and hairline for softness. A little compression is fine; a face that looks like it has been through a car wash is not. If your site uses circular crops, test the image in that shape before uploading. The best portrait in the world can look awkward when the crop cuts off an ear or leaves too much headroom.

The audit you can run before lunch

Pick your homepage, a product or service page, an about page and a contact page. For each one, note the images that take up the most space and the ones that matter most visually. Then run a simple check:

• Compare the displayed size with the original file dimensions.
• Export a WebP or AVIF version and compare it with the JPEG on a phone.
• Look for softness in faces, muddiness in product colours and banding in skies.
• Check that any text or logo inside an image is still crisp.
• Keep the original high-resolution file archived, but do not serve it.

You do not need a performance engineering team for this. You need a few minutes, a phone and a willingness to look at the delivered image rather than the one on your desktop.

Weight is a visual signal

A lean image does not have to look cheap. The goal is not to starve every photograph until it rattles. The goal is to make the picture behave properly in the place it is actually seen. Sharp at the right size, quick enough to arrive with confidence, and honest about the brand it represents. That is visual trust, and it starts with a file size nobody notices until it goes wrong.