Image optimisation for small business websites: complete guide

Image optimisation for small business websites: complete guide

Does your website's homepage take three seconds to load instead of one? The culprit is almost always unoptimised images—and fixing it doesn't require expensive tools or technical skills.

Image optimisation for websites isn't a vanity metric. Faster pages convert more visitors, rank better on Google, and cost less to serve. Yet most small business owners either ignore images entirely or waste money on tools that automate the work without understanding whether the trade-off is worth it. This guide covers what actually matters: which images to optimise, how to do it cheaply, and when to stop optimising and ship.

Why images kill page speed (and what to do about it)

Images typically account for 50–80% of a webpage's total file size. A single unoptimised photo—shot on your phone or pulled from a stock site—can be 4–6 MB. Load that on a visitor's phone over 4G, and you've just added 2–3 seconds to their load time before any other content even renders.

Google's Core Web Vitals now directly affect search rankings. Specifically, Largest Contentful Paint (LCP)—the time it takes for your biggest image or text block to appear—is a ranking signal. A hero image that loads slowly doesn't just frustrate users; it hurts your SEO.

The good news: compress images website and most visitors won't notice a visual difference. A 5 MB photo can become 400–600 KB with the right settings. That's a 10x improvement. And you don't need to buy anything to get started.

Understanding image formats and when to use them

Not all image formats are equal. Each has a use case, and choosing the wrong one wastes bandwidth and speed.

JPG is the old default for photographs. It compresses well and works everywhere, but it's not efficient by modern standards. A photo that takes 800 KB as JPG might be 300 KB as WebP—the same visual quality, one-third the file size.

PNG preserves every pixel (lossless), so it's ideal for graphics with sharp edges or transparency. But it's much larger than JPG for photos. Use PNG only when you need lossless quality or a transparent background.

WebP is the modern standard. It compresses both photographs and graphics more efficiently than JPG or PNG, and it supports transparency and animation. Browser support is now nearly universal (97% of global traffic), making it safe for almost every small business website.

SVG is vector-based—infinitely scalable without pixelation, and tiny file sizes for simple graphics, icons, and logos. Use SVG for anything that doesn't need to be a photograph.

For a typical small business hero image, the workflow is straightforward: shoot or source the photo as JPG → convert to WebP → serve WebP to modern browsers with a JPG fallback for older devices.

The real cost of automation vs. manual control

Automated batch optimisation tools (like TinyPNG, ImageOptim, or Squoosh) are tempting because they compress dozens of images at once. But there's a hidden trade-off: most automation sacrifices a degree of per-image quality control.

When you batch-optimise, you're applying the same compression settings to every image. A hero image—where quality matters most—gets the same aggressive compression as a small thumbnail. Worse, some services use lossy algorithms that strip subtle colour data or blur fine details without you knowing until the site is live.

Manual optimisation takes longer (maybe 5–10 minutes per image instead of 30 seconds), but you see the before and after, adjust quality sliders, and keep control. For a 10-page small business site with 30–50 images, manual work adds perhaps an hour to the project. That's worth it if any of those images are critical to conversion (e.g., product shots, team photos, before-and-afters).

The practical compromise: automate low-stakes images (thumbnails, background textures, icons) and hand-tune the high-stakes ones (hero images, testimonial photos, portfolio work). This gives you speed without the quality gamble.

Batch tools also vary wildly in cost. TinyPNG charges per image (£0.002 per image after 500 free compresses monthly, or £45/year for a subscription). ImageOptim is free. Squoosh is free and browser-based. If you're a freelancer with multiple client sites, those per-image fees add up fast. Free tools like Squoosh or local applications like ImageMagick (for developers) often deliver the same quality at zero cost.

Hero image performance and device-specific optimization

A hero image is the largest single element on most website homepages. Its load time directly affects Largest Contentful Paint—the Google metric that impacts both user experience and search ranking. Optimising it is not optional.

The challenge: a hero image needs to look sharp on a 27-inch desktop monitor and still load in under a second on a phone. A single 4000×2800px image at full quality is 3–5 MB. Shrink it for mobile, and desktop users see blurry pixels.

The solution is responsive image serving: deliver different image sizes to different devices. A mobile phone gets a 750px-wide image; a tablet gets 1200px; a desktop gets 2000px. This can halve or quarter the file size on mobile without affecting desktop sharpness.

Most web builders (including Sitewright's approach to site performance) handle responsive images automatically—you upload once, the platform serves the right size. But you still need to compress the original.

Device-specific optimization goes further: serve WebP to Chrome and Safari (which support it), JPEG to older Internet Explorer users, and AVIF (even smaller) to cutting-edge browsers. This isn't essential for small business websites, but it's a 20–30% bandwidth saving if you implement it. Libraries like next-image (used by modern frameworks) automate this complexity.

Timeline example: an unoptimised 4 MB hero image might load in 3.2 seconds on 4G. The same image, responsive and converted to WebP, loads in 0.8 seconds—a 2.4-second improvement. That difference alone can increase conversion rates by 5–10%, according to Google's testing.

CDN, batch processing, and the cost-benefit math

A Content Delivery Network (CDN) serves your images from servers geographically closer to your visitor. Instead of loading an image from your UK server to a visitor in Australia, the CDN loads it from a Sydney edge server. That can save 500–1000 ms on load time, depending on distance.

But does a CDN replace image compression? No. Compression shrinks the file size; a CDN shrinks the travel time. You need both to see the biggest gains.

The trade-off: CDN services cost money. Cloudflare's free tier includes basic CDN features. Vercel (used by most modern small business website builders) includes a global CDN and automatic image optimization as standard. Traditional hosts like GoDaddy or Hostinger charge extra—often £3–15/month for CDN features.

For a typical small business site with 20–50 images, you'll save more in load time by compressing images first than by paying for a CDN. Image compression is a one-time effort; a CDN is a recurring cost. However, if your audience spans multiple continents (e.g., an e-commerce business with international customers), a CDN pays for itself through faster load times and better SEO in each region.

Batch processing tools don't use CDNs—they're local compression utilities or cloud apps that optimize and download. Combining batch processing (to shrink files) and a CDN (to serve them fast) is the most cost-effective approach for small businesses. You spend 1–2 hours optimising images locally, deploy them to hosting with built-in CDN, and gain most of the speed benefit of expensive solutions at a fraction of the cost.

Industry-specific optimization standards

A photographer's portfolio needs different optimization than a plumber's website, and both differ from a news blog.

Portfolios and creative services (photographers, designers, builders): image quality is non-negotiable. Your hero shots are your sales pitch. Aim for minimal visible compression—WebP at 80–85% quality, responsive sizing, and no aggressive cropping. Expect file sizes of 200–400 KB per image. Load time matters less than fidelity; visitors expect to wait a moment for beautiful, sharp images.

E-commerce and product-heavy sites (florists, bakeries, cleaning services): you need multiple angles and lifestyle shots per product. Optimization is critical—aim for 150–250 KB per image to keep product pages snappy. Use webp conversion aggressively (85% quality is acceptable here). Consider whether you need 30 product images or 8 hero shots instead.

Services and lead-gen sites (plumbers, tutors, consultants): images are supporting elements, not the main event. Compress aggressively—100–150 KB per image. Testimonial photos, team shots, and before-and-afters can be smaller and lower quality without losing trust. Hero images still matter, but you have more room to optimize.

News and media sites: rapid publish cycles mean batch automation becomes essential. Aim for 150–200 KB per article image. Accept slightly lower quality in exchange for speed; readers prioritize freshness and responsiveness over pixel-perfect photos.

For a small business, knowing your category helps you set realistic targets. A florist optimising portfolio images to 100 KB each is over-compressing; a plumber optimising product shots to 500 KB each is under-compressing.

A practical optimization workflow for small teams

You don't need three subscription tools and a developer to optimize images. Here's a five-step process that works for any small business.

Step 1: Inventory your images. Screenshot or list all images on your website. Note which ones are hero images (critical to conversion), which are supporting (testimonials, icons), and which are background texture.

Step 2: Choose a tool. For most small businesses, Squoosh (free, browser-based) or ImageOptim (free, desktop app for Mac) is enough. If you have 100+ images and want batch processing, TinyPNG is worth the cost—it's reliable and not expensive at scale.

Step 3: Set a target file size. Decide: is this a portfolio site (larger images acceptable), a service site (optimize aggressively), or something in between? Aim for 200 KB per image as a baseline; adjust up or down based on your category.

Step 4: Compress in order of impact. Start with hero images (largest file size = biggest load time impact). One optimised hero image often saves more time than optimising 20 small thumbnails.

Step 5: Test before and after. Use Google PageSpeed Insights or WebPageTest to measure load time. You should see a measurable improvement—ideally 1–3 seconds faster on a 4G connection.

If you're starting a new website from scratch, ask your web builder whether image optimization is included. Modern builders (Webflow, Framer, Sitewright) handle responsive sizing and format conversion automatically. Legacy builders (Wix, Squarespace) often require manual optimization or paid add-ons. That's a reason to check before you commit.

When to stop optimizing

There's a point where further optimization yields no practical benefit—a 0.3-second speed improvement that costs £50/month to achieve. Know when to stop.

Your website is "optimized enough" when:

• Hero images load in under one second on 4G
• PageSpeed Insights scores 85+ on mobile
• Core Web Vitals are in the green (LCP under 2.5 seconds)
• Further optimization would cost more time or money than the performance gain justifies

For most small businesses, that means: compress images to 150–300 KB each, use WebP with JPG fallback, and ensure your hosting includes a CDN. You'll spend 1–3 hours upfront, and you're done. Don't buy annual subscriptions or overthink it.

Image optimisation for websites is not about perfection; it's about removing friction. A small business that serves images 20% faster converts more, ranks slightly higher, and costs less to operate—all from a few hours of work with free tools.