Images are usually eighty percent or more of a homepage's total weight, and most of that is avoidable without any visible loss of quality. Two decisions account for nearly all of it: choosing a format suited to the picture, and serving an image sized for the screen it will appear on rather than the largest screen it might appear on.
The arithmetic worth holding in your head
A homepage carrying six or seven photographs straight from a phone camera can easily exceed fifteen megabytes. Properly handled, the same page with the same pictures lands somewhere around one.
That difference is not theoretical for the person loading it. On a strong connection it is a second or two. On a weaker mobile connection, which is what a customer standing outside a job site actually has, it is the difference between a page that appears and a page they abandon. What that costs in enquiries is set out in how slow a site has to be before calls drop.
A useful target for a small business homepage is under one megabyte total, and under two if it is photograph-heavy. Both are comfortably achievable without removing a single image.
Format by job
The format is chosen by what the picture is, not by what the camera produced.
| Format | Use it for | Notes |
|---|---|---|
| WebP | Almost every photograph and most graphics | Substantially smaller than JPEG at equivalent quality, supported everywhere that matters now. The sensible default. |
| AVIF | Photographs where size matters most | Smaller again than WebP, slower to encode. Worth serving with a WebP fallback rather than alone. |
| JPEG | Photographs, as a fallback | Universal and larger. Still fine, and no longer the best available choice. |
| PNG | Screenshots, and graphics needing transparency | Enormous for photographs. A PNG photograph is the most common single weight mistake on small business sites. |
| SVG | Logos, icons, simple illustration | Scales to any size with no quality loss and often only a few kilobytes. Underused. |
| GIF | Essentially nothing now | Animated GIFs are far heavier than an equivalent short video. |
The mistake that costs the most
Not format. Sizing.
A photograph is uploaded at 4000 pixels wide because that is what the camera produced. The page displays it in a column 600 pixels wide, and on a phone perhaps 380. The browser downloads all 4000 pixels and throws most of them away.
The visitor pays for every one of those pixels in data and time, on the device least able to afford it. This single issue accounts for more wasted weight than every other image decision combined, and it is invisible from the desk of whoever uploaded it, because on a large screen the page looks correct.
The fix is to serve several sizes and let the browser choose, which is what responsive image markup exists for. A modern build does this automatically at the point images are added, so nobody has to remember. Where it has to be done by hand, the practical minimum is to resize before uploading rather than relying on the page to shrink it visually.
Compression, and how far to take it
Compression settings are given in quality values, and the useful range for web photographs sits between roughly 75 and 85. Below that, artefacts become visible in gradients and flat areas such as skies and walls. Above it, the file grows noticeably while the improvement does not.
The instinct to keep quality at maximum is understandable and expensive. At typical viewing sizes on a phone, the difference between a photograph at 95 and one at 80 is essentially invisible and the file is often half the size. The place to spend quality is on the one or two images the page is genuinely built around, not uniformly across every thumbnail.
The image at the top of the page
Worth treating separately, because it is usually the largest visible element and therefore the one that determines when the page feels ready.
- Do not defer it. Lazy loading the top image delays the single thing the visitor is waiting for.
- Give it explicit dimensions so the layout does not jump when it arrives, which is one of the more irritating things a page can do on a phone.
- Size it for the viewport it appears in, which for most visitors is a phone rather than a desktop.
- Consider whether it needs to be a photograph at all. A well-set headline over a solid colour loads instantly and frequently outperforms a stock image nobody looks at.
A weight budget worth adopting
Budgets work better than intentions, because they force a decision when something new is added rather than after the page has quietly doubled.
Pick a number, one megabyte is a reasonable homepage target, and treat it as fixed. Anything new arriving on the page has to fit within it, which means either compressing harder or removing something. Without that constraint pages only grow, because every individual addition looks small against a total nobody is tracking.
The related search considerations, filenames and alt text among them, are covered separately in getting images right for search. Weight and search work together here, since a page that loads quickly is also a page that gets crawled and ranked more favourably.
Frequently asked questions
What image format should I use on my website?
WebP for almost every photograph and most graphics, SVG for logos and icons, PNG only for screenshots and graphics needing transparency. AVIF is smaller still and worth serving with a WebP fallback.
Why is my homepage so slow?
On most small business sites the answer is images, usually uncompressed and sized far larger than they are displayed. It is common for images to be eighty percent or more of a page's total weight.
How large should a homepage be?
Under one megabyte is a reasonable target for a small business site, and under two if it is photograph-heavy. Both are achievable without removing any images.
Should I upload full-size photos and let the site resize them?
No. Visually shrinking an image in the layout still downloads every pixel. The browser should be offered several sizes so it can choose the one that fits the screen, which a properly built site handles automatically.
What compression quality should I use?
Between roughly 75 and 85 for web photographs. Below that, artefacts appear in skies and flat areas. Above it, the file grows substantially while the visible improvement does not.
Is WebP safe to use now?
Yes. It is supported across current browsers and produces meaningfully smaller files than JPEG at equivalent quality. Serving a JPEG fallback covers anything unusual.
West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.
Homepage taking too long to appear?
We size, convert, and compress every image at build time, so the page stays fast without anyone having to remember to do it.
Start a Conversation