How to Optimize Your Website With WebP

 · 5 min · Nasir

Learn how to make your website faster for free with WebP images.


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:
  <source type="image/webp" srcset="yourPicture.webp">
  <source type="image/jpeg" srcset="yourPicture.jpg">
  <img src="yourPicture.jpg" alt="">

How to convert any image format into WebP?


For this case study, let’s use Heksagon’s free template called One. And we will test out different formats for its background image.

A pretty standard JPG image
Let's take a look at the background: pretty standard JPG image.

Now let’s test its speed.

Pretty good. But can be better.
Pretty good. But still not perfect.

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

Welcome to Photopea
Welcome to Photopea

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:

Export as WebP
Export as WebP

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.

Adjust the image in this menu
Adjust the image in this menu

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!


Let’s test how fast the site is with the new image.

Look at how much it impacts the performance
Look at how much it impacts the performance

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.


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:


We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close