As a web developer or just a simple blogger, we constantly thrive to reach that 100% score on GTMetrix, Pingdom or PageSpeed by Google. And the bulk of the optimization is by having suitably sized images.
If a jpg or png image is scaled-down, pixelation will taint your pictures. Large-sized images are a haunting headache; it slows down your website, and even though you have great content, visitors will not stay around to see it slowly appearing.
If your website is not loading faster than 2 seconds, conversion rates will start to fall, and you will lose all that opportunity. If that is happening to you, then it is time to learn and apply WebP images on your website.
Let’s see how we can do it for FREE.
What is WEBP?
WebP is an image format by Google applying the compression method of lossless and lossy. You can read more about its details at their official website here.
The bottom line is that it makes your website faster and still manage to look good.
More browsers are already supporting this image format. If you want website visitors who use unsupported browser version to see your images, you can always have a fallback that shows conventional image formats.
- To show WebP images in compatible browsers and JPG in unsupported ones can be done by adding a few lines of code:
<picture>
<source type="image/webp" srcset="yourPicture.webp">
<source type="image/jpeg" srcset="yourPicture.jpg">
<img src="yourPicture.jpg" alt="">
</picture>
How to convert any image format into WebP?
Before
For this case study, let’s use Heksagon’s free template called One. And we will test out different formats for its background image.
Now let’s test its speed.
Bear in mind that the site tested contains only one image and not much content. Converting images to WebP for websites that have a higher number of images would be more impactful.
To start converting images to WebP format, let’s use an open-source online photo-editor, Photopea.
Convert to WebP
To open your image, you can drag it from its folder to this website. Then, to convert it to WebP, click on
File -> Export As -> More -> WEBP
just in the image below:
Here, you can edit the dimensions of the image and the quality. Some don’t need to have large attributes, especially on mobile devices. It is reducible until the image maintains a satisfactory level of quality.
For this case, it shall be adjusted to 800px to 533px and 70% quality since this image functions as the background image and does not need to have too high quality but not too low (to maintain the detail).
Check out the current size of the image. It becomes 39.1KB from the initial 2.6MB. That’s 66 times smaller!
After
Let’s test how fast the site is with the new image.
From 0.9s or 900ms, its Largest Contentful Paint (LCP) is now 306ms. That’s THREE times faster!
Other optimization techniques are valid to achieve faster and even a 100% score, especially on speed tests like these. In this case, the limitation of hosting for free on Github is the inability to control the caching lifetime that is referable in the report.
Conclusion
That was how to convert your images to WebP using Photopea for free. Are you intending or using WebP in your websites now? Please share with us in the comment section here.
I hope this sharing helps in your website-building efforts. If you’d like to use this free template. Check out how to install it here. More links regarding this template from its GitHub page are as follows: