Any website that wishes to highlight its products or services in a way that appeals to its audience must employ images. Giving a better user experience is actually the secret to boosting conversions! However, you must be as meticulous as the market requires in order to provide a superior customer experience. In this piece, I'll discuss how optimising your photos can increase conversion rates in addition to improving user experience.
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 necessary?
Most of the time, when a visitor visits your website, they will give it 5 seconds to load in their subconscious minds. Guess what will happen if you fail? They will recover. You definitely don't want a visitor to your website to leave and return because it is too slow. Image optimization can save the day in this situation. The most frequent causes of a slow-loading website are unneeded scripts/CSS, animations, or excessively large graphics. Google claims that the majority of websites on the internet take a while to load. Google despises it, too!
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
You don't truly need so many tools, in my opinion. As a result, I personally find GT Metrix and Google Page Speed Insights to be the finest among them and utilise them for various tasks.
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:
Tinypng
shirnkimages
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
You must be thinking at this point that optimising images and uploading them to your website takes a lot work. Monotonous, yes? Using Wordpress plugins, there is a way to automate this procedure. WordPress being a CMS (Content management System). It offers unique benefits. There are countless plugins available that may be loaded on the platform to make work easier.. 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:
Smush
EWWW Image Optimizer Cloud
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.
We are offering best and effective tool to compress any PDF file.
This tool is 100% free so you don’t need to pay anything.
This is a class for reading and writing Exif tags in a JPEG file or a RAW image file.
Supported formats are: JPEG, DNG, CR2, NEF, NRW, ARW, RW2, ORF and RAF.
Therefore throughout your code, you should always handle cases where there is no Exif data, either due to no data for a specific attribute or an image format that doesn't support Exif data at all (say, the ubiquitous PNGs or WebP images).
Add the ExifInterface Support Library to your project with the following dependency:
But when an Exif attribute is exactly what you need to prevent a mis-rotated image in your app, the ExifInterface Support Library is just what you need to #BuildBetterApps
The basics are still the same: the ability to read and write Exif tags embedded within image files: now with 140 different attributes (almost 100 of them new to Android 7.1/this Support Library!)
