Image SEO: How to optimise your website images

Why image optimisation matters

According to the HTTP Archive, images make up roughly 40 to 50 percent of the total weight of the average web page. That means nearly half of everything your site has to download before it can display properly is made up of images. If those images are not optimised, every page load is slower than it needs to be.

Slow page speed directly correlates with higher bounce rates. Amazon once calculated that every 100 milliseconds of delay cost them one percent in revenue. Google uses page speed as a ranking factor, especially for mobile searches. Large, unoptimised images are one of the most common reasons a site fails its Core Web Vitals assessment.

And there is a second angle: Google Images is a major search engine in its own right. Millions of people search Google Images every day looking for products, inspiration, and information. If your images are not optimised for search, you are missing out on traffic from that channel entirely.

Resize images to the correct dimensions

One of the most common mistakes is uploading a 4000-pixel-wide photo straight from a camera or phone and letting the browser shrink it down. The browser still has to download the full 4000-pixel file before it can display a 600-pixel version. That is a massive waste of bandwidth.

Before uploading an image to your site, resize it so that its largest dimension matches the maximum width it will ever be displayed at. If your content area is 800 pixels wide, there is no need for an image wider than about 1200 pixels for retina displays. For thumbnails or gallery previews, 300 to 600 pixels is usually plenty.

Most image editing tools, including free ones like Canva, Photopea, and even the built-in Photos app on Windows and Mac, have a resize option. Make it a habit to resize images before uploading them to your site. Your page speed will thank you.

Compress images without losing quality

Compression reduces the file size of an image by removing unnecessary data. The key is to compress enough to make a meaningful difference in file size without introducing visible quality loss.

For JPEG files, a quality setting between 70 and 85 percent usually produces an excellent balance between size and quality. For PNG files, tools like TinyPNG or ImageOptim can reduce file size by 50 to 70 percent with no visible difference. For newer formats like WebP and AVIF, the savings are even greater.

There are free tools for every platform. Squoosh.app runs in the browser and lets you compare the compressed version side by side with the original. If you use a CMS like WordPress, plugins like Smush or ShortPixel can compress images automatically as you upload them. For custom sites, tools like imagemin or sharp can be integrated into your build process.

Choose the right file format

Not all image formats are created equal. Each has strengths and weaknesses depending on what you are trying to display.

• JPEG is best for photographs and complex images with lots of colours. It achieves good compression but does not support transparency.
• PNG is better for graphics with text, logos, or screenshots where you need sharp edges and transparency. File sizes tend to be larger than JPEG.
• WebP is a modern format developed by Google that supports both lossy and lossless compression as well as transparency. WebP files are typically 25 to 35 percent smaller than equivalent JPEG or PNG files.
• AVIF is a newer format that can achieve even better compression than WebP, but browser support is still growing.
• SVG is not a photo format. It is a vector format for logos, icons, and illustrations. SVG files are tiny and scale perfectly to any size.

A good rule of thumb is to use JPEG for photos, WebP for everything else where possible, and always use SVG for logos and icons. If you want to cover all bases, serve images in both WebP and a fallback format using picture elements so every browser gets what it supports.

Write descriptive alt text

Alt text (short for alternative text) is the text description of an image that appears when the image cannot be displayed. It is also read aloud by screen readers for visually impaired users, and it is one of the primary signals Google uses to understand what an image is about.

Good alt text describes the content and context of the image in a natural way. Instead of "image001.jpg" or just "shoes," write "black leather running shoes on a wooden floor." Be specific and useful. Do not stuff keywords into alt text descriptions. It does not help with rankings and it makes the experience worse for screen reader users.

Decorative images that do not convey information should have empty alt text (alt="") so that screen readers skip them entirely. If your image contains text, that text should also be present as regular content somewhere on the page, not only inside the image.

Use descriptive file names

Before you upload an image, rename the file to something that describes what it shows. "DSC_4523.jpg" tells Google nothing. "handmade-ceramic-coffee-mug.jpg" tells Google everything it needs to know.

Use hyphens between words, not underscores or spaces. Google reads hyphens as word separators. File names are a small ranking signal, but they are one of the easiest SEO wins available. Take the five seconds it takes to rename your files before uploading them.

This applies to every image on your site, including product photos, blog images, hero banners, and icons. Every image with a descriptive file name is another opportunity to appear in Google Image search results.

Add structured data for images

Structured data (also called schema markup) helps Google understand your content better and can make your images eligible for rich results like the recipe carousel, product listings, or image badges in search.

For product images, adding product schema with image properties helps Google display your product photos directly in search results. For articles, adding image properties to article schema helps Google associate relevant images with your content.

You do not need to be a developer to add structured data. Many CMS platforms and SEO plugins handle it automatically. If your site is custom, tools like Google's Structured Data Markup Helper can generate the code for you.

Lazy load images below the fold

Lazy loading means images are not downloaded until they are about to appear on the screen. Images that are further down the page, or that the user never scrolls to see, are never loaded at all. This can cut initial page weight significantly.

Modern browsers support lazy loading natively through the loading="lazy" attribute on img elements. If your site is built with a modern framework like Next.js, lazy loading may already be enabled by default for images outside the initial viewport.

One exception: the first large image visible on the page, often called the hero image or LCP element, should not be lazy loaded. It needs to load as quickly as possible because it affects your Largest Contentful Paint score, which is one of the Core Web Vitals metrics that Google uses for ranking.

Use a content delivery network for images

A content delivery network (CDN) serves your images from servers located around the world, so a visitor in Australia loads images from a server near Australia rather than from your hosting server in the United States. This reduces load times significantly for international visitors.

Many CDNs also offer automatic image optimisation. Services like Cloudflare Images, imgix, and Cloudinary can resize, compress, and convert images to the optimal format on the fly, based on the device and browser making the request.

If using a full image CDN feels like overkill for your site, at least make sure your hosting provider has a CDN option enabled. Most modern hosting plans include a basic CDN at no extra cost.