Introduction
In most cases, the single biggest contributor to poor page performance is large image files. Using Google’s Lighthouse and PageSpeed Insights tools, I’ve been optimizing my agency’s website as well as client sites. Before doing this, I looked into different approaches to image optimization and the one that worked best for me was outlined in this Reddit post, so credit for this method goes to the author of that post.
The process involves two simple steps of first compressing the image using compressor.io then converting it to webp format using cloudconvert.com. No need for Photoshop or any other special program that you need to download and learn. I most often do this starting with jpg and png files, as they are most common and I usually do not need to compress svg files as they tend to be much smaller to begin with.
Compression
To start, open compressor.io in your browser and upload the images you would like to optimize. After they are finished compressing, you will be able to see how much space you saved and even compare the original images to the compressed ones.
Once you download these you can move on to the next step.
Conversion
Next, convert your images by going to cloudconvert.com and uploading the ones you just compressed. At the top, choose “convert to” and select “WEBP”.
*Note that you may need to create an account, with which you can convert a number of photos per day for free. I recommend paying if you plan to convert lots of images as this is a very important part of optimizing your site.
Click the big convert button in the bottom right and download them when finished. Now your images are optimized for web!
Conclusion
Thanks for reading and I hope this tutorial will help you speed up your site!