Image optimisation is one of the cheapest ways to get a faster website and better SEO. Images are usually the largest files on a page — more often than not, they decide how quickly the page loads and what score you get in Core Web Vitals. A well-prepared image uses the right format (WebP/AVIF), matching dimensions, a sensible file size, a descriptive alt attribute, and does not block rendering. Below you will find a concrete list of steps you can implement yourself.
In short
Image optimisation for SEO means reducing image file size and describing images correctly so that the page loads fast (Core Web Vitals) and is understandable to Google. In practice: use modern formats (WebP/AVIF), compression and the right dimensions, add a descriptive alt attribute and a sensible file name, and enable lazy loading and responsive sizes. Lightweight, well-described images improve speed, accessibility and visibility in image search.
Why image optimisation affects your Google rankings
Google measures the real loading speed of a page through the Core Web Vitals metrics. The most important one for images is LCP (Largest Contentful Paint) — the time it takes for the largest element visible on screen to appear. Very often that element is precisely a large header image or a product photo. If it weighs too much or loads too slowly, the whole page gets a worse score.
The second reason is simpler: nobody waits for a slow page to load. The user closes the tab and goes back to the search results, and Google sees that. Lightweight, fast-loading images improve both the human experience and the signals sent to the search engine.
Choose the right format: WebP or AVIF
The old formats (JPEG, PNG, GIF) still work, but they are heavier than their modern counterparts. Today's standards are:
- WebP — a good compromise: a much smaller file than JPEG at similar quality, supported by all current browsers.
- AVIF — even better compression than WebP, ideal for large photos and product galleries.
- JPEG — a sensible fallback for photographic images when, for whatever reason, you are not using WebP/AVIF.
- PNG — only for graphics with transparency or sharp edges (logos, icons, screenshots).
- SVG — for logos and simple icons: it scales without quality loss and weighs just a few kilobytes.
In practice: export photos to WebP or AVIF and keep logos and icons in SVG. Many systems (including WordPress with the right plugin) can serve WebP automatically.
Match the dimensions to the space on the page
The most common mistake is uploading a 4000 px wide image into a slot that is 600 px wide on the page. The browser will shrink it anyway, but first it has to download the entire heavy file. Before you upload an image:
- check how wide the container on the page actually is (e.g. 800 px for an image in the content),
- prepare a version at that width plus a margin for Retina screens (usually 2×),
- use the
srcset/sizesattributes for different resolutions, so a phone does not download the desktop version.
The same applies to product photos in a store — thumbnails in a listing do not need the full resolution of the product page.
Cut the file size with compression
The lighter the image, the faster the page loads. Free tools such as TinyPNG, Squoosh or image compression plugins for WordPress are all you need. Good, slightly lossy settings can halve a file's size without any visible loss of quality. The rule is simple: judge quality with your eyes, not just by the number of kilobytes — aim for the smallest file that still looks good.
File name and the alt attribute
The file name should describe what is in the image and contain a keyword — e.g. black-running-shoes.webp instead of IMG_2841.webp. No special characters or spaces (use hyphens).
The alt attribute is a text description of the graphic in the HTML code. It serves three functions: it helps people using screen readers, it is displayed when the image fails to load, and it helps Google understand the content of the image (including in Google Images). Write a short, natural description of what is actually visible — without stuffing keywords in by force.
Lazy loading and loading order
Not all images need to load immediately. Lazy loading (the loading="lazy" attribute) means images outside the viewport only load when the user scrolls to them. One important exception: the image responsible for LCP (usually the first large image at the top) should load with priority — give it loading="eager" or fetchpriority="high" and do not include it in lazy loading. That way the most important element appears quickly and the rest does not weigh down the page's start.
Product images in an e-commerce store
In a store, images play a double role: they sell the product and they affect performance. Things to keep in mind:
- Consistent size and framing — product photos on a white background look tidy and load faster.
- Listing vs product page — serve thumbnails in the listing and keep the full resolution on the product page.
- Structured data — it is worth referencing the product image in the Product schema (the
imagefield) so it appears in rich results. - Image sitemap — adding images to the XML sitemap makes it easier for Google to index your graphics, which matters especially in stores with a large number of products.
A store slowed down by heavy images is genuinely lost sales. If you want to estimate the scale of the problem, take a look at our lost sales calculator.
How to check whether images are slowing down your site
The simplest test is PageSpeed Insights — it shows your Core Web Vitals score and directly points to images that need fixing (too large, in an old format, missing dimensions). In the diagnostics section you will find the specific files and the potential savings in kilobytes. It is a good roadmap for where to start — the biggest gains usually come from fixing the few heaviest images.
Frequently asked questions
Is WebP better than JPEG for SEO?
Yes, almost always in practice. WebP produces a smaller file at similar quality, which speeds up loading and improves LCP. The format itself is not a ranking factor, but the speed it enables certainly is.
How much should an image on a website weigh?
There is no single number, because it depends on the image's dimensions and role. The practical rule: aim for the smallest possible file that still looks good. Images in the content can usually be brought down to a few dozen kilobytes without any visible loss of quality.
Will lazy loading hurt my SEO?
No, as long as you do not apply it to the image responsible for LCP. Lazy loading images below the first screen is recommended. The header image, on the other hand, should load with priority so as not to worsen LCP.
Do I need to fill in the alt attribute for every image?
Yes, the alt attribute should be filled in for every image that carries content — it is an accessibility standard and helps Google understand the graphic. Purely decorative graphics (e.g. backgrounds) can have an empty alt so that screen readers skip them.
Does image optimisation require programming knowledge?
The basics do not — compression, the right format and descriptive file names are within anyone's reach. The more advanced parts (srcset, fetchpriority, automatic WebP serving) are usually done at the template or plugin level, and that is where it is sometimes worth getting help.
Want a fast website that ranks well?
At the SEMTAK Marketing Agency we handle the technical side of performance and SEO — from image formats to Core Web Vitals:
- SEO audit — we will check what is slowing your site down and blocking its visibility.
- Website SEO — more traffic from Google built on healthy technical foundations.
- Online store SEO — SEO for e-commerce, where speed translates into sales.
- WooCommerce store development — fast stores optimised from day one.
For more practical advice, see the posts: how to speed up a WooCommerce store and WooCommerce store SEO — where to start.
