Oh yes, one more thing we should care about. Even more new techniques are shown to us when we need to test our development. Page load time has been a hot topic for website improvement, not simply because of the increased demand from mobile visitors but because of potential lead and customer losses. In September 2010, Google introduced a new image format for the web, WebP. AVIF was developed by Alliance for Open Media (AOM).
More lighter your website development is, best performance points it’ll receive!
What is WebP?
Created by Google, WebP is a modern image format for the web that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG, and GIF and is designed to supersede them. Using WebP, you can create smaller, richer images that make the web faster.
What is AVIF?
AOM developed AVIF to provide royalty-free images with better compression efficiency and more feature support compared to the existing image formats.
How to Use them?
- One is by converting your old images.
- Converting existing images
- Creating WebP/AVIF images using supported image editors.
- When using WordPress.
Converting existing images
You can convert your existing images to WebP and AVIF using image conversion tools or online services like convertio. These services support various image formats and provide straightforward conversion options.
The best article I’ve found on converting WebP is Downloading and Installing WebP.
Creating WebP/AVIF images
If you are working with new images or have access to supported image editing software, you can directly create WebP and AVIF images using tools like AnyWebP, XnConvert, or ImageMagick.
When using WordPress
But if you are using WordPress development, I recommend using the plugin called the WebP Converter for Media. It can take care of your switch to WebP and AVIF (pro version) with a few clicks. With just a few clicks, this plugin can handle the conversion and ensure compatibility with the formats.
Converting images to WebP and AVIF simultaneously guarantees the lowest weight of your images and compatibility with all browsers. By using the AVIF format you will reduce the weight of the images even more compared to WebP.
How to use them on your code
Considering not all browsers still support both formats, (You can check on caniuse), the best way of using it is with the tag <picture></picture> and specify the sources. This way, the browsers that don’t support will just display whatever source is specified in the tag. Example:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>Comparing
If you want to compare your image side-by-side, I suggest you use this awesome web tool, Squoosh.app. This tool allows you to compare images side by side and even adjust the image settings to find the optimal balance. On this app, you can even adjust the image!
By converting your images to WebP and AVIF, you can reduce their file sizes, improve loading times, and enhance the overall performance of your website.
Hope this article helped you!
