The functionality and quality of websites has improved a lot over the past few years with the arrival of new web technologies and content management systems. But even as you are able to present sharper and larger images, charts, presentations and other multimedia and data on your webpages, the size of websites has also bloated up. Most websites are now going to be very graphic heavy.
If you would like to see how your website performs and ways to improve it check out Lucep’s website grader tool, it’s totally free.
Importance of Page Loading Speed
As you can see from the chart above, images are the major culprits responsible for the rapid increase in website size. This leads to excessive load times, which in turn destroys your user experience. It has even larger repercussions in terms of lead generation and conversion, since lower page loading speed will make people feel there’s something wrong with your site, and it will increase your bounce rate. In other words, larger images and slow page loading will let more visitors go by without even giving you a chance to convince them to take a look at your products/services.
Even a small 1 second improvement in page loading speed will directly increase your lead conversion by 7 percent. Also, faster loading websites are favored in search engine algorithms, so you get more traffic from the search engines, which in turn will result in more leads and conversions.
This is one of the reasons why embedded videos, which are not actually part of the web page, are now increasingly more popular as compared to inserting a big list of large images into your web pages and blog posts.
How to Optimize Images for Web Use
From a developer’s perspective, a website that goes live must be well optimized. Reducing page load times are a very important component of optimizing a website, and page size directly affects the page loading time. Now, as we see from the bar chart, the average page size of the top 1000 websites was around 930Kb five years ago, and now is burgeoning up to more than 2Mb, mainly due to images. So optimizing images is clearly important for maintaining incoming website traffic for businesses.
I recently went a little over the edge with experimentation on how to optimize some of the website images on Lucep, and wanted to see how much I could reduce the size of images. I used a total of 41 images for the experiment.
After the experiment I managed to reduce the images together worth 2.2MB to 234.7kB, that’s essentially almost a reduction factor of 10, and that too without reducing resolution of the images. Although it is considered lossy compression, to the human eye, there is no visible difference.
That’s a major improvement, considering the resolution of the images are still the same before and after being optimized for the web.
Now I’m going to explain how I achieved this high a compression factor. There are a lot of websites that provide free services for image compression, and I realized that all these services would probably use a different compression algorithm for their compression. It means that if you were to compress your images multiple times using first one service, and then another service, you will get increasingly smaller image sizes. The services I used for this experiment are:
https://kraken.io/web-interface
Here’s an example of how this works, and how each service successively reduces your image size even more. After a quick Google image search for Lucep, I downloaded our logo from our Twitter page. The downloaded image was 46kB in size. Below are the results after using the above services to compress this 46kB image.
Kraken
Input size: 42kB
Output size: 12kB
Percentage Reduction: 71.4%
Compressor
Input size: 12kB
Output size: 5.7kB
Percentage Reduction: 52%
Optmizilla
Input size: 5.7kB
Output size: 3.9kB
Percentage Reduction: 32%
Final image was 3.9kB, which is basically a 90% reduction in size of the original 46kB image.
Before
After
The image used above is very highly optimizable, so it might not be the best example to validate this process. Let’s try a less optimizable image, which is a lot more complicated.
Before
Kraken
Input size: 86.7kB
Output size: 81.6kB
Percentage Reduction: 5.88%
Compressor
Input size: 81kB
Output size: 79.8kB
Optmizilla
Input size: 79.8kB
Output size: 33.9kB
Percentage Reduction:58%
After
The most work is clearly done on Optimizilla, which is one of my favorite image compression services. One of the key features of Optimizilla that really makes it great is that we can choose the level of compression, and see in real time how the image is affected. You do need to be careful as Optimizilla will also reduce the image quality.
In any case, you need to find the right balance between compression level/image size and quality. Get it right, and you will have great looking images on webpages that load instantly. The results you get from this image optimization process will be just as fast, in terms of a reduced bounce rate, more pageviews, more Google traffic, and a jump in lead generation and conversion rates from the same website traffic that you had before.
If you would like to find out other ways you can improve your websites performance check out these articles below
What is your Alexa website reach and how to widen it
Lucep Pte Ltd,
Call Us
