How To Optimize Images For The Web?
In our previous blogs, we have established the fact that speed is an important factor when it comes to having an online presence. Both search engines and visitors prefer faster loading sites. To attain higher speeds, there are several solutions; some will cost you money (by investing in hardware), and some you can do by applying minor tweaks. You can read more about other factors and facts in our blogs like WordPress Maintenance Checklist Fast site = Better SEO?, The importance of caching in WordPress, or Best CDN Providers in 2021.
The heaviest part of a web page is the number and quality of images it contains. The higher the resolution, the heavier the image, the more the images result in even heavier and slower loading pages. But we cannot live without images either. After all, a picture is worth a thousand words, and who would want to let that go? Not us!
Luckily, we have some tricks up our sleeve, which we are going to share with you in this post. This will help you keep the images and still be able to serve your page as fast as possible. Sounds good? Let’s see how!
Use WebP format!
According to Wikipedia:
“WebP is an image format employing both lossy and lossless compression, along with animation and alpha transparency. Developed by Google, it is designed to create smaller or better-looking images compared to the JPEG, PNG, or GIF image formats. Wikipedia”
So, it is an image format that is created to be used solely for the web. This format supports both stills and animation and can provide the same quality while being a lot lighter than its counterparts like JPG, JPEG, or PNG, etc. WebP can save images using compression that can be lossless and lossy. It uses a prediction algorithm to store image details. WebP format can have EXIF data as well.
Images stored using this format are usually lighter and take up less space in terms of memory.
Using the same server resources and without tweaking any other setting, if you opt for WebP images you will end up with lighter pages than before (with JPEG or PNG images), and your visitors will experience faster loading webpages.
How to convert JPEG and PNG to WebP?
Converting JPEG or PNG images to WebP is a lot easier with the help of tools that are available for Windows, Linux, and macOS. You can find precompiled tools by Google for these operating systems here.
(https://developers.google.com/speed/webp).
Additionally, online free conversion tools are available where you can upload your source file, choose the level of compression and loss, and get your images converted to WebP in no time.
Use GeekBee WordPress hosting!
Where your images are automatically being optimized and you don’t need to bother with image optimization anymore. Sign up now HERE and try our service for free!
How to convert WordPress Images to WebP?
Natively WordPress does not support WebP, but that does not mean there are no workarounds to use this image format. There are plenty of free and paid plugins available to convert all your existing images and the new ones you upload to your site in the background. As a result, you can spend your time doing something else while your WordPress converts your images to the latest, lighter and fastest image format for you. WebP Converter for Media is one such example of a totally free plugin.
Using this plugin is easy, and it works perfectly. It can convert images in three main directories, i.e., Themes, Plugins, and Uploads. However, it is recommended to compress and convert images in the Uploads folder only because you may mess up your themes and plugins unknowingly. It offers compression from 75% all the way up to 100%. It is really easy to use. The steps are:
- Install the plugin
- Choose the type of images you want to convert (JPG, JPEG, PNG)
- Choose the directories
- Choose the compression size
- Choose to delete converted files if they are larger than original
- Save, and you are set.
Go ahead, give it a try and see the difference in load times yourself. It is also a good practice to lazy load your images.