A lot of business owners arrive at the same point. Their website looks good, the branding is solid, the photography is strong, yet the site still feels sluggish on mobile. Pages hesitate before loading, product images pop in late, and Google doesn’t seem to reward the effort that went into the design.

In most small business sites, the problem isn’t the copy or the layout. It’s the images. They’re often uploaded straight from a phone, a camera, Canva, or a stock library, then left for the browser to wrestle with. If you want to know how to optimise images for websites in a way that improves speed, SEO, and user experience, the fix is usually straightforward.

At agency level, the process is rarely complicated. It’s a repeatable workflow. Pick the right format. Resize before upload. Compress properly. Serve responsive versions. Then test the result and tighten delivery with caching and a CDN. That’s the process we use for UK small business websites, especially WordPress builds for Dorset firms that need a site to load quickly without sacrificing image quality.

Why Fast Images Matter for Your UK Business

A slow page loses people before your content gets a chance to do its job. That matters even more when someone is finding your business on mobile, often with a weak signal, limited patience, and several competitor tabs open.

For many UK business sites, images are the main issue. Unoptimised images account for 50 to 70% of page weight on average eCommerce sites, according to a 2024 Statista survey cited here. The same reference notes that this leads to 24% higher bounce rates on mobile, based on Google’s 2023 UK Mobile Speed Report.

That’s the practical reason image optimisation matters. It’s not about shaving off tiny technical details for the sake of it. It’s about reducing the chances that a visitor leaves before they’ve seen your service list, product range, opening hours, or enquiry form.

What this looks like in the real world

A common pattern looks like this:

• A homepage banner is oversized. It may look fine on desktop, but mobile users download far more image data than they need.
• Gallery images are uploaded at original export size. The browser has to scale them down after download, which wastes bandwidth.
• Logos and graphics use the wrong format. A transparent logo saved badly can end up much heavier than it needs to be.
• Blog images are added with no compression pass. One or two large uploads can slow every article template.

Practical rule: If a page feels slow, inspect the images first. They’re often carrying most of the weight.

Why SMEs feel this more than bigger brands

Smaller businesses usually have less margin for performance mistakes. Large retailers can absorb some inefficiency with bigger development teams and deeper infrastructure. A local retailer, trades business, clinic, or professional service firm usually can’t.

Fast images help in three ways at once:

Area	Why it matters
User experience	Visitors can browse without delay or frustration
SEO	Faster pages support stronger page experience signals
Conversions	People are more likely to stay long enough to enquire or buy

For a UK SME, this is one of the clearest technical wins available. Good image handling improves load speed without changing your offer, rewriting your content, or redesigning the whole site.

Choosing the Right Image Format and Dimensions

Most image problems start before compression. If you choose the wrong format, or upload an image at far larger dimensions than the design needs, you’re already making the browser do extra work.

The format decision doesn’t need to be complicated. You only need a clear rule for what each file type is good at, and when to avoid it.

Which format fits which job

Here’s the practical version we use.

Format	Use it for	Avoid it for
JPEG	Standard photographs where you need broad compatibility	Logos, graphics with transparency
PNG	Logos, icons, graphics that need transparency	Large photographic images
WebP	Default choice for most web photos and many graphics	Situations where a fallback hasn’t been considered
AVIF	Cases where advanced compression is worth the extra implementation care	Quick uploads where you want the simplest workflow

For most UK business websites, WebP is the default choice for photos. According to this WebP guide for UK-focused optimisation, WebP can reduce file sizes by 25 to 35% compared to JPEG while preserving visual quality. The same source notes that WebP was developed by Google in 2010 and is supported by 96% of UK browsers as of 2025.

That makes WebP the sensible everyday option for:

• Hero images
• Team photos
• Blog feature images
• Product photography
• Service page visuals

PNG still has a proper role. If your logo needs transparency, PNG often remains the right file type unless you can use SVG. JPEG still has a place for legacy workflows and simpler exports, but for most website photography, WebP is usually the better delivery format.

What works and what usually doesn’t

The wrong approach is using one format for everything.

• Using PNG for all photos usually leads to bloated files.
• Uploading only JPEGs because that’s what came out of the camera leaves easy performance gains on the table.
• Using WebP with no thought for fallbacks can create avoidable compatibility issues in edge cases.

A format isn’t “good” or “bad” on its own. It’s only right or wrong for the job you’re asking it to do.

Resize before you upload

This is the mistake that causes the most waste. If an image is only ever going to display at around 1200px wide, uploading a version that’s several times larger gives you no visual benefit on the page. It just increases file size and slows delivery.

A simple working rule:

• Hero images should be prepared to suit the layout width
• Content images should match the column width they’ll occupy
• Product thumbnails should be exported for the grid, not at original camera size
• Staff headshots don’t need huge dimensions if they display small

For many small business sites, a 1200px max width is a sensible starting point for large page imagery, especially when you’re preparing standard content visuals for desktop layouts. The exact size will depend on the design, but the principle doesn’t change. Export to the size you need.

A quick decision checklist

Before uploading any image, ask:

1. Is this a photo, a logo, or a graphic?
2. Does it need transparency?
3. What is the largest size it will display on the site?
4. Can I export this as WebP for the web version?
5. Do I have a fallback if the implementation needs one?

If you answer those five questions before the file reaches WordPress, most image performance issues disappear before they start.

Your Actionable Guide to Image Compression

Compression is where image files become website-ready. You’ve chosen the right format and resized the image to fit the layout. Now you need to reduce file size without making the image look damaged.

That balance matters. Over-compress a product image and it starts to look cheap. Skip compression completely and the page gets dragged down by unnecessary weight.

Lossless and lossy in plain English

There are two main types of compression.

• Lossless compression reduces file size without removing visible image data. It’s useful when you want to preserve every detail exactly.
• Lossy compression removes some data to shrink the file further. Done well, the change is barely noticeable on screen.

For most website photography, lossy compression is the practical choice. It gives you a much better trade-off between speed and visual quality. For logos and certain graphics, lossless can still make sense, especially when clarity matters more than aggressive savings.

The workflow we use

This is the repeatable process that works for most UK SME websites.

1. Start with the original file

   Keep your untouched master separately. Never make the website export your only version.

2. Resize to display dimensions

   For many standard page visuals, that means preparing the image at around 1200px max width if that suits the layout. This is part of the Adobe UK image optimisation workflow.

3. Apply lossy compression at 75 to 85% quality

   That same Adobe guidance recommends 75 to 85% quality as a practical range for web images. It’s a good balance for most service pages, ecommerce photography, and blog headers.

4. Convert to WebP

   If you’re comfortable with command line tools, the reference workflow includes:

   cwebp -q 80 input.jpg -o output.webp

5. Check the image with your eyes

   Zoom in. Look at edges, text in graphics, skin tones, and product detail. If it looks rough, back off the compression slightly.

6. Upload the optimised version, not the raw export

   Don’t let WordPress be the first place the file gets prepared.

Easy tools for non-technical teams

Most business owners don’t need command line tools. These are the tools that are usually enough:

• TinyPNG for quick browser-based compression
• ImageOptim for desktop file cleanup
• Photoshop Save for Web if you already use Adobe tools
• ImageMagick if you want batch processing and more control

What matters isn’t the brand of tool. It’s the habit. Every image should go through a preparation step before upload.

If a team says they “optimise images in WordPress”, that often means they’re fixing files after the problem already exists. The cleaner method is to prepare images before they ever hit the media library.

What the numbers tell you

The Adobe reference above states that this workflow, resize first, compress at the right quality level, then convert to WebP, has been shown to improve Largest Contentful Paint by 22% for UK eCommerce sites when implemented properly through that process.

That matters because large above-the-fold images are often the element that delays LCP. When the hero banner, featured product image, or lead visual becomes lighter, the page usually feels faster immediately.

A good visual explainer helps if you want to see the process in motion:

A compression checklist you can reuse

• Rename the file clearly before upload
• Resize first, not after
• Use WebP for web photography
• Compress at a sensible quality setting
• Review for visible artefacts
• Keep the original master safely stored
• Upload only the optimised file

If you follow that list consistently, image optimisation stops being a messy clean-up task and becomes a normal part of publishing.

Implementing Images for SEO and Responsive Design

A well-prepared image file can still be wasted by poor implementation. This is a common failing for many sites. The image itself may be compressed correctly, but it’s inserted in a way that still forces mobile users to download more than they need, or gives search engines very little context.

Three parts matter most here. Responsive delivery, SEO and accessibility markup, and lazy loading.

Serve the right size with srcset

A mobile browser shouldn’t have to download the same large image you prepared for a wide desktop layout. That’s what srcset and sizes are for. They let the browser choose the most suitable image based on screen size and resolution.

A simple example:

<img 
  src="team-photo-800.webp" 
  srcset="team-photo-400.webp 400w, team-photo-800.webp 800w, team-photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Design team meeting with printed website mock-ups">

This approach is one of the biggest practical gains for mobile performance. It stops smaller devices pulling down oversized assets they’ll never display at full width.

Use filenames and alt text properly

Image SEO is often mishandled because people either ignore it or stuff keywords into every field. Neither helps.

Use filenames that describe the image plainly. dorset-kitchen-showroom.webp is useful. IMG_4827-final-new-2.webp isn’t.

Then write alt text for people first. The alt attribute should explain what the image shows in context.

Good:

<img src="solicitor-office-weymouth.webp" alt="Meeting room in a Weymouth solicitor's office">

Poor:

<img src="office.webp" alt="SEO solicitor Weymouth Dorset best lawyer office">

This matters for accessibility as well as search visibility. If you want a solid overview of how search professionals think about practical optimisation work beyond just keywords, this piece on choosing an SEO consultant is a useful read.

For businesses tightening overall organic performance, image handling should sit alongside broader on-page work such as internal linking, technical clean-up, and content structure. That’s why it often makes sense to review it as part of a wider search engine optimisation service, rather than treating it as an isolated task.

Good alt text describes the image’s purpose on the page. It isn’t a dumping ground for search terms.

Add lazy loading where it makes sense

Not every image needs to load immediately. If an image sits lower down the page, the browser can defer it until the visitor scrolls near it.

That’s done with:

<img src="gallery-image.webp" alt="Restaurant interior with sea view" loading="lazy">

Lazy loading usually works well for:

• Blog images further down the article
• Product gallery images below the fold
• Team or testimonial sections
• Large content blocks on long landing pages

It’s less suitable for the main hero image because that image often contributes directly to what the user sees first.

A practical implementation stack

When adding images to a page, use this order:

1. Choose the file prepared for the web
2. Insert responsive versions with srcset
3. Write a descriptive filename
4. Add meaningful alt text
5. Apply lazy loading to non-critical images
6. Check the result on mobile, not just desktop

That combination does more than reduce weight. It helps the browser make better decisions and helps search engines understand the image’s role on the page.

Optimising Images Natively in WordPress

WordPress makes image publishing easy, which is helpful, but it also makes it easy to publish poor image files at scale. That’s why a clean setup matters. If the media workflow is messy, the site gradually fills with oversized uploads, duplicate crops, and inconsistent formats.

The good news is that WordPress already gives you part of the solution. The rest usually comes from a sensible plugin setup and a bit of discipline before upload.

Start with the built-in media behaviour

WordPress creates multiple image sizes automatically. That’s useful, but only if the theme uses them properly. If the site is outputting full-size uploads everywhere, the generated sizes don’t help much.

Check these basics first:

• Your theme should use native WordPress image functions rather than hard-coded full-size files
• Default image sizes should match the layout needs
• Editors should understand which size to insert where
• Old uploads should be reviewed if the site has been running for years

A lot of WordPress image problems aren’t caused by the CMS itself. They’re caused by a site build that doesn’t fully use what WordPress already provides.

Add a proper optimisation plugin

For most SMEs, a plugin handles the repetitive part well. The goal isn’t to replace good image preparation. It’s to automate compression, conversion, and delivery after sensible uploads.

The most common options include:

• ShortPixel
• Imagify
• Smush
• EWWW Image Optimizer

A server-side workflow using a plugin like ShortPixel is particularly useful because it can compress images automatically and support modern formats. According to this WordPress image optimisation reference, 62% of UK SMEs overlook responsive images in WordPress, which increases mobile abandonment by 25%. The same source says a pipeline using ShortPixel, plus properly configured srcset and sizes, can cut image sizes by 60 to 70% and halve the data loaded on mobile devices.

That’s the difference between having a plugin installed and having it configured properly.

The settings that actually matter

When setting up a WordPress image plugin, focus on these options:

• Automatic compression on upload so new files aren’t missed
• WebP generation for supported browsers
• Bulk optimisation for the existing media library
• Responsive image support where the plugin offers it
• Metadata removal if the plugin includes that option
• Backup originals if you want a safe rollback path

Don’t turn on every feature blindly. Some settings are useful, some are unnecessary, and some depend on the hosting stack or theme behaviour.

A plugin can automate compression. It can’t fix a poor upload habit.

What we typically recommend for client sites

For WordPress businesses that publish regularly, the practical mix is:

Task	Manual or automated
Resize before upload	Manual
Choose the right format	Manual
Compress new uploads	Automated
Generate WebP files	Automated
Serve responsive sizes	Theme and WordPress native behaviour
Bulk tidy old media	Automated with review

If you want a broader view of how plugins affect search performance, this WordPress SEO guide is a useful companion read. For plugin choices more generally, including tools that support performance and site management, there’s also this overview of top WordPress plugins.

I’d also treat DesignStack as one implementation option for businesses that want this image compression and responsive setup handled during a WordPress build or performance tidy-up, rather than managing plugin rules and media workflows in-house.

Validating Your Work and Delivering Images with a CDN

If you don’t test the result, you’re guessing. Image optimisation should lead to a measurable improvement in how quickly pages render, especially on mobile and on image-heavy templates.

Two tools are enough for most businesses to get a clear read.

Check speed before and after

Use:

• Google PageSpeed Insights
• GTmetrix

Run the same key pages before making changes and after. Focus on pages that carry the most visual weight, such as:

• Homepage
• Top service page
• Main category page
• A representative blog post
• A product page if you run ecommerce

Look at whether large image warnings have reduced, whether the total page weight has dropped, and whether the page feels quicker during real loading.

Watch the right indicators

You don’t need to obsess over every graph. Pay attention to the metrics that usually reveal image issues:

Metric	Why it matters
Largest Contentful Paint	Often affected by big hero or featured images
Total page size	Shows whether image weight is still too high
Requests	Can reveal image overload on gallery-heavy pages

If the score improves but the page still feels clumsy on a phone, test the site manually. Automated tools are useful, but they don’t replace opening the site on a mobile device and watching how the images behave.

Add a CDN for delivery

A Content Delivery Network, or CDN, stores copies of your files on distributed servers so visitors download assets from a location closer to them. For image-heavy sites, that usually reduces delay and makes delivery more consistent.

Services like Cloudflare are common because setup is relatively straightforward and the CDN benefit applies site-wide, not just to one page.

This helps most when:

• You serve visitors across different regions
• Your hosting isn’t geographically close to every visitor
• You have media-rich pages
• You want more stable delivery under traffic spikes

A CDN doesn’t replace image optimisation. It improves the delivery of already-optimised files. If you send a bloated image through a CDN, it’s still bloated. It just arrives from a nearer server.

Test first. Optimise second. Then use a CDN to deliver the lighter files more efficiently.

If you’re reviewing broader technical performance issues at the same time, it helps to include image delivery inside a proper SEO audit so the page speed work, template issues, and crawl considerations are looked at together.

Frequently Asked Questions About Image Optimisation

What about SVG images and when should I use them

Use SVG for logos, icons, and simple illustrations. SVG is vector-based, so it scales cleanly without turning blurry on large screens or high-resolution devices. For brand marks, navigation icons, and simple graphic shapes, it’s often a better option than PNG.

Avoid SVG for standard photography. It isn’t built for that job.

Will heavy compression ruin portfolio or product photos

It can if you push it too far. The goal isn’t maximum compression. It’s sensible compression.

The safe method is simple:

• Compress the image
• Compare it with the original at normal viewing size
• Check fine detail, edges, and colour gradients
• Keep the original file stored elsewhere

For most website use, a well-compressed image still looks excellent on screen. Problems usually happen when teams compress repeatedly, export from an already degraded file, or try to rescue an oversized original too late in the process.

Can I just install a WordPress plugin and forget about it

Not completely. A plugin can automate a lot, but it can’t make perfect decisions about every image’s purpose in the design.

You still need to:

• Upload sensible dimensions
• Choose the right format
• Use clear filenames
• Check how the image appears on the page

Think of the plugin as the assistant, not the strategy.

Should every image on my website be lazy-loaded

No. Above-the-fold images usually shouldn’t be deferred if they’re part of the first visible screen. Lazy loading is most useful for images further down the page.

If you lazy-load everything without thinking, you can slow the visual start of the page instead of improving it.

What’s the quickest improvement I can make today

Resize your biggest homepage and service page images before upload, then compress them properly and replace the originals on the live site. That usually gives the fastest visible improvement with the least disruption.

---

If your website feels heavier than it should, DesignStack can help you tighten the image workflow as part of a wider site performance review, WordPress build, or SEO-focused refresh. See what the team offers at DesignStack.