Image Optimisation for Websites Explained

Why Images Slow Down So Many Websites

Is your website slow on mobile? We build and tune fast websites with optimised images, modern formats and clean code. Get a quote.

Images are often the heaviest part of a small business website. A single photo straight off a phone can be several megabytes, larger than all the text, code and styling on the page combined. Upload a dozen of those to a home page gallery and the page crawls on mobile data, visitors leave, and your Core Web Vitals suffer.

The good news is that image optimisation for websites is one of the easiest speed wins. This guide covers choosing the right format, sizing and compressing images, responsive images, lazy loading, and the alt text and file names that help accessibility and search.

Choose the Right Format

JPEG

The long-standing format for photos. Good compression and supported everywhere. Fine for photos when modern formats aren't available.

PNG

Lossless and supports transparency. Great for logos, screenshots and graphics with sharp edges, but usually far too heavy for photos.

WebP

A modern format supported by all major current browsers. WebP photos are typically noticeably smaller than equivalent JPEGs at similar visual quality, and it supports transparency, so it can replace many PNGs too.

AVIF

A newer format that can compress even further than WebP in many cases. Browser support is now broad, but encoding is slower and some tools and platforms don't support it yet.

SVG

A vector format for logos, icons and simple illustrations. SVGs scale to any size without losing quality and are usually tiny. Not suitable for photos.

A practical rule

• Photos: WebP or AVIF, with JPEG as a fallback if needed.
• Logos and icons: SVG where possible, otherwise PNG or WebP.
• Screenshots: PNG or WebP.

Size Images for How They're Displayed

A common mistake is uploading a 4,000-pixel-wide photo to display in a 400-pixel-wide card. The browser downloads the whole thing, then shrinks it.

• Find out the largest size each image will actually be displayed at, including on high-resolution screens.
• Resize images to roughly that size, allowing extra for high-density displays, before uploading.
• Don't upscale small images. They'll look blurry.

Compress Images

Compression reduces file size by removing data the eye barely notices.

• Lossy compression (JPEG, WebP, AVIF) gives big savings with small quality trade-offs. A quality setting in the middle range often looks almost identical to the original.
• Lossless compression removes unnecessary data without changing the image, giving smaller savings.

Tools such as Squoosh, ImageOptim and the export settings in most image editors make compression easy. Many website platforms and plugins can compress images automatically on upload.

Always check the result by eye, especially for images with text, faces or fine detail.

Use Responsive Images

Different devices need different image sizes. A phone doesn't need the same image as a large desktop monitor.

• The HTML srcset and sizes attributes let the browser choose the most suitable image size for each screen.
• Modern frameworks and platforms often handle this for you. For example, the Next.js Image component and WordPress both generate multiple sizes automatically.
• The picture element lets you serve modern formats like AVIF or WebP with a JPEG fallback.

Lazy Load Below-the-Fold Images

Lazy loading delays loading images until the visitor scrolls near them, so the browser can focus on what's visible first.

• Add loading="lazy" to images further down the page, such as galleries and footer logos.
• Don't lazy load the main hero image or anything visible as the page loads. That image is often the Largest Contentful Paint element, and lazy loading it delays it.
• For the main above-the-fold image, consider fetchpriority="high" so the browser loads it early.

Prevent Layout Shift

When images load without reserved space, content jumps around as they appear. That's frustrating for visitors and counts against your Cumulative Layout Shift score.

• Always include width and height attributes, or set an aspect ratio in CSS, so the browser reserves the right space.
• Be careful with ads, embeds and sliders that load late.

Our guide to Core Web Vitals for small business explains LCP, CLS and the other metrics in plain English.

Alt Text: Accessibility First

Alt text describes an image for people using screen readers and appears if an image fails to load. It also helps search engines understand images.

• Describe what's in the image and why it matters on that page: "Electrician installing a new switchboard in a garage".
• Keep it concise, usually a short sentence.
• Don't stuff keywords. Write for people.
• Decorative images that add no information should have empty alt text (alt="") so screen readers skip them.
• Images containing text should include that text in the alt attribute or nearby.

Our guide to website accessibility and WCAG in Australia covers alt text and other accessibility basics.

File Names and Image SEO

• Use descriptive, hyphenated file names: "deck-installation-brisbane.webp", not "IMG_0425.jpg".
• Place images near relevant text, with captions where useful.
• Use original photos where you can. Stock images appear on thousands of sites and add little.
• Include important images in your page content, not only as CSS backgrounds, if you want them to appear in image search.

If you're a tradie, our guide to website photos for tradies covers what to photograph and how to keep job photos web-ready.

Serve Images Efficiently

• Use a CDN (content delivery network) or your platform's image CDN to serve images from servers close to visitors.
• Set long cache times for images that don't change, so returning visitors don't re-download them.
• Remove unused images from pages and sliders. The fastest image is one you don't load.

WordPress Tips

• Use an image optimisation plugin to compress and convert images to WebP on upload, and test performance after installing it.
• Regenerate thumbnails if your theme's image sizes change.
• Avoid heavy slider plugins on the home page.

Our article on affordable WordPress website design and performance covers other WordPress speed basics.

A Quick Image Optimisation Checklist

1. Pick the right format: WebP or AVIF for photos, SVG for logos.
2. Resize to the displayed size.
3. Compress, and check quality by eye.
4. Use responsive images (srcset and sizes).
5. Lazy load below-the-fold images, but not the hero image.
6. Set width and height to prevent layout shift.
7. Write helpful alt text.
8. Use descriptive file names.
9. Serve images through a CDN with long cache times.
10. Test with PageSpeed Insights or Lighthouse after changes.

Frequently Asked Questions

What's the best image format for websites?

For photos, WebP or AVIF usually give the smallest files at good quality. Use SVG for logos and icons where possible.

What size should website images be?

Roughly the largest size they're displayed at, allowing extra for high-resolution screens. Avoid uploading full-size camera photos.

Does image optimisation help SEO?

Yes, indirectly. Faster pages give a better experience and support Core Web Vitals, and alt text and file names help search engines understand images.

Should I lazy load all images?

No. Lazy load images further down the page, but load the main above-the-fold image straight away.