The WebP format is a modern image format

Seo Nov 4, 2023
The WebP format is a modern image format

The WebP format is a modern image format developed by Google. It uses lossy compression, which allows you to store images in high quality with small file sizes. WebP supports both static and animated images. This format has become popular among web developers because of its ability to improve web page loading speeds due to smaller image file sizes. It also supports transparency, which makes it a great choice for logos and other images with alpha channels.

Viewing images in WebP format is supported by Google Chrome (starting with version 9)[9] and Opera (starting with version 11.10)

Android supports reading and writing WebP images starting from version 4.0

All modern browsers support the WebP format and can be used on a regular basis, especially where png format with a transparent alpha channel is used;

Let's take an example Картинки (1750x1750 32bit 1.49МБ)
Convert it to Webp with the help of Бібліотеки 

<?php

require 'vendor/autoload.php';

use WebPConvert\WebPConvert;

$source = __DIR__ . '/origin.png';
$destination = $source . '.webp';
$options = [];
WebPConvert::convert($source, $destination, $options);

 

Результат

As you can see, we saved 88% of the size on just one image. Another advantage of webp is that this format is chosen by Google and when checking PageSpeed Insights, it will be a plus;

Compatibility

But it's not that simple. As we can see from the table above, there are still browsers that do not support the new format and here you need to somehow get out and still show the picture to the user. One of the options is to use  <picture>

<picture>
  <source srcset="img/WebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/old.jpg" alt="Alt Text!">
</picture>

This is probably the best option to ensure the widest possible compatibility, as it will work in every single browser, not just those that support the element. The reason for this is that browsers that don't support the element will simply show any source specified in the tag. If you need full support, you can always use the Picturefill super script from Скотта Джела (Scott Jehl).

Using WebP images in CSS

The situation becomes more complicated when you need to use WebP images in CSS. Unlike an element in HTML, which gracefully reverts to an element in all browsers, CSS does not provide a built-in solution for fallback images that would be optimal. Solutions such as using multiple backgrounds result in both resources being loaded in some cases, which is a big problem for optimization. The solution lies in identifying device-specific features and format support.

Modernizr - is a well-known feature discovery library that identifies available features in browsers. WebP support is one of those features. Even better, you can build your own Modernizr build with just WebP detection on https://modernizr.com/download, allowing you to deploy WebP support with very low overhead.

When you add this custom assembly to your website using the <script> tag, it will automatically add one of two classes to the <html> element:

The webp class is added when the browser supports WebP.
The no-webp class is added when the browser does not support WebP.
With these classes, you can use CSS to load background images according to the capabilities of the browser by specifying the class in the tag:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

 

Brief conclusions;

WebP is a universal image format that we can use instead of PNG and JPEG (if supported). It allows you to significantly reduce the size of images on your site, and as you know, anything that leads to less data transfer reduces page load time.

Are there any disadvantages? There are a few. The biggest one is that you are storing two sets of images to achieve the best support, which may not be possible for your website if you have a huge set of images that you need to convert to WebP. Also, you will have to do some work with JavaScript if you need to use WebP images in CSS. Another consideration is that users who save your images to disk may not have their default browser set to view WebP images.

 

Sources used: css-tricks

 

Telegram чат