Images affect SEO, performance and accessibility. Optimising them is not just about compressing them: you need to choose format, dimensions, alternative text, loading behaviour and priority according to the role each image plays on the page.
Choose the format according to the content
- AVIF: very efficient for photographs and complex images, when the site’s pipeline supports it well.
- WebP: an excellent compromise between quality, compatibility and file size.
- SVG: ideal for vector logos and icons, but it must be handled safely because it can contain code.
- PNG: useful mainly when you need transparency or lossless graphics.
- JPEG: still valid for photographs when modern formats are not served.
There is no single “best” format: what matters is the end result in terms of quality, weight and compatibility.
Resize images to the space they actually take up
Uploading a 2500 px image to display it at 400 px wastes bandwidth and can slow down loading. WordPress automatically generates several sizes and uses srcset, but it is still worth uploading files with sensible dimensions.
In responsive layouts the browser can pick the most suitable resource based on the available width and the screen density.
Compress without destroying quality
Compression should reduce file size without introducing visible artefacts. You can optimise images before uploading them or use an automatic system on the WordPress/CDN side.
The goal is not the smallest possible file, but a good balance between perceived quality and data transferred.
Alt text: describe the image, do not force keywords in
The alt attribute is first of all for people using assistive technologies, and search engines also use it to understand visual content.
- describe what is relevant in the image;
- keep the text natural and concise;
- do not automatically repeat the page keyword;
- if the image is purely decorative,
alt=""can be the right choice; - for logos and functional images, describe the function or identity when useful.
Lazy loading: yes, but not on the LCP image
Images below the fold can be lazy-loaded, so the browser postpones downloading them until they are needed.
The main image visible straight away, on the other hand, should not be delayed if it is a candidate for Largest Contentful Paint (LCP). In that case it is worth prioritising its loading and making sure it is not hidden by entrance animations.
Width and height help prevent layout shift
Specifying an image’s intrinsic dimensions lets the browser reserve space before the file is downloaded and helps reduce CLS.
WordPress normally handles these attributes automatically when the image is inserted properly from the Media Library.
File name and URL
A meaningful file name is useful mainly for organisation and maintenance. wordpress-performance-dashboard.webp is better than IMG_8734.webp, but it is not worth bulk-renaming images that are already indexed just to add keywords.
Images and Core Web Vitals
Images mainly affect LCP and CLS. That is why, during an audit, I would check:
- weight and dimensions of the hero image;
- modern formats and responsive images;
- lazy loading applied to the LCP image by mistake;
- whether HTML dimensions are present;
- below-the-fold images loaded too early;
- animations that make content invisible at first.
To learn more about the metrics, read the up-to-date guide to Core Web Vitals or the one on how to diagnose a slow WordPress site.
In short
To optimise images, work on format, dimensions, compression, responsive images, alt text, lazy loading and priority. There is no single rule to follow: what counts is the role of the image on the page.
If you want a full technical analysis, see the WordPress performance and optimisation service.