What "your images are too big" actually means

If we have ever looked at your website and mentioned that the images are too big, there is a fair chance you went away and made them narrower.

That is an entirely reasonable thing to assume. “Big” ought to mean big. But the sentence is quietly doing two jobs at once, and the half that usually matters is the half nobody explains: what a picture weighs, which is not the same thing as how much room it takes up on the screen.

A bag for life

Picture a bag for life from the supermarket. It is a fixed size. It holds what it holds.

Fill it with packets of crisps and you can carry it home on one finger. Fill an identical bag with tins of beans and you will be changing hands before the end of the road. Same bag, same dimensions, wildly different weight.

Images work in exactly that way. The dimensions are how much room the picture takes up on screen, measured in pixels, and that is the bag. The file size is how much has been packed into it, measured in kilobytes or megabytes, and that is the shopping. Two photographs can both be 1,200 pixels wide and one can be twenty times heavier than the other.

Now the part the analogy has to be honest about, because this is where it can be taken too far. The size of the bag does matter. A bigger bag holds more, and a photograph straight off a camera or a recent phone is a very big bag indeed, often four or five thousand pixels across. Shrink it to the size it will actually be shown at and you have put most of the shopping back on the shelf before doing anything clever. But a small bag packed with tins is still heavy, which is why resizing on its own does not finish the job either.

So it is both. How big the bag is, and what you put in it.

Why the weight matters

Every image on a page has to travel down the visitor’s connection before they see it. On the office wifi with a big monitor, a heavy page feels fine. On a phone with two bars on a train, the same page can take long enough that people give up. That is not a hypothetical audience: for most of the businesses we look after, more than half of all visitors arrive on a phone.

It also has a measurable effect on search. Google looks at how quickly the main content of a page appears, and on most pages the largest thing on screen is an image. If that image is a four megabyte photograph, it is the thing keeping your visitor waiting, and Google notices.

None of which means images are the enemy. Good photography is often the most persuasive thing on a page. It means the same photograph should arrive weighing a tenth of what it does now, and look identical.

Your site may already be doing this for you

Before you spend an evening on a folder of photographs, find out whether you need to.

Most modern website platforms generate smaller copies of whatever you upload and serve the one that fits the space. Some go further and convert to a more efficient format on the way out. If yours does that properly, the honest answer to “what should I be doing about images” is “nothing, it is handled”.

The way to check is the same trick as above. Upload one large photograph, put it on a live page, then open that image in a new tab and look at what actually arrived. If a 4,000 pixel photo arrives as 4,000 pixels and three megabytes, nothing is helping you and the rest of this article applies. If it arrives at 1,200 pixels and 90KB, something upstream is doing the work and you can stop worrying.

One caveat worth knowing. Automatic handling usually deals with the bag rather than the shopping. A platform will happily produce a smaller copy of your enormous photograph, but it is working from what you gave it, and some themes still reach for the original at full size. Uploading something sensible in the first place is never wasted effort.

Resize first, then compress

Two steps, in that order, and the order genuinely matters.

Resize to the largest size it will ever be shown. Work out how wide the image will actually appear on the page. A full-width banner might be 2,000 pixels on a large monitor. A product photograph in a grid of three is often nearer 800. A logo in a header might be 400. Whatever that number is, that is your target. Double it if you want it to stay crisp on high-resolution screens, and then stop, because beyond that you are storing detail nobody will ever see.

Never resize upwards. Enlarging a small image does not add detail, it just makes the existing detail bigger and softer, and the file gets heavier for the privilege.

Then compress. Compression is where you decide how much of the shopping to keep. Most tools give you a quality slider, and for photographs somewhere around 75 to 80 percent is the sweet spot: the file often halves and the eye cannot tell the difference. Push much below that and you start to see it, particularly in skies, skin tones, and flat areas of colour.

Doing it the other way round wastes the work. Carefully compressing a 5,000 pixel photograph and then shrinking it means you spent your effort on detail you immediately threw away.

Formats, in plain terms

You will meet a handful of image formats and the choice is simpler than it looks.

JPEG is for photographs. It is the right answer for anything with soft gradients and lots of colours, which is most pictures of real things.

PNG is for graphics with flat colour, sharp edges, or transparency. Logos, diagrams, screenshots of text. Save a photograph as a PNG and you will get an enormous file for no benefit, which is one of the most common mistakes we see.

SVG is worth knowing about for logos and icons. It is not a photograph at all, it is a set of instructions for drawing a shape, so it stays perfectly sharp at any size and usually weighs almost nothing. If your designer can give you the logo as an SVG, use it.

WebP and AVIF are the modern formats. Both produce noticeably smaller files than JPEG at the same visual quality, and both are supported by every current browser. If your platform offers to serve them, say yes.

If you are uploading by hand and would rather not think about it: JPEG for photographs, PNG for logos and screenshots, SVG for a logo if you have one. That will never embarrass you.

What to use

Start with what is already on your computer, because it is quicker than it sounds and nothing leaves your machine.

On a Mac, Preview will do the whole job. Open the image, choose Tools then Adjust Size to set the width, then File, Export, and use the quality slider on the way out. On Windows, the Photos app will resize, and Paint will too at a pinch.

If you would rather have something purpose-built, Squoosh (opens in a new tab) is free, runs entirely inside your browser, and shows you a before and after slider so you can see exactly how far you can push the quality down before it starts to show. Because it works locally, your photographs are not being sent anywhere, which matters if the images are of clients, staff, or anything commercially sensitive.

TinyPNG (opens in a new tab) is the other one people mention, and it is genuinely good at squeezing files. Two things to know: it works by uploading your image to their servers and sending back a smaller one, and the free tier limits how many you can do at a time. For a batch of ordinary product photographs that is fine. For anything you would not want sitting on someone else’s server, use a local tool instead.

Habits that stop it coming back

Resize before uploading, every time, rather than promising yourself you will tidy it up later.

Keep the originals somewhere else, in Drive, Dropbox or a folder on your machine. Your website is not an archive, and once you have uploaded a reduced copy the full-size version should still exist somewhere you can find it.

Watch the whole page, not one image. Eight pictures at 200KB will hurt more than one at 800KB, and a gallery page is where this usually goes wrong.

While you are in there, write the alt text. It is the short description of what the picture shows, it is what somebody using a screen reader hears in place of the image, and it is one of the few genuinely useful things you can tell a search engine about a photograph. It takes seconds and almost nobody does it.

If you would rather not think about it at all

Getting this right once, at the point the site is built, means nobody has to think about it again. A site set up properly resizes and converts what you give it, so you can upload the photograph straight off your phone and the right version reaches your visitor.

That is how we build, and for clients on Concierge Web Management it is simply part of what we look after. If your site is feeling sluggish and you suspect the images, get in touch and we will tell you honestly whether that is the problem or whether something else is going on.

You might also find the basics worth getting right before you invest in SEO useful, since image weight is one of the fundamentals it covers, and whether your site is actually any good on a phone, which is where a heavy page hurts most.