How to optimise images in WordPress for speed and SEO
Photo by Héctor J. Rivas on Unsplash
Why to optimise images in WordPress, when to do it and how to do it.
INTRO
You’ve probably been told that it’s extremely important to engage your readers with visuals.
You’ve also been told it’s incredibly important to make your site as fast as possible or those visitors will never find you.
But images are big, so isn’t it a sort of a catch-22? You need images but they’ll slow down your site!
Well, you can fairly easily make those same images much smaller without loosing much quality; welcome to the sweet spot in the world of image optimisation.
A good image optimization workflow is one of the easiest things to put in place, yet a lot of website owners overlook it completely.
Here’s all you need to know about it.
Too long? Skip to the tips.
NOTE: Don’t worry about technical sounding terms like lossy etc. I’ll show you tools that’ll handle all of that so you don’t have to worry about the details.
Why it’s important to optimise images in WordPress
One word: Speed!
Speed is the number one reason to optimise any part of your website.
It’s important for the search engines and essential for your visitors.
That said, there are a lot of other reasons to optimise every image on every page of your WordPress website:
- Improved page loading speedDepending on your source, as of May 2018, images make up on average 54% of a total web page’s weight. Or 62%. Or maybe it’s 63% or 70%. Who really knows? Whatever it is, it’s a lot.And images are big. There is probably no other optimisation you can do so easily that will reap so much reward (in terms of reducing page size and loading time).The average size of a WordPress website page today is around 3MB. Google would prefer you keep it down to under 1 or 2 MB in size.
- Your site visitors will like you better.
- Higher rankings because Google will like you better.
- Faster backups. People don’t often think of this one but it means less work for your web server to do. So your host will like you better.
- Less storage for backups. This will mean you use less of your allotted storage on your web server. Backups often pile up unknown to you until you start running out of space.
- Less bandwidth. The lower size will also mean visitors to your site will use less bandwidth to view your page. This won’t really become important until you get a lot of visitors but when you start paying for extra bandwidth, you’ll start to pay attention to every detail of your site.
- Your Google PageSpeed score will be better. No more “Optimize images” warnings you get in Google PageSpeed Insights. I know, Google Page speed insights isn’t the holy grail of website optimisation but still, it’s a good idea to keep Google happy wherever you can.
In a nutshell:
Your site will be faster, Google will like you more and your search engine rankings will improve. More visitors will see your page and they’ll stay longer so your bounce rate will be lower. You’ll need less storage and fewer resources on servers, which will save you money. And you’ll save mobile data plan money for yourself and your visitors.
In short, it’s the holy grail of website adventures!
And it can all start with optimising your images!
Where do these go? Demos?:Page loading with and without images
Problems with image optimisation
The number one problem with the images on your WordPress website is their size.
Scripts like PHP, CSS, HTML etc are all text files and are tiny in comparison to the average image file. It’s very common to see images from mobile telephones today of 2, 3 or 4 MB. I often see people uploading these directly into WordPress! Of course, WordPress will reduce this size on upload but it’s still unnecessarily big.
The number one problem optimising those images for your WordPress website is image quality.
The quality of the resulting image is affected by
- Reducing the dimensions of an image
- Compressing the image
- Reducing the number of colours in an image
So, it would appear that
The goal of optimising images on a WordPress website is to strike a happy balance between low-enough file size and good-enough image quality.
Finding that “low-enough” and that “good-enough” is the tricky part.
Components of image optimisation
There are a few things to consider when you begin to optimise images in WordPress. By choosing the right combination of these you can reduce your image size by perhaps four or five times.
Resizing
Resizing can be a simple first step to reduce a large image file size.
Modern image resolutions are already much higher than most people will ever need. A 5 megapixel camera will give an image size of 2560 x 1920. That’s much higher than the current most popular desktop display size of 1366×768.
So, reducing your image’s dimensions is often a good start to reducing image file size.
See what I mean by optimising size in this quick video:
Compressing
Compressing an image is the real task of optimisation. Compressing will remove unnecessary information from the image and will chunk similar pieces of information together (yes, that’s a very basic description). More on image compression later.
Keep in mind that a 50% compression rate can often reduce an image size by 70, 80 or even 90%!
Format
Few people consider the format of the images they upload to their WordPress website.
Without going into too much detail about the various formats, here are a few general guidelines:
- PNG – produces higher quality images, but the resulting file size is of course bigger. It uses lossless compression.
- JPEG – generally the best option for adjusting the quality level to get a good balance of quality and file size. It uses lossy and lossless compression.
- GIF – the best choice for animated images. It only uses 256 colours (compared to millions available) and uses lossless compression.
(But please don’t use animated GIFs in your posts. The modern fad of filling a post with distracting and annoying animated GIFs is hopefully a passing trend that will die a sudden, deserved death tomorrow.)
There are several other formats, such as SVG, JPEG XR and WebP, but they haven’t yet gained widespread use like the above formats.
Ideally, you should use JPEG (or JPG) for images with lots of color and PNG for simple images but at the end of the day, you’ll have to experiment to find what works best for your site.
Lossy vs Lossless Optimisation
Lossy compression looses some information about the image. This means that image quality is lower but image size is lower too than when using lossless compression.
Lossless compression looses no essential information about the image. This means that image quality is higher but file size will also be higher than when using lossless compression.
Most sources, including Google, will recommend using lossy compression.
Compression Quality vs Size
Just as an example; the image on the left is uncompressed, while that on the right has been compressed. Obviously they are the same image.
However, the image on the left is almost 515% bigger than that on the right when uploaded to my WordPress media gallery. This will have a big impact on page load times, especially if your images are a larger size and you have several of them.
Photo by Seb [ P34K ] Hamel on Unsplash
How to
Most people upload images to their WordPress media library and only then start to think about optimising them in some way.
But you can actually do a lot of the work before that.
Using the tools below, you can reduce the image size and change to a suitable format as outlined above. All before uploading to your site.
The WordPress Codex includes a guide on how to find the right image size and quality for your website. But to be honest, it basically amounts to “experiment to find the balance that you ‘re happy with”.
DID YOU KNOW? WordPress already optimises images
Since version 4.4, WordPress supports responsive images via srcset. WordPress creates several sizes of each image you upload to the media library. Modern browsers will show the correct sized image based on the resolution of the device. Very nice!
Tools you can use
If all of the above sounds too technical and too detailed for you, don’t worry. These tools will optimise images before uploading them to your WordPress media library so you needn’t worry about the details. This is my preferred method of editing files before uploading them to WordPress.
You can use these tools on any image from your mobile device or on one you’ve downloaded from an image sharing site.
Offline tools
Irfanview
I’ve been using Irfanview for over a decade and it’s still my favourite tool for any quick image file edits; compressing, reducing file size or changing format. It’s free for private use, is tried and tested and updated regularly by its generous author. In testing, Irfanview gave better quality images than Photoshop. It’s fast and light on resources.
Adobe Photoshop
The go to image-editing tool for professional designers. I still need it for more complex work but it’s price tag puts it out of reach of most small business owners. You can get a free trial version but be warned – it’s a steep learning curve. It’s big, heavy and slow.
Gimp
Gimp is the open source alternative to Photoshop. To be honest, I haven’t used it in years but it’s a great choice if you want to get serious and are on a budget or just like the idea of open source software.
Others
Some others tools that I haven’t tried but have seen mentioned quite often:
ImageOptim (MAC)
Pixlr (Windows)
pngquant (Windows, Mac, Linux)
RIOT (free, Windows)
Affinity Photo (paid, Mac, Windows)
Paint.net (Windows)
PNGGauntlet (free, Windows)
Lightroom (from Adobe)
Gifsicle (command-line tool for Mac, Windows, Linux)
Trimage (Windows, Mac, Linux)
JPEGmini (paid, free trial for Mac & Windows)
OptiPNG (Windows)
Online Tools/External services
In any list of online image editing tools, I have never come across the most overlooked tools of all… WordPress!
Yes, that WordPress. No-one expects to see WordPress listed in anyone’s collection of image editing tools.
But here’s what you can do with it:
- edit image files directly within WordPress
- create and change your media library default image sizes
- it automatically creates different image sizes and automatically chooses the most appropriate size for the display.
Maybe you don’t need to buy/download another tool and learn to use it after all!
But, if you do … most of these tools below will compress images in varying degrees of quality. Again, experiment until you find something you can use.
NOTE: If you believe their web page blurbs, these tools do a wonderful job reducing image size by 80% to 90%! While I have verified the links, I haven’t personally tried all of them. Also, it’s up to you to discover where they store your personal images and what they do with them. Read their privacy policy and use at your own risk.
Kraken online
Online Image Optimizer (low image size limit)
Birme – Batch Image Resizing Made Easy
Sirv.com (image editing and serving)
Cloudinary (image editing and serving)
One more tool that can be very useful is Google’s PageSpeed Insights. Use it to list what images need to be optimised for your site.
Your theme
Some themes offer built-in image optimisation functionality. I’m a big fan of Thrive Themes for many reasons and this is yet another one: you can compress images on upload. It works quite well, giving you yet another layer of optmisation for your images.
I’m sure other themes can do this as well but I don’t know them. If you do please let me know in the comments so that I can update this article.
Plugins
Plugins are what most WordPress website owners turn to whenever they need extra functionality and image optimisation is no exception.
But it’s important not to rely solely on plugins to do all your image optmisations. Don’t upload 3 MB images to your WordPress media library expecting WordPress and your plugins to do all the work. This will eat up your web host’s disk space and is just untidy! To avoid this, do your basic image resizing first, using one of the tools mentioned above.
reSmush.it
reSmush.it is my plugin of choice and what we use here at WPStrands on client websites. It seems to have skipped the attention of most experts. But it performs very well in several online comparisons that I’ve seen. (e.g. in this comparison of image optimisation plugins from WPBeginner.)
Imsanity
Imsanity lets you skip the step of reducing the image size before uploading! It allows you to set a sanity limit so that all uploaded images will be kept to a reasonable size but still big enough for a typical website. Imsanity does its processing before WordPress does, so WordPress behaves the same as always, except it will be as if the user had scaled their image to a reasonable size before uploading.
WP Smush (free version)
You’ll see WP Smush mentioned everywhere but to be honest I’m not a fan. Maybe it’s the mass market they appeal to but reSmush.it works better for me.
Others
Compress JPEG & PNG Images by TinyPNG
EWWW Image Optimizer (free version) / EWWW Cloud
ImageRecycle pdf & image compression This one is interesting in that it also does PDF compression.
CheetahO Image Compression and Optimizer
Optimus Image Optimizer TinyPNG ImageRecycle (free version)
Kinsta’s case study
There is almost no other optimization you can make on your site that will get you over 50% decrease in load times. That is why image optimization is so important
Kinsta hosting outline a case study they did on image compression at https://kinsta.com/blog/optimize-images-for-web/#
Some parting tips
Here’s my big list of tips to optimise images in WordPress.
- Resize before upload! Be aware of where your image will be used on the site and resize it accordingly.
- Experiment to find the best settings for each format.
- Use a CDN to serve up your images fast to visitors across the globe. Spreading your website’s images (and other files) around the globe is easy to do. It’s also one of the best overall speed boosts you can give your WordPress website. If you use Sucuri’s firewall it comes with great performance boosts, including a CDN. And some of Kinsta’s hosting plans also offer a CDN. Cloudflare is the best known free CDN.
- Use lazy load. A good caching plugin like WP-Rocket (LINK) or a good image optimisation plugin will handle this. It means that images load only when they come into view; this alone can give your page a significant speed boost. Used to cause Google indexing problems but not any more.
- For an SEO optimisation boost, use the alt tag on your images!
- Use keywords in your image file name or use the page title. Another SEO boost.
- Set your default WordPress image dimensions to what’s appropriate for your website . Do this in media settings (Settings > Media). But remember WordPress now supports responsive images so this isn’t as important as it used to be.
Image Formats
- Use GIF if you really need animation. Better yet, don’t use animated GIFs at all. They’re really annoying. Use CSS3 effects as much as possible.
- PNG should be used if you need high detail and high resolutions.
- Use JPG for general photos and screenshots.
- Try to use a WordPress plugin that compresses and optimises images on their servers; this reduces the load on your site’s servers.
- Don’t bother using Gzip compression as images are already compressed. The benefits, if any, will be minimal.
- Remove any unneeded image metadata e.g. with Windows explorer.
- Reduce file size by cropping the white space. Recreate the white space by using CSS to provide the padding.
- Reduce the bit-depth to a smaller color palette.
- Use lossy compression where possible.
- Automate the process as much as possible (with a plugin).
- Save images as “optimised for web” in tools such as Photoshop and Irfanview.
- Get better hosting to improve speed. Try Siteground or if you’re really serious, try Kinsta.
Conclusion
Optimising images on your WordPress website is not the only thing you can do for your website speed. But it’s a fine start.
My personal recommendation for a simple workflow using free tools?
- Use Irfanview to resize your image, then “save for web” (needs a plugin) and select the format you want.
- Use the re.Smush.it plugin to resize inside WordPress.
They’re both reliable tools. They’re both free. And when used together they’ll give you high-quality image optimisation results.
And remember, at WPStrands, we optimise images all the time for clients If you’re looking for any help with this, give us a shout.
Did I miss anything? Let me know below.
Sources
https://www.siteground.com/index.htm?afcode=5dc2e3f1c00d276988c81e5bbd610497https://httparchive.org/interesting.php?a=All&l=Dec%201%202017https://kinsta.com/learn/page-speed/https://kinsta.com/blog/lossy-compression/https://wpbuffs.com/speed-up-image-loading/https://wpbuffs.com/optimize-images-wordpress/https://thrivethemes.com/tkb_item/use-image-optimization-thrive-themes/https://www.proteusthemes.com/blog/ultimate-guide-image-optimization-wordpress/https://www.wpexplorer.com/optimize-images-wordpress-guide/https://imagify.io/blog/lossless-vs-lossy-image-compression/https://www.techsupportalert.com/best-free-digital-image-editor.htm