Get Appointment

We have received your message and will contact you soon.

Thank you for choosing prositeweb, your web development agency in Montreal. Please call us at +1 (514) 548-2165 if you need immediate support.

How and why convert your photos to WebP format?

We recently worked on optimizing a client's website and saw how the WebP format can make such a difference. In this article, we tell you what it is, how and why to use it. We'll also give you some tools you can use.

What is the WebP format for photos?

It is an image format created by Google which offers superior photo compression. Via the configuration, you can define at what percentage you want to compress your photo. It is particularly useful for the web as it affects the performance of your website less. As explained in the Google documentation, the size of WebP images is 26% smaller than that of PNG images. By making a comparison with the JPG format, we can estimate 25 to 34%. This gives you an idea how much it can improve performance. As you can see from the screenshot below, we have created a code to replace png and jpg formats in WebP format, the result is amazing. webP format If you want to learn more about WebP compression, we recommend Google's article .

Why use the WebP format?

In view of what we have discussed above, certainly, the use of WebP compression is a plus for your website. Indeed, it significantly reduces the size of your photos (lossy or lossless). It also allows you to have a much faster website and a better user experience. Photos usually have a huge impact on page load times. However, they are very important to better present its products or services. By optimizing your photos, you can easily reduce the size of images and allow your users to have a good experience on your website.

How to optimize your photos with WebP compression?

There are several approaches to converting photos to WebP format. Among these approaches is the use of extensions (if you use a content manager). You can also use some online code examples to adapt it to your needs. Another option could be to manually convert your photos before using them.

1 – Use of extensions;

You will find in the library of content managers that you use several extensions to optimize your photos. We particularly used the WordPress extensions that we offer.

LiteSpeed Cache

It is a solution that is available online that you can simultaneously use to optimize your pages and images. You will certainly find it compatible with several CMS. In WordPress , there is an option to turn photos into WebP format. LiteSpeed Cache

“Converter for Media – Optimize images | Convert WebP & AVIF”

It is an extension with nearly 200,000 downloads available on WordPress. You can detect it by doing the search directly from your extensions tab. Alternatively, go to the wordpress.org website . Converter for Media – Optimize images | Convert WebP & AVIF Depending on the website design software you use, you will find extensions or modules to convert your photos. We recommend that you read the description and conditions before use.

2 – Manually add photos in WebP format;

Several modern website creation software accept WebP as a photo format. Alternatively, it is always possible to make adjustments in the configuration or the server. Regarding WordPress, since version 5.8, it is possible to import WebP photos directly. Therefore, it is more than enough to manually convert your photos and import it. For this, you obviously need to use a tool to convert your photos. I will recommend two options:

  • Use a software or online tool
  • or download a WebP player extension to your computer.

Using online tools can be interesting. However, you should not lose sight of the privacy aspect or the risk of your photos being stolen. The second option is ideal; considering the fact that you can convert your photos directly from your computer before importing it to your website. Below are some examples of applications for converting or using WebP photos on Windows. WebP

3 – Use custom programming to automate the conversion of your photos;

We have found several relatively interesting codes on GitHub that you can use to adapt it to your project. Alternatively, you can take inspiration from the php.net documentation to create your code. Our team recently embarked on developing a code to convert all WordPress photos to WebP format. The idea is to make a query in the database. Then list all the photos imported to the site and convert them to WebP. This is rather a success insofar as it allows to considerably reduce the loading time while avoiding us to do a manual conversion.

How the code works

You can code the file in your current theme and use the WordPress "include" function to add it to your functions.php file. We use a cron job to run the code. This allows you not to have to spend time repeating the same actions. Simultaneously, we added a parameter that helps identify when the code should run. Basically. If you include the code in your functions.php file and use the link below, you will be able to do the conversion.

Important:

  • We recommend that you use the code with caution. Indeed, we tested it on three websites. But, this does not guarantee that it will work on all websites.

Conclusion

You have all the tools you need to optimize your images. Whether you are a web development hobbyist, an expert or a business owner, you can choose the options that fit your needs. If you want to work with experts in creating custom websites, contact us .

Share :

npgilblas

Design of the Marie-Céline Montreal Institute website
09 May 2022
Six tips to help you improve your website security
20 July 2020

Do you have a project in mind? Contact our web agency for a free evaluation.

We are the experts in creating websites, online stores and functionalities for websites based in Montreal. Contact us today to create your website starting at $1,200.