Without a doubt, websites must be fast. Although today the Internet is high-speed, users have started to pay attention to the speed of page opening. Even 5 seconds of waiting for content may discourage a potential customer from staying on your site and taking advantage of your offer. Therefore, make sure you prepare and optimize the content on the website right now. Remember that Effective Image Optimization is one of the keys to success!
This article is one of many that we plan to prepare for the website optimization process working under the control of WordPress. It is also the first one that will allow any user to start optimizing without having detailed knowledge about, for example, scripts and CDN that will become a hero of our next text.
In this article we will make the first and necessary optimization step, to save up to 70% of bandwidth.
I will analyze the photo which weighs 233KB and has a size of 1350x900px
Important! In each situation presented below, I tried to get the smallest possible file at an acceptable level of quality.
We also use our Rife WordPress Theme to provide these test. You can also download the Free Version.
Is Photoshop the best for web optimization? No, it’s not!
Many people will probably smile under their nose that I use Photoshop to process pictures but trust me, I had such an episode, because not every solution met my expectations.
Let’s check what we can do with this PS.
An acceptable level of quality is 50%, which after saving gives us a file size of 184KB, which provides us with 22% savings. No big deal. Let’s go ahead.
Is XnView the best? Nope!
As you can see from the following screen (105KB – 55% savings), we managed to get a much better result than in Photoshop.
If we process family pictures on our hard drives, XnView will work correctly. Unfortunately, we can find much better solutions for processing photos for the website.
GTMetrix optimization? What the hell, It is possible?!
Yes, it is 🙂 Look at the screenshot below. You can download each photo in an optimized file.
But you have to remember one significant thing! You need to replace this photo or these photos (if, for example, you have 20 of them on the website) through the WordPress media manager. I can assure you that this task will be very breakneck because you have to remove the previous image and replace it with new ones. You can also use FTP to replace more files, but you still need to rebuild the thumbnails. The possible way but very difficult for less advanced users.
ShortPixel? What is this?
In short, it’s a plugin that does all the work for us, and we’re happy with the optimized photos with just one click. Suddenly, all the work we tried to do with external programs turned out to be a Sisyphean task.
After optimizing our file, we managed to get 66KB, which means that the data has decreased by 72%! Of course, not always such compression is successful, but around 60% is almost a standard.
The most important things are that you can change image quality again without having to re-upload it to your server. The plugin will do it for you automatically. Or you can restore the original image file in the media manager.
Let’s check how this plugin works. Of course, I don’t have to explain how to find and install the ShortPixel plugin because if you want to optimize your website, you already know how to do it.
After opening the settings, the most important option is the image quality settings. You can choose from 3 options: Lossy, Glossy and Lossless. In my opinion, Lossy is the best option for most users when using only photos. Of course, you can see some losses in the pictures, but if you are not a photographer and don’t want to build your online portfolio, users will not even notice the difference. I don’t recommend using Lossy on simple graphics with a bright background (like a logo) because a not good compression is evident.
On our website, I used a glossy compression, why? Because in many cases I use png and jpg images with a solid background where lossy compression leaves not good looking pixels. We also promote our product that means we have to use sharp and pixel perfect promotional pictures 😉
Let’s save the settings and go to the media manager. You can choose there and select one file for optimization (1) or select multiple files, and ShortPixel will take care of everything (2).
Visit the plugin creators website where you can test the optimization without the need to install the plugin and read the difference between the different types of compression.
Want to see the real benefits of effective image optimization?
If you have added 24 photos on your website and used a compression plug, you can cut files in total by almost 6MB, which means that we can save up to 50GB of transfer (Saved bandwidth is calculated at 10,000 impressions / per image). It’s critical when our hosting provider has restrictions on the monthly transfer.
Another crucial matter is the speed of page loading. There is nothing to comment on the benefits of this 😉 Fast = Good!
What is the price?
The free version allows you to optimize 100 photos per month. Remember! Very often 100 photos don’t mean that you can tune 100 files because WordPress (or other plugin or themes) generate additional thumbnails for each photo. ShortPixel also identifies thumbnails as pictures. In the best case, a free plan is enough to process about 30 uploaded photos.
For sure, in the price list, you will find a plan for yourself, but I thoroughly recommend this for $ 9.99 where you can optimize 10,000 photos (in total).
We use this plan on many (many) installations, and we still have not exceeded half of the one-time 10k plan.
Last thing: Don’t forget about proper size!
Even if we optimize photos, any speed test can lower the result for using images in too high a resolution, the consequence is also that your website will load more slowly. If you are adding a large picture to the media manager, remember to choose the right size when adding it to the content.
Let’s take a look at this example. Below I’ve placed a view from Elementor. I could add maximum photos to this rectangular view (e.g., 1000x600px), but it will not be optimal. It is better to choose a more suitable size, that’s why I used smaller (300px width). Don’t upload wider pictures than 2000px; it makes no sense.
I’m sure there are other ways and plugins to achieve similarly (or maybe even better) effective image optimization result, so please give me know in the comments section.
Daniel