The internet has gone a lot more visual than it used to be. Big blocks of texts are a big no, and you know what I mean if you are a blogger.
You need to put in various elements into the mix and present the blog posts so your readers can read them fully.
So what are those elements?
Images, screenshots, videos, paragraph breaks, bullet points, headings etc.
In fact I have discussed in detail about how you should format your blog posts (so your readers read them fully) in these posts:
- How to present your long form content like a pro (so your readers read them fully)?
- 4 Tips to format your blog posts for best reader experience
Right. But now you have something else to consider as well. Loading speed.
We all know how the loading speed of your website is crucial to please your readers and search engines.
And any uncompressed raw image will take time to load, which means it will contribute to the loading speed of your website.
Uploading raw/uncompressed images will only make things worse with your website.
At the same time you cannot compromise on the quality of the images you upload because that will create an amateur look to your website.
Which is why you need to make sure you compress those images (without the loss of quality). Let’s see how you can do that.
Online tools for compressing your images
One way to upload compressed images to your website is to compress/resize them before you upload by using an online tool.
Let’s see 3 free tools (I can give you 10, but that’s not the point) that can help you in this regard.
I use this a lot as it is a very easy and straightforward tool to compress images. It has two compression options – Lossless and Lossy.
I always choose the Lossy option and haven’t found a big change in the quality of the image.
As to file formats, you can compress jpg, gif, png and svg files using compressor.io.
The only downside is that you cannot bulk upload and compress images if you wanted to. But that had never been the problem to me!
This is another simple yet effective online tool for image compression.
Unlike compressor this one has the bulk compression option that allows you to compress 20 images in one go.
So if you are into bulk compressing of images this will be a good fit.
But compared to Compressor, I personally feel that the platform is bit cluttered. Nevertheless, a great tool!
Just like Optimizilla, Tiny PNG also has the option of bulk compression that allows you to compress 20 images in one go.
This online tool allows compression of png and jpg (just in case you thought only png is allowed, from the name).
There are no options or complicated controls – you just have to upload the image(s) and get it(them) compressed.
WordPress plugins for image compression
Now, as much as I love these online tools for image compression, I admire the option of having an onsite image optimization option.
This way, you can automatically have all the images on your site compressed – both the old ones that you have already uploaded and any new ones that you upload.
I know, having one additional plugin for this feature is additional load on the website, but still, images are a crucial part of the content!
Having said that, if you have a website that is not image heavy and if you rarely use images you can simply use any of the online tools.
But I would be surprised if you have a website that rarely uses images.
It is because, nowadays the internet has become a lot more visual – the more images, screenshots and other forms of media you use, the easier it is for you to capture your readers’ attention and hold them longer on your site.
Anyway, I can give you three recommendations for WordPress plugins to help you with image optimization.
Smush Image Compression and Optimization
Smush has been my personal choice of an on-site image optimization plugin. The plugin is from the team at WPMU DEV and is quite famous.
It helps with increasing the loading speed of your website by compressing the images (the ones you upload as well as the ones that are already on site).
You can just install the plugin and forget things – and sit back and plugin do the compression for you.
The plugin has a pro version that promises you a few things including
- Bulk compression of images in any directory
- Super-Smush lossy compression
- Conversion of PNG to lossy JPEG
- Smushing images of bigger size up to 32MB
Etc. But so far I am happy with the free version.
ShortPixel Image Optimizer
This one is a smart plugin that is quite popular too. It offers lossless, lossy and also a glossy compression option developed for photographers.
The plugin also does a conversion from PNG to JPEG if that will result in the reduced file size.
The plugin operates on a freemium model.
Imagify is an image compression WordPress plugin that lets you compress images on your site with much ease – just like the other two plugins.
The plugin offers the standard lossless compression, an aggressive lossy compression and an ultra strongest compression options.
Imagify is free for upto 25MG of images, and you will be given an additional 25MG bonus upon registration.
Final tips to optimise images
Despite the use of an online compression tool or a plugin, there are a few things you could do to keep your images optimised and to avoid your site’s speed being affected by images.
Here are those tips.
#1 Always choose the right file format
Yes by simply choosing the right file format you can already save a few Kbs in images. For instance, if an image has lots of colours in it, go for jpg.
On the other hand, a png format is for images with limited colours and images with transparency: ex: logos and vectors.
If you choose a png for colour rich images the size of the file will be very large!
#2 Choose the right image size
Depending upon where you want to use the image, only upload the correct size.
For instance, let’s say the column width of your blog is 700 px, and you want to put up an image for your blog post.
By uploading an image that’s 1024 px wide, you are unnecessarily uploading a larger image with a bigger file size.
You should either resize the image using a software like Photoshop, or use the resize option right within WordPress while you upload your image, before using it!
#3 Only use images at appropriate places
Yes images are visually appealing. But that doesn’t mean you can fill your pages with unnecessary images.
Remember, using a lot of images will contribute to using up disk space, bandwidth and also will slow down your site.
So make sure you use images only very appropriately.
#4 Disable image hot linking
Enabling image hot linking will not increase the size of the images, but will use up your bandwidth and *can* slow down the speed of your website.
Hotlinking is when someone directly puts up an image from your website on their own by using your image’s direct URL.
Say for instance, I have an image uploaded at my site and its URL is: https://www.yourwebsite.com/uploads/2018/01/image1.jpg
With hot linking enabled, anyone can simply insert an image into their blog post/page by using this URL.
If that happens, for every page load of their website, the image will be loaded/pulled from your website – which means you will be using up your bandwidth and your server will be serving the image for someone else’s site.
So make sure you have disabled hot linking so that no one can directly link to your images on their website.
Images are BIG. They add visually appealing look to your content.
And they give the eyes of your readers the much needed break from big blocks of text.
But if you don’t follow the best practices, images can add to disk space, bandwidth usage and also make your website load slow – certainly, you won’t want any of these to happen, as a website owner.
Hope this post helps you with that!