Image Weight Check

It is almost always the images

When a small business site is slow, the conversation usually goes to the host, the theme or the plugins. Occasionally one of those is the problem. Far more often it is one photograph taken on a phone, four thousand pixels wide and three megabytes, shown in a box eight hundred pixels across.

The browser downloads every one of those bytes and then throws away about ninety percent of the detail to fit the space. On a laptop on office wifi you will never notice. On a phone on a normal connection, that single file is the difference between a page that is usable in two seconds and one that is usable in nine, and most people do not wait nine seconds.

The rule, which is boring

Export at roughly twice the width the image displays at, and no more.

Twice, because high density screens pack more physical pixels into the same space and a one-to-one image looks soft on them. No more than twice, because beyond that nobody can see the difference and everybody pays for it.

So an image in an eight hundred pixel column wants to be about sixteen hundred pixels wide. A full width hero on a large screen might want two or three thousand. A thumbnail wants eight hundred. The number that matters is how wide it is on screen, not how wide the file is.

Format, briefly

Use WebP for photographs. It is supported everywhere that matters and is usually thirty to fifty percent smaller than a JPEG at the same visible quality. AVIF is smaller again and worth using when your tooling makes it easy.

Keep PNG for things with hard edges and flat color: logos, diagrams, screenshots of text. A photograph saved as PNG is the most common large file on the web and it is usually several times bigger than it needs to be.

Quality around 80 percent is the sweet spot for photographs. The difference between 80 and 100 is invisible on a screen and roughly doubles the file.

What an optimization plugin does and does not fix

Compression plugins are genuinely useful and most sites should have one. They will squeeze a file without changing how it looks.

What they will not do is decide that your four thousand pixel photograph should have been sixteen hundred. They compress what you gave them. A perfectly compressed image that is three times larger than the space it occupies is still three times larger than it needs to be, and that, not compression, is where the weight is.

Responsive images help, when they are set up. A browser given several sizes picks the right one for the screen. Most themes generate those sizes automatically and then the page gets built in a way that bypasses them.

Two things that cost nothing

Give every image a width and a height in the markup. The browser then reserves the right space before the file arrives, and the page stops jumping around as things load. That jumping is a measured ranking input and it is the easiest one to fix.

Load the first image eagerly and the rest lazily. The image at the top of the page is the one a visitor is waiting for, so it should not be deferred. Everything below the fold should be, because a browser that is not downloading a photograph nobody has scrolled to yet is a browser doing something more useful.

Why this one runs in your browser

Every tool on this site runs locally and sends nothing anywhere. On this one that is easy to verify and worth verifying, because dropping a file onto a web page usually means uploading it.

Here it does not. The file is read by your own browser, measured there, and resized there on a canvas. Open your network panel and drop an image in. Nothing goes out. That is also why there is no size limit worth worrying about and no queue: your machine is doing the work.