Our telephone

+44 7734 236137

Our WhatsApp:

+44 7734 236137

Опубликовано: 15.06.2021
Web technologies

Using the WebP format on a website

Using the WebP format on a website

Let's take a look at the benefits of using images in WebP.

1. High image compression while maintaining quality

2. Faster page loading when using WebP

3. Support for alpha channel

As a result, WebP retains and combines the advantages of the .jpg and .png formats.


In 2021, the part of mobile traffic may reach 88-92%. The figure at first glance seems unrealistic, but it is quite achievable, considering the development of the mobile market. Accordingly, the faster the page loads, the lower the bounce rate, and higher positions can be expected in the search results.

The challenges of using WebP in 2021

Unfortunately, not all browsers support the use of images in WebP format, for example, Mac Os, iOs, and iPad's Safari still do not support this format, so some tricks are required. You will learn about them in our article.

Using WebP in CSS

The first and the easiest way to use the new format in CSS is to use the modernizr.js from the js library.


How to use it:


Follow the link


Select the Webp item and click the “Build” button, then transfer the downloaded file to the folder with js files, connect the script to the page.

When loading the page in different browsers, you will see the no-webp and webp classes, which corresponds to the browser's support for this format.



In CSS, you need to write the following rule


/* backgrounds */
.webp{
  #section-1{
    background: url('../images/main/banner.webp') no-repeat center/cover;
  }
}
.no-webp{
  #section-1{
    background: url('../images/main/banner.jpg') no-repeat center/cover;
  }
}


The less obvious way is to use the @supports rule


background: url('../images/main/banner.jpg) no-repeat center/cover;
@supports (background: url('../images/main/banner.webp')) {
    background: url('../images/main/banner.webp') no-repeat center/cover;
}


The third way is to use the visitor's browser detection libraries


For PHP you can use browser_detect.php


[data-browser="Safari"], [data-browser="iPhone"], [data-browser="iPad"] {
 // Your style
}


Js - user.browser.family

For instance


if (user.browser.family === 'Safari') {
  body.classList.add("no-webp"); 
}

Using WebP in HTML

Everything is much simpler here and all browsers have the required support, except for IE version 11 and lower.


<picture>
 <source srcset="img/image.webp" type="image/webp">
  <source srcset="img/image.jpg" type="image/jpeg">
  <img src="img/image.jpg" alt="alt image">
</picture>

The <picturetag allows you to define several types of images to display, if webp support is available, the webp version will be loaded.


Also, this tag makes it possible to display different images for different screen sizes.


<picture>
  <source media="(max-width: 768)" srcset="img-for-mobile.jpg">
  <source media="(min-width: 769px)" srcset="img-for-desktop.jpg">
  <img src="img-for-desktop.jpg " alt="Alt image">
</picture>

How much faster can a page load by using the WebP format?

Let's have a look at loading in the Google Chrome browser and Mac Os Safari

*All browsers of the latest versions as of early February 2021


Google Chrome


The download speed in this example is 852ms



Mac Os Safari


Here the download speed is over one second.

Get a new website

Click here to proceed
Get a free audit.
Fill out the form to receive a free audit of your website. We will reveal both its strengths and weaknesses.
, ! Your request for the website audit has been passed successfully.
We will send you the results on the next working day back to your email - !
Thank you for choosing our studio!
Get a free
consultation
Email us if you are ready to take the first step towards your new and improved business.
, , your request sended successfully,
our managers will contact you soon!