Image Optimization for a Faster Small Business Website

Open almost any slow small-business website and the cause is the same: photos. A single picture from a modern phone can weigh 5 MB or more, and it is easy to drop four of them onto a homepage without noticing. The visitor then waits while their phone downloads pictures far larger than their screen can display.

The fix does not need a developer, and it is usually the biggest speed gain of any single change. This guide walks through each step in order and ends with a workflow you can repeat for every new photo.

Why images are the first thing to fix

Text, styles and code are small. Photos are big. On a typical small-business page, images account for most of the bytes the browser downloads. They decide how fast the main photo appears, whether the page jumps around as things load, and how much mobile data a visit costs.

If you want the wider picture first, our guide to website speed for small business covers scripts, fonts and hosting too. This post goes deep on images.

Step 1: Use the right dimensions

Dimensions are the width and height of the image in pixels. This is the most common mistake, and fixing it often cuts a file by 80 percent or more.

A phone photo is commonly 4000 pixels wide or more. If your page shows it in a column 800 pixels wide, the extra pixels are never seen. The browser downloads them anyway and then throws most of them away.

A simple rule: export at about twice the largest size the image is displayed. The doubling keeps it sharp on high-density phone screens. Some common cases:

You can find the displayed size by right-clicking an image on your page and inspecting it in your browser's dev tools, which shows the size it is drawn at.

Logos and simple icons are often better as SVG files, which are tiny and sharp at any size.

Step 2: Choose a modern format

The format decides how efficiently the image is stored.

• JPEG is the old standard for photos. It works everywhere but is the largest of the three.
• PNG is lossless and suits screenshots, sharp graphics and images needing transparency. It is usually a poor choice for photos because files get huge.
• WebP is typically noticeably smaller than JPEG at similar visual quality, supports transparency, and works in all current browsers.
• AVIF is often smaller again, especially for photos with smooth gradients. It is supported by current browsers, though it can be slower to create.

A practical default for owners: export photos as WebP. If your tools or site builder can also produce AVIF, offer it first and fall back to WebP. Keep a JPEG fallback only if you know you must support very old devices.

Step 3: Compress, but not too much

Compression trades a little detail for a much smaller file. Quality is usually set on a scale from 0 to 100.

• Photos: start at 75 to 80. Most people cannot see a difference from 100, and the file is far smaller.
• Images with text or sharp edges: go a little higher, around 85, since artifacts show up around lettering.
• Large background images with soft focus: you can often go down to 60 to 70.

Compare the result with the original at the size it will actually be displayed, not zoomed in. If you cannot tell them apart, keep the smaller one.

Reasonable targets: hero image under 200 KB, content photos under 100 KB, thumbnails under 30 KB, and the whole homepage's images under about 1 MB. A photographer's portfolio will need more than a plumber's contact page.

Step 4: Offer different sizes with srcset

A phone and a large desktop monitor do not need the same file. With responsive images, you provide several versions and the browser picks the best one for the visitor's screen.

The markup looks like this:

<img
  src="kitchen-800.webp"
  srcset="kitchen-400.webp 400w,
          kitchen-800.webp 800w,
          kitchen-1600.webp 1600w"
  sizes="(max-width: 700px) 100vw, 800px"
  width="800" height="600"
  alt="Newly fitted oak kitchen with white worktops">

In plain English: here are three versions and their widths, and here is how wide the image will be shown. A phone with a narrow screen downloads the 400 or 800 version instead of the 1600 one.

You do not have to write this by hand. Many site builders generate several sizes when you upload; make sure that setting is on. To serve different formats, wrap the image in a <picture> element with AVIF and WebP sources, keeping the <img> as the fallback.

Step 5: Lazy-load images below the fold

"Below the fold" means anything the visitor must scroll to see. There is no reason to download those images before the person gets there.

Adding one attribute tells the browser to wait:

<img src="team.webp" width="600" height="400" loading="lazy" alt="Our team outside the workshop">

Use it on gallery photos, blog images, footers and anything far down the page.

Do not lazy-load the main image at the top. It is the first thing people see, and delaying it makes the page feel slower, not faster.

Step 6: Preload the main image

The largest image on the first screen, often called the hero or lead image, deserves a head start. A preload hint tells the browser early that this file is important:

<link rel="preload" as="image" href="hero-1200.webp">

Rules for using it well:

1. Only preload one or two images, and only those visible without scrolling. Preloading everything defeats the purpose.
2. Match the file the page will actually use, or the browser downloads two.
3. Where you can, add fetchpriority="high" on the hero <img> itself, which signals its importance to the browser.

Step 7: Set width and height to stop layout shift

When text suddenly jumps down as you read, that is a layout shift, and it usually comes from images that load without reserved space. People tap the wrong button and lose trust in the page.

The fix: always put width and height attributes on your images. Modern browsers use them to hold the right amount of room before the file arrives.

<img src="van.webp" width="1200" height="800" alt="Delivery van parked outside the shop">

Pair that with a rule in your stylesheet so the image still shrinks on small screens:

img { max-width: 100%; height: auto; }

Step 8: Write useful alt text

Alt text is the written description of an image. It helps people using screen readers, appears if the image fails to load, and gives search engines context about what the picture shows. It is not a place to cram keywords.

Good alt text:

• Describes what is in the picture, in a short, natural sentence.
• Includes context that matters, like "Two-person crew replacing a roof in Gori" when it is relevant.
• Leaves out "image of" or "photo of." Screen readers already say it is an image.
• Is empty (alt="") for purely decorative images, so assistive technology skips them.

Compare "plumber" (too vague), "plumber london cheap best plumber" (stuffed) and "Plumber fitting a new combi boiler in a utility room" (just right). Name files sensibly too: new-boiler-install.webp, not IMG_4821.webp.

A simple workflow for owners

Put the steps together and you have a routine that takes about two minutes per photo:

1. Pick the right photo. Crop out dead space first. Less picture often means a smaller, stronger image.
2. Resize to about twice the displayed width.
3. Export as WebP (or AVIF too, if your tool supports it) at quality 75 to 80.
4. Check the size. Over your target? Lower the quality a few points or crop tighter.
5. Name the file descriptively, in lowercase with hyphens.
6. Upload and add alt text, width and height. If your site builder produces several sizes, let it.
7. Mark below-the-fold images as lazy, and leave the hero image eager and preloaded.

Once a year, revisit your five heaviest images. Replacing them is often enough to feel the difference.

Checking your results

Open your page on a phone with wifi switched off and time how long until the main photo appears. Then open your browser's dev tools: the network panel lists every file and its size, so you can sort by size and find the two or three heaviest images.

You can also run your homepage through our free website grader for a plain-English view of how the page performs.

Where this helps beyond speed

Faster pages keep more visitors, and clear images with good alt text also help your search presence, which we cover in local SEO basics. The rest of the essentials sit in our small business website checklist.

If you share downloads, the same rules apply to preview images: size them for the screen, not the print file, as in any printables shop. And if you would rather have a site where this is handled from the start, Belmo Studio can make you a free preview.

Next step

Pick the heaviest image on your homepage today. Resize it, export it as WebP at quality 78 and swap it in. Then grade your website again and compare. One photo is often enough to see the change.