You might have heard that a picture is worth a thousand words, which is really true. A picture is something that attracts our attention quickly and is a better way to convey a message. The importance of pictures on e-commerce websites, blogs, portfolios, restaurants, hotel websites, and many others is undeniable.
But, according to HTTP Archive, on an average image contribute 64% of the weight of a website. And are one of the reasons why your website is loading slowly.
In this article, you will learn what is image optimization, why optimizing pictures is important, and how are you going to optimize pictures on your website?
What is Image Optimization?
In simple terms, image optimization means delivering high-quality images in the right format, dimensions, size, and resolution while keeping the image size smaller.
Why is it important to optimize images?
Improve SEO
A slow website can have a negative impact on your website’s SEO, Unoptimized images affect the site speed and eventually, the search engine ranking will also be affected. Faster websites rank better in the search results compared to slower ones.
Graph showing the connection between the speed of the page and the google search position. Source: https://backlinko.com
That’s why, in order to improve the SEO of your website, you need to optimize your images.
User Experience
Users expect the content to be displayed within 3 seconds of opening your website. And if your website fails to deliver it, it will lead to bad user experience and they will leave your website that increases bounce rates.
An infographic showing the impact of the page load speed on the overall performance of the website. Source: https://www.hubspot.com/
Conversions
According to top marketing leaders, including Moz, Kissmetrics, etc, shoppers who are not satisfied with the site speed prefer not to buy from the same site again.
40% of shoppers abandon a website that takes more than 4 seconds to load.
Infographics showing how the performance of the website affects the shopping behavior. Source: https://www.kissmetrics.com/
How to optimize website images
Optimizing or compressing images can be done manually or using plugins.
Manually
If you manage your images on your own. You need to compress images, manage image formats, cropping & resizing, etc.
Image Format
There are no general best image formats to use on your website. But you can use some of the recommended formats based on the content that the image can be used for.
PNG is used for logos, graphics, illustrators, transparent images, icons, sketches, etc because it can keep a great quality after compression.
JPG is a popular format for bloggers, users, photographers as it can be compressed to smaller sizes but it can still preserve a good quality. It supports high compression levels
WebP is an alternative to PNG and JPEG images for online use. It’s been introduced by Google. It can be used to compress images even smaller than JPEG or any other format while maintaining good image quality.
There are some cons of WebP formats that some browsers do not support it. Also, you can’t edit it on some of the online or offline image editors as well.
Let’s take an example,
I’ve taken an image and you can see it’s the actual size when I downloaded.
After compressing the image using an online platform, you can see the image sizes for the different formats.
As you can see, all the images look the same, but we have different sizes for different formats. The WebP format has the lowest size of 212.7 KB.
But will it support your web platform? That you have to check.
JPG comes second when it comes to lightweight images, if you have blogging, e-commerce websites, then you can use WebP or JPG formats based on the compatibility.
Cropping and Resizing
When using larger images or pictures with different dimensions on your site, you can simply resize or crop them to align them with the other images. This makes your content format more professional.
If you are a photographer or showcasing your artwork then you should show the images with properly sized, properly formatted.
Also, if you want to share only the important part of the image, and the rest of the parts are not useful, you can simply crop the image. Uploading the full image will take up extra space on your site.
You can use an image editing plugin, such as WP Paint, to resize or crop images on your website. The advantage of this plugin is that you can easily use it as it has an intuitive interface, it’s lightweight and fast. In addition, it gives you the flexibility to edit images in WordPress without leaving your site or using any other tool.
Using Plugins
You can optimize your website images using WordPress plugins. These plugins are really helpful and will automatically do the whole process while you don’t have to take care of anything.
Here we will discuss the Top 5 Image Optimization Plugins, these plugins will automatically compress and optimize your website images.
- EWWW Image Optimizer
- Image optimization & Lazy Load by Optimole
- ShortPixel Image Optimizer
- Imagify – Convert WebP, Images Compression, and Optimization
- Smush – Compress, Optimize and Lazy Load Images
1. EWWW Image Optimizer
The EWWW Image Optimizer plugin is one of the best plugins for optimizing the images of your website. It has a basic interface and the plugin is easy to setup. It has options to optimize JPG, PNG, GIF, PDF formats. In the free version, it comes with only the Pixel Perfect conversion level.
You don’t need an API key to optimize your images, as it performs all the compression on your website. It comes with options such as resizing, JPG to PNG and PNG to JPG conversion, JPG / PNG to WebP conversion. You can also optimize the image size of your website in bulk.
2. Image optimization & Lazy Load by Optimole
As soon as you finish installing and activating the plugin, you are prompted to sign up for the API key. After you sign up, you’ll get the API key in your email and you can insert it and start using the plugin. The free plan can optimize your images for 5,000 monthly visits before you need a paid plan.
It comes with a clean UI and gives you the option of image replacement, resizing large images, lazy load in the settings panel. It will automatically optimize the images to make your website load faster. It’s powered by a global CDN that serves images on your site that speed up the delivery of the images.
3. ShortPixel Image Optimizer
ShortPixel Image Optimizer is another popular plugin for optimizing images on your website. It also comes with a simple dashboard that’s easy to set up. You will need to give your email address in order to get an API key. After getting the API you will quickly be redirected to the dashboard of the plugin.
It comes with a variety of tabs with a lot of options that you can customize. But if you can also use the plugin with default settings. It comes with the levels of Lossy, Glossy and Lossless compression. This gives you the ability to resize, convert images as well. Also, it comes with a statistics tab where you can check all the usage statistics for this plugin.
4. Imagify – Convert WebP, Images Compression and Optimization
Imagify has the most modern UI on this list. The Settings panels are broken down to the General Settings, Optimization and Display Options sections. It has three optimization levels that are Normal, Aggressive and Ultra, which are shown in larger button designs.
It comes with some really useful options, such as auto-optimizing images on upload, backup of original images, creating WebP versions of images, resizing images, and many more. In addition, you can choose to optimize the different image sizes created by WordPress. Another best thing about this plugin is that you can optimize the theme as well.
5. Smush – Compress, Optimize and Lazy Load Images
Smush is the most popular plugin on our list with over one million active installations. It comes with a setup wizard to help you set up the plugin. The dashboard is simple and has made good use of the colors that let you know which one is free and what’s a pro feature.
The images will be optimized automatically during upload if you enable the option. Other options such as image resizing, lazyload are there. The free version doesn’t ask any API for using the plugin. The bulk optimization feature allows you to optimize up to 50 images at a time, and you can re-run the bulk optimization to compress more images.
Conclusion
You need to take care of many areas in order to improve the overall performance of your website. Optimizing images or compressing images is certainly one of them of great importance. To learn more about other aspects of your website check out this blog: How to Increase the PageSpeed Score of Your Website
Whether you choose manual optimization or use plugins to automate the process, it will certainly improve the ranking of your websites.
I hope the blog helps. If so, please share it with your friends.
You will also like:
Leave A Comment