Here another tip from our series of How to optimise a WordPress site. Today in this post, we are going to talk about optimising the images for blog posts.
Why should you consider optimising Images for your blog posts?
It is said that a Picture is worth a thousand words, and it can be saif for all the visual media like Charts and Infographics as well.
They make things easier to understand, and we should all use these virtual content in our blog posts, they will do better than a post containing only text.
While a 3000-word text can weight somewhere around 30kb to 50kb, one Image (if not properly optimised) can go beyond 500kb. I’ve seen people using even bigger images (that are more than 1MB)
Our goal should be to bring the images weigh between 50kb to 100kb, (infographics are bigger and will always be bigger)
Now, in plain English, these images increase the size of your web page, and the bigger the size of a web page, the longer it is going to load. Though we have covered how to optimise your WordPress site in great detail, this one more step of optimising images can make a huge different is the performance of a site.
Imagine you currently use (unoptimized) 3 images a blog post, with each image weighing between 300kb-500kb, 3 images would be 1mb-1.5mb. If you optimise them properly, they would be somewhere between 50kb-150kb, which is 10x lesser and will definitely make your web pages load faster.
Optimising Images manually.
There are different types of images, the ones you take from stock photos website like Pixabay, then there are screenshots used for tutorials, and then the ones you take from Digital Camera or your phone.
The stock photos you download from websites like Pixabay or UnSplash, already weigh 250kb-1mb. Because they are high-resolution photos with widths and height like 2000×1500 or 4000×3000.
The photos from your Digital Camera or Mobile camera are even bigger in size, The screenshots can be lesser but they still can be optimised.
You can see the image above, I use the Snagit tool to capture screenshots and Snagit Editor to manually optimise all the images by
- Resizing them to 700px (my content area width)
- Saving almost every image as .jpg (though exceptions are there)
- Keeping the image quality to 80% (no visible difference in quality)
When you use these images in your blog post, they would appear in the content area, and most of the blog content area is between 600px to 800px. (ours in less than 700px).
So, technically, even if you resize the images from 2800×1400 to 700×350, it becomes 25% of the actual size would also decrease its weight from 1MB to 250kb (these are just assumptions and would vary for each image)
Use can use simple tools already available on your PC or Mac to resize them images or use online tools like PicMonkey or Pixlr Editor to resize the images.
Note: There won’t be any visible different between the quality of images as you anyway would view bigger images as smaller when used in a blog post with the 600px-800px content area.
Also, saving them in .jpg format will also make a huge difference in the size, if a photo weighs 250kb in .png format, it will weight somewhere 70kb-100kb in the .jpg format without much loss in quality. (it’s still worth it if there is any)
So, make a habit of checking the size of an image before uploading it on your WordPress site, and use the manual method to optimise them.
Optimising Images using Plugins
Optimising images manually are still the recommended option, but you might already have a blog with hundreds of images already uploaded to it, optimising them manually is not an option.
This is where plugins come in handy, you can optimise images using Plugins, and there are plenty of them.
WP Smush
The one we are using right now is WP-Smush, which makes optimising images super easy.
Install and Activate WP Smush plugin on your WordPress site, go to the WP Smush Options and start Bulk Optimizing, the free version lets you optimise 50 images at once in bulk, you can also go to the Media Library and optimise particular images.
You can also turn on the option for automatically optimising the files uploaded to the WordPress site. (it is turned on by default).
I used WP Smush on one of my blogs to optimise 248 images and their size was reduced 10%.half of these images were already manually optimised by me.
There is another plugin that I used on most my website where I upload a lot of images, it’s called Imsanity and helps you to remain sane when it comes to uploading huge image files.
While this plugin also helps you resize your existing image uploads in WordPres, I use it for resizing the uploads done by my authors.
this is pretty helpful for people who run Multi-Author blogs. One of many challenges of running a multi-author blog is the images, a few Authors upload images straight from their Digital Camera or Mobile Cameras which are crazy in size, 3MB-5MB.
With Imsanity, you choose the settings to apply to the files that get uploaded, resizing them to a sane number. It’s one of those must have plugins for blogs with Multi Authors and who work with a lot of images.
