3 Tips to Optimise Images for Web and Mobile Performance

Updated October 2026. We have refreshed this post with today’s image formats, Google’s Core Web Vitals and the tools we use for client websites.

Did you know the loading time of your website has a real impact on your bottom line? We regularly see businesses slow their site down with large, unnecessary images. Your visitors care more about speed than you might think. Research summarised by HubSpot shows conversion rates drop with every extra second a page takes to load. Most of your visitors are on a phone, often on a patchy mobile connection.

Images are usually the heaviest thing on a page, so they are the first place to look when a website feels slow.

On most small business websites, images are the biggest contributor to page weight, and the easiest thing to fix.

Why image optimisation matters for SEO

Google measures how your pages perform for real visitors using its Core Web Vitals. Images affect two of the three directly:

• Largest Contentful Paint (LCP): how long the main content takes to appear. On most pages that is a hero image or banner. Google considers 2.5 seconds or less “good”.
• Cumulative Layout Shift (CLS): whether the page jumps around while it loads. Images without set dimensions push text down as they arrive, which is frustrating on a phone.

The third, Interaction to Next Paint, measures how quickly the page responds to a tap or click. That is mostly about scripts rather than images, but a lighter page helps there too.

What exactly is image optimisation?

Optimising an image means making the file as small as possible without a visible loss in quality. Your website still needs images. They are an important part of the user experience. The goal is balance: the right image, at the right size, in the right format.

Left is the original, and the right has been optimised for web

Compression and resizing are not the same thing

Resizing changes an image’s dimensions, so a 4000 pixel wide photo from your phone becomes 1600 pixels wide to suit a full-width banner. Compressing reduces the file size of the image you have, for example from 2.5MB down to under 150KB. You almost always want both.

So now you know why it matters, here are our top three tips.

1. Ask what each image is for

Look at your website and think about the purpose behind each image. Does it help a visitor understand your product or service, or build trust in your business? Photos of your actual work, team and premises nearly always earn their place. Generic stock photos and large decorative backgrounds often don’t.

Sometimes an icon, an illustration (SVG) or simply a block of colour does the same job at a fraction of the weight. If an image doesn’t help you achieve anything, remove it.

Optimised image of a puppy, strategically placed

2. Use the right format

When we first wrote this post the choice was JPEG, PNG or GIF. Today there are better options, and every modern browser supports them:

• WebP: our default for photos and most website images. A WebP file is usually noticeably smaller than the equivalent JPEG at the same visual quality.
• AVIF: newer and often smaller again, particularly for large photos. It is worth using where your website platform supports it.
• JPEG: still a safe fallback for photographs.
• PNG: best kept for simple graphics that need a transparent background, such as some logos. Avoid it for photos because the files are large.
• SVG: ideal for logos and icons. These are vector files, so they stay sharp at any size and are usually tiny.

Animated GIFs are very heavy. A short muted video, or no animation at all, is almost always the better choice.

One caution: a format conversion is not automatically smaller. A well-compressed JPEG can occasionally beat its WebP version, so check the file size rather than assuming.

3. Resize and compress before you upload, then let your website do the rest

Get into the habit of resizing and compressing images before they reach your website. A good rule of thumb is to keep most images under 150KB, and large full-width banners under about 300KB.

Tools we like:

• Squoosh, a free browser tool from Google that resizes and converts to WebP or AVIF, with a side-by-side quality preview.
• TinyPNG, which compresses PNG, JPEG and WebP images by simply dragging them in.

On a WordPress website, a few settings then do a lot of the work for you:

• Responsive images: WordPress automatically creates several sizes of each image you upload, so phones download a smaller version than desktops. Upload a sensibly sized original and let it do its job.
• Lazy loading: images further down the page load only when a visitor scrolls towards them. WordPress adds browser-level lazy loading by default. The exception is the main image at the top of the page, which should load straight away so it doesn’t hurt your LCP.
• Width and height: make sure images have their dimensions set, so the browser reserves the space and the page doesn’t jump around.
• Alt text: describe each meaningful image in a few words. It helps visitors using screen readers, and it helps Google understand the image.

Conclusion

Every second counts. Image optimisation is one of the simplest ways to make your website faster, improve your Core Web Vitals and give visitors a better experience, which in turn supports your search rankings. Only use images where they add something, choose a modern format, and always resize and compress before uploading.

You can check how your own pages perform for free with Google’s PageSpeed Insights. Speed is also one of the trends in our guide to local SEO trends. If your website is slow or the results are hard to make sense of, our WordPress web design team can help.