Optimising images for your WordPress website is really important for user experience, speed and SEO. So it’ll help maintain your awesome brand reputation when people land on your site and get you in front of more potential clients. In this guide I’m going to walk you through WordPress image optimisation best practices to help you get your website loading faster without compromising on picture quality.
Estimated reading time: 5 minutes
Why WordPress image optimisation matters
99% of the slow loading websites that I see are due to poorly optimised images. Because Google takes page loading times into account when it ranks websites, non-optimised images could make you less likely to be found via search engines.
Slow loading websites also tend to have higher bounce rates, so that potential clients leave before they even see your content.
According to Neil Patel, most readers will leave a web page if it doesn’t load in under 4 seconds, and the length of time people spend on a web page is a metric that Google uses in deciding who makes the cut in it’s search results.
When you optimise your photos, you:
- improve your website’s loading speeds
- give users a better experience
- get your website ranking higher in search results
How image optimisation impacts SEO
Like I said earlier, search engines prioritise fast loading websites. This is because they want to provide the best possible experience to their searchers. A long list of search results linking to websites taking more than 4 seconds to load does not do that. So if your images take too long to load, your site loads slower sinking your rankings.
Best image formats for WordPress image optimisation
Choosing the right format for your images is important to getting the balance right between image quality and size.
WebP – The best choice for WordPress image optimisation
- WebP is a relatively new format developed by Google
- It provides high quality images at much smaller file sizes than JPEG or PNG
- It supports both typed of compression (explained later) so you can get the right balance between quality and file size
JPG (jpeg) – good for photos
- Supports lossy compression and works well for photos – this is likely the format your brand photographer will send your images in
- Files sizes are smaller than PNG but, depending on how aggressively you compress them you can see some loss of quality
PNG – great for detailed graphics
- Supports lossless compression so images are higher quality BUT file sizes are bigger that WebP and JPEG
- Good for logos and images where you need transparency
Where possible use the WebP format. Otherwise use JPEG for photos and PNG for graphics or designs where you need transparency.
Lossy vs. Lossless compression: which one do you need?
Compression is an important part of WordPress image optimisation. In a nutshell it takes any unneeded information from your images. How much information is removed and whether quality is impacted depends on which method you choose.
Lossless compression
- Keeps all image data and doesn’t reduce image quality
- Good for detailed images and graphics
- File sizes are bigger than lossy compression
Formats supporting lossless compression: PNG, WebP
Lossy compression
- Gets rid of unnecessary image data to make the file size smaller
- Great for photos and images for the web where some quality loss is acceptable
Formats supporting lossy compression: JPEG, WebP
How to optimise images for your WordPress website
Resize to the right dimensions
This is the most significant step of WordPress image optimisation. If you resize your images before you upload them to your site you’ll also safe file space on your hosting.
WordPress recommends the following image sizes:
- Images to span the width of the screen: 1920px width
- Blog posts images: 1200px width (this will depend on your theme)
- Logos: this also depends on your theme but no bigger than 500px width
Save in an optimal format
Use WebP if possible. Sites like Canva don’t allow you to download in WebP but you can convert images using a conversion tool like WebPConverter.
If WebP isn’t an option, use JPEG for pictures and PNG for graphics that include some transparency.
Compress your images
This is the final part of the image optimisation puzzle. This gets rid of any unnecessary info included in your image files.
Use a tool such as:
- CompressJPEG – online tool for PNG and JPEG compression and also has a WebP conversion tool
- WP Smush – WordPress plugin that compresses images as they’re uploaded to your site or in bulk
- ShortPixel – WordPress plugin that compresses images as they’re uploaded to your site or in bulk and converts to WebP
Switch on lazy loading
When you lazy load images, the images are only loaded when they’re on screen. This means that images at the bottom of the page don’t stop images higher up the page from loading.
As of WordPress 5.5 and later, images are set to lazy load by default, but if you’d like more control over it you can use an optimisation plugin like Lazy Load by WP Rocket.
Verdict: Best practices for WordPress image optimisation
To keep your website running quickly and smoothly follow these steps for your images:
- Use WebP image format where possible
- Resize your image dimensions to the size needed on your site
- Compress images before you upload them to your site – saving hosting server space and increasing web speed
- Use lazy loading
By using these WordPress image optimisation strategies you’ll increase your website speed and improve user experience and your website visibility in the process.
Want expert help with your WordPress website? Get in touch to see how I can help
You may also enjoy:
What is WordPress? Why use it for your business website