Image Optimisation for Small Business Websites: How to Cut Load Times Without Losing Visual Quality

Images are the single largest source of unnecessary weight on most small business websites. A page that takes three seconds to load on a fibre connection can take twelve seconds on a phone with a weak signal — not because of bad code or a slow server, but because three unresized product photos are each pulling in three megabytes of data. The fix is not complicated, and it does not require specialist software or a developer on call. Understanding a few basic principles will reduce your page weight dramatically and improve both speed and search rankings.

Why images cause more load-time problems than anything else

A typical web page contains far more image data than HTML, CSS, and JavaScript combined. A raw photograph from a modern phone camera is between 4 MB and 12 MB. Web pages that display those photos full-size and uncompressed push dozens of megabytes to every visitor's browser. Google's Core Web Vitals algorithm measures Largest Contentful Paint — the time until the biggest visible element on the page has loaded — and for most small business pages, that element is a hero image or a product photograph. A slow-loading image is a direct hit to both user experience and SEO.

The goal is not to make images look worse — it is to make them no larger than they need to be for the size at which they are actually displayed. A photo that fills a 600-pixel column on a phone screen does not need to be 4000 pixels wide. Serving the right size to each device is the single most effective image optimisation step available to a small business.

Choose the right file format

Three formats cover almost every use case on a small business website. JPEG handles photographs and images with complex colour gradients — use it for product shots, team photos, and background images. PNG handles images that need transparency — logos with clear backgrounds, icons, and UI elements where the background varies. WebP is a modern format supported by all current browsers that delivers file sizes roughly 25 to 35 percent smaller than equivalent JPEG or PNG files with no visible quality difference.

If you are uploading images to a CMS like WordPress, using a plugin that automatically converts uploads to WebP removes the manual step entirely. If you are uploading images to a static site builder, converting to WebP before upload using a free browser-based tool adds less than a minute per image. Switching from JPEG to WebP is one of the fastest ways to reduce image weight without touching a single pixel of visual quality. For logos and icons drawn as vector graphics, always use the SVG file itself rather than exporting it as a PNG — an SVG logo that scales to any resolution weighs a few kilobytes, versus a PNG that weighs several hundred.

Compress before you upload

Compression reduces file size by removing data the human eye cannot distinguish from the original. A JPEG compressed to 80 percent quality is visually indistinguishable from a 100 percent quality file for almost all photographic subjects, while the file is typically one-quarter to one-third the size of the uncompressed version. The practical implication: every image you upload to your website should pass through a compression step before it reaches the server.

Free browser-based compression tools let you set quality with a slider and see the result in real time, side by side with the original. If your website runs WordPress, an image optimisation plugin handles compression automatically on every upload and can retroactively compress your existing image library in bulk. The target for most web images is a file size below 200 KB; for full-width hero images, below 400 KB. These are not absolute rules — a large, complex photograph may need slightly more — but they are useful benchmarks for identifying images that are significantly oversized.

Resize images to the dimensions they will actually be displayed at

Compression reduces file size, but uploading a 4000-pixel-wide image to a column that displays it at 800 pixels wastes data even after compression. The browser downloads the full 4000-pixel image and then scales it down — a process that consumes both data and processing time. The correct approach is to resize the image before upload to the widest size it will ever be displayed, then compress it.

For a full-width desktop hero image, 1600 pixels wide is typically sufficient. For a card or column image, 800 pixels. For a thumbnail, 400 pixels. Most image editing tools — including free options available on every operating system — resize images in under a minute. If your CMS generates multiple sizes automatically, check that the sizes it generates match the sizes your theme actually displays; many sites generate large image variants they never serve, adding storage weight without any benefit to visitors.

Add lazy loading to images below the fold

Lazy loading is a browser feature that delays loading images until the visitor scrolls near them. Images above the fold — the ones visible without scrolling — load immediately. Every image below the fold loads only when the visitor is about to see it, which means a visitor who reads only the first screen of a long page never downloads images they never viewed.

Adding lazy loading in HTML requires one attribute on the img element: loading="lazy". Every modern browser supports it natively. This change alone can cut the initial page weight of content-heavy pages by 50 percent or more. The one exception is the hero image or the first prominent image on a page — do not apply lazy loading to it, because it is above the fold and the browser should prioritise loading it immediately. Many site builders and CMS themes apply lazy loading automatically; check whether yours does before adding it manually.

A practical image checklist before you publish

Before any image goes live on your website: resize it to the largest display size it will be shown at, compress it to under 200 KB for standard images and under 400 KB for hero images, convert to WebP where possible, add descriptive alt text for accessibility and SEO, and check that loading="lazy" is present on images below the fold. This five-step process adds less than two minutes per image and the compounding effect across an entire website is significant: fewer bytes served, faster load times, better Core Web Vitals scores, and stronger organic search performance. Image weight is the highest-return optimisation available to most small business websites because it requires no code changes, no server upgrades, and no specialist knowledge.

If your website is consistently slow despite optimised images, the problem may lie elsewhere — caching configuration, hosting quality, or render-blocking scripts. The team at Fazed Digital audits website performance as part of every project, identifying the specific fixes that will move the needle for your site.