English
Magyar
Images account for the largest proportion of the data downloaded from an average website, which is why image optimisation is the simplest and most effective way to speed up loading times. A 5 MB photo taken on a mobile phone in a blog post can, on its own, slow down loading times by several seconds on a mobile network, whilst a well-optimised version of 100–200 KB looks just as good on screen.
In this guide, we’ll walk you through which image formats to use and when, how to prepare images before uploading, what WordPress does automatically, which plugins can help, how to manage lazy loading and the most important (LCP) image, and what to look out for when it comes to image SEO. Most of this advice applies to any website, not just WordPress.
Why does it matter?
- Speed: large images slow down loading times, particularly on mobile devices. Among Google’s Core Web Vitals metrics, Largest Contentful Paint (LCP) – the time taken for the largest visible element to appear – is usually an image on most pages, so image optimisation directly improves this metric.
- Layout stability: images without specified dimensions cause the text to ‘jump’ as they load; this is measured by the Cumulative Layout Shift (CLS) metric.
- Hosting and traffic: smaller images use less storage and generate less traffic, and backups are also smaller.
- SEO: a faster page provides a better user experience, whilst images with well-chosen names and alternative text can also be found via image search.
Which format should you choose?
| Format | What is it for? | Comment |
|---|---|---|
| AVIF | Photos: the smallest file size | Supported by all modern browsers; can be uploaded since WordPress 6.5, provided the server’s image library supports it |
| WebP | Photos and graphics, including those with transparency | It is generally 25–35 per cent smaller than JPEG files and is supported by all modern browsers |
| JPEG | Photos | Universal, but larger than WebP and AVIF |
| PNG | Screenshots, sharp-edged graphics, transparency | Too large for photos; can usually be replaced with WebP |
| SVG | Logos, icons and simple graphics | Vector graphics, sharp and compact regardless of size; for security reasons, it is recommended that you only download them from verified sources |
| GIF | – | A short MP4 or WebM video is also better for animations |
The rule of thumb: use WebP (or AVIF) for photos, SVG for logos, and WebP or PNG for screenshots. If you’re unsure, WebP is a good default choice.
Preparations before uploading
- Resize it. The main content of a blog post is typically 700–1,200 pixels wide; a full-width header image is 1,920 pixels. Never upload a 6,000-pixel camera photo at its original size.
- Compress your images. For most photos, a quality setting of 75–85 per cent (for JPEG or WebP) is visually indistinguishable from the original, whilst the file size is a fraction of the original. A good target size for a content photo is 100–200 KB, and for a large header image, 200–400 KB.
- Cut out what you don’t need: a smaller image area means a smaller file size.
- Remove metadata (EXIF): camera details and GPS coordinates unnecessarily increase the file size and also pose a data privacy risk.
- Use descriptive file names: instead of
budapest-iroda-tárgyaló.webp, usebudapest-iroda-targyalo.webpwithout accents, notIMG_4567.jpg.
Tools: Squoosh (Google’s free tool) in your browser, TinyPNG (we’ve written a separate article about it), GIMP or Photoshop’s ‘Export for Web’ function on a desktop computer, and ImageMagick for batch processing large numbers of images.
What does WordPress do on its own?
- It generates multiple sizes from every uploaded image (thumbnail, medium, large), and using the
srcsetattribute, the browser downloads the size that best suits the display. - It resizes images that are too large: for images wider than 2560 pixels, it uses a resized version (whilst retaining the original).
- Lazy loading: automatically adds the
loading="lazy"attribute to images outside the visible area, so they only load when the visitor scrolls to them. - Prioritising the main image: for the first image – which is likely to be the largest – lazy loading is skipped and it is loaded in advance using the
fetchpriority="high"attribute. - Dimensions: specifies the
widthandheightattributes, which reduces layout shifts. - WebP and AVIF: WordPress supports WebP and, since version 6.5, AVIF as well, provided the server’s image library (Imagick or GD) supports it.
What isn’t automated: compressing uploaded images and converting them to a new format. That’s what plugins are for.
Image optimisation plugins
| Plugin | Features |
|---|---|
| ShortPixel | Cloud-based compression, WebP/AVIF, batch optimisation of existing images; with a free monthly allowance |
| Imagify | Easy to use, three compression levels, WebP/AVIF |
| EWWW Image Optimizer | You can also compress files locally on the server, so there’s no external quota |
| Smush | Free basic version with lossless compression; more advanced features are available for a fee |
Each of these is capable of optimising images that have already been uploaded (batch processing). A few tips:
- Use a plugin, and if your caching plugin also optimises images, disable that feature there.
- Keep the original (most plugins offer this option) so that you can restore it later.
- On shared hosting, local processing of large numbers of images can reach the account’s CPU limit; cloud-based add-ons avoid this, or you can run batch processing in smaller batches during periods of low traffic.
- WebP/AVIF can be served using the
<picture>element or via.htaccessrules on the server; if you’re using a CDN, check which method it supports.
Lazy loading and the LCP metric
Lazy loading speeds up the loading of images below the fold, but you should never use lazy loading for the main image (hero image): it needs to appear as soon as possible, otherwise the LCP will suffer. WordPress handles this well by default, but some themes, page builders or plugins apply lazy loading to every image. Check your PageSpeed Insights report: if you see the warning ‘Largest Contentful Paint image was lazily loaded’, disable lazy loading for the first image.
Further tips on the LCP metric:
- should be as small as possible (WebP or AVIF, appropriate size),
- It should not be loaded as a background image via CSS, but as an
<img>element, - Instead of a slow slider, use a single static image.
CDN
A content delivery network (CDN) serves images from a server close to the visitor, and many CDNs are capable of resizing images on the fly and converting them to WebP/AVIF format. This is useful if you have many visitors coming from further afield, or if you upload a lot of images. Our CDN guide explains how to set it up.
Image SEO and accessibility
- Alternative text (alt): briefly describe what is shown in the image. For visitors using screen readers, this is the content of the image; for search engines, it is the most important signal. For purely decorative images, this field can be left blank.
- File name: descriptive, without accents, punctuated with hyphens.
- Caption and surrounding text: the text next to the image also helps search engines understand the image.
- Image sitemap: SEO plugins usually include images in the sitemap as well.
Verification
- PageSpeed Insights and Lighthouse: these tools highlight LCP images that are too large, in the wrong format or loaded lazily. Our guide to measuring website speed covers this topic.
- The browser’s developer tools (F12 › Network, with the ‘Img’ filter): here you can see the actual sizes of the images being downloaded.
Summary
Resize and compress images before uploading them; use WebP (or AVIF) for photos and SVG for logos; process existing images using an image optimisation plugin; don’t lazy-load the main image; and provide alternative text for every image in your content. Following these steps will significantly reduce the loading time of most websites.
aWh’s WordPress hosting plans run on NVMe SSDs with HTTP/2 and include daily backups, ensuring that fast image loading is accompanied by fast server performance.
Frequently Asked Questions
Which is the best image format for WordPress?
Use WebP or AVIF for photos, SVG for logos and icons, and WebP or PNG for screenshots.
Does compression reduce the quality of images?
Lossy compression is, in theory, a good option, but at a quality level of 75–85 per cent, the difference is typically not visible to the naked eye, whilst the file size will be a fraction of the original. If quality is critical (for example, for a photographer’s portfolio), opt for a lower compression level.
How big should an image be?
A content image should be 100–200 KB, whilst a full-width header image should be around 200–400 KB, with a pixel size appropriate to the display size.
How do I optimise images I’ve already uploaded?
Using a bulk processing feature (Bulk Optimisation) with an image optimisation plugin. Make a backup beforehand, and if you have a large media library, run it during a period of low traffic.
Do all images need alternative text?
Set to ‘yes’ for all content images; for purely decorative images, leave it blank so that the screen reader skips them.
Why does PageSpeed tell me to use a modern image format?
Because your images are in JPEG or PNG format, and would be much smaller in WebP or AVIF. An image optimisation plugin does this automatically.
Can an image optimisation plugin slow down a website?
The service itself won’t, but running the compression on shared hosting can put a strain on your account, particularly when processing locally. In this case, opt for cloud-based compression or run the processing in smaller batches.