Images are essential for any website that wants to showcase their content or services in a way that will resonate with their user. In fact, giving better user experience is the key to drive conversions! But, for a better user experience, you need to be as diligent as the industry demands. In this article, i'll talk about how images can be optimized to not even give better user experience but helps in your conversion rates as well.
What is image optimization?
Generally, image optimization is known as the process to reduce the size of the image in a way that won't let you realize the loss in quality much. There may not be noticeable change in the image quality when it is done the right way, but technically you either taper the resolution or pixels to reduce its size. Ultimate goal of doing image optimization is having user to download less data while surfing your website on their laptop/desktop or PDAs. Hence, it improves load time of the website.
You may ask, what is the optimal size of the image we should put on our site?
Answer is, it should be less than 100kb.
Why is it essential?
Most of the time, when a user comes to your website, subconsciously, they will give you 5 seconds to your website to load. If you fail, guess what will happen? They'll bounce back. Having your visitor bouncing back due to slow website is definitely not something you will want to happen. That is where image optimization can be your savior. When your site speed is slow, it is most likely that either it is loading unwanted scripts/CSS, animations or your images are too big in size. According to google, most of the sites on internet don't load fast. And google hates it!
This means you can also loose some search engine rankings due to bad website performance. All these big organisations like Google, Amazon, Facebook are successful because they have been putting user experience to the forefront.
But, this is not the end of the world. You can still recuperate using image optimization to boost your website speed and having no one exiting from your websites unless they have barged inside the wrong address.
How to optimize images for the web
So, the part we've been holding for you since two paragraphs so that you get the overview of its significance and implications. Now, lets dive straight into it.
Check your current site speed:
Before you shoot in the dark, you need to know what images you need to optimize. Or, are the images slowing down your site or something else. Here are my top 3 tools which will help you diagnose it.
- Google Page Speed Insights
- GT Metrix
- Pingdom Tools
Each one of them has their own score metrics. Such as google page speed insights gives you the speed score which may differ for different device on a scale of 0-100. Only few websites manages to get page speed score more than 80 or 90. In fact, 90% of the sites falls into the bracket of 0-40.
On the other hand, GT Metrix gives you the page speed score in grades (from A to F). That actually reminds you of your school examination report card, A being the best and F being the worst.
Both of the tools gives you exact areas which are causing the load on to the server and what you can do to curb them hampering your site performance.
Here i'd not like to derail from the topic as it can get as long as we want to talk about. So, if you want to have a look at what images are slowing down your website. You need to put each URL you want to check for and these tools will give you results about the particular URL you entered. Let me give you an example of one of my site in GT Metrics.
In the above screenshot, i analysed one of my website on GT Metrix to check what is it that's causing the slow speed. It is very much evident that "Optimize Images" is the major cause which has been given the "F grade". That is where we need to work on.
If you'll expand on "Optimize Images", you'll find images that you need to replace/optimize for the better performance. It also tells you that how much space you'll save if you optimize the images. In my case it says 100.8 KB, which is decent amount of memory i'll be saving. Remember, each byte of space counts!
The best part about GT Metrix is that it actually lets you view the optimized version of each image so that you can view it and then download it without having you to optimize it on your own. Isn't that amazing!
Now if you want to go advance way to make things work out, you may want to explore some miscellaneous ways. Therefore, there are sites available online, which can let you decrease the size of the image up to whatever extend you want to!
Here are the lists of websites which i personally like and use:
As i say, don't overcrowd your list of tools, keep the ones which serves the purpose. All three of them are the best as per my experience and most importantly, its FREE! . So, you may add them to your own list.
All of the sites follows the same process. You upload you image file and it compresses the image as per the default settings. After that, it is up to you whether you are satisfied with the compressed size or not. If not, then you can compress it more aggressively and reduce the size further by sliding the bar.
In the above screenshot, i used "compress or die" to compress the image. You can switch to different image format (JPG, PNG, GIF, WEBP) mentioned at the topmost right of the menu. It is by far the best tool i found with the utmost flexibility of compression.
2. Automate image optimization on WordPress
By now, you must be thinking that it is hell lot of work to optimize images and then upload it back to your site. Monotonous right? Well, there's a solution to automate this process on Wordpress using plugins. Since, WordPress is a CMS (Content management System). It has its own perks. It has thousands of plugins which can be installed within the platform to ease the work. Some of the plugins on WordPress are so popular that they have millions of active installs. So, you can gauge how much essential it can be to your site.
Hence, there are some plugins which automates the process of image optimization on WordPress so you don't have to go through the tedious task. Here are some list of best plugins you can download:
Now, among these plugins i found smush easy to operate and effective. What it does is, it automatically compresses the images as you upload them into the media. Isn't that amazing! Yes it absolutely works exactly how it sounds. No gimmicky stuff here.
Smush is free to use but it also has it pro version which allows some extra benefits/features.