IMAGE2Webp converts images into WebP and AVIF formats.
IMAGE2Webp (opens new window) helps you convert images into next-generation image formats, WebP and AVIF 😀
# Samples
TIP
Some images might not be viewable if your browser does not support WebP or AVIF.
# JPEG
Original JPEG (279KB)
WebP (80KB) Compressed to about 28%
AVIF (186KB) Compressed to about 66%
TIP
Although AVIF is often described as lighter than WebP, I have actually found that WebP is sometimes lighter than AVIF. I think this is often the case for relatively large JPEG images with a lot of colors.
# PNG
Original PNG (20KB)
WebP (12KB) Compressed to about 60%
AVIF (4KB) Compressed to about 20%
# What is WebP?
WebP is an image file format with both lossy and lossless compression. It is developed by Google, and according to Google's measurements in November 2011, a conversion from PNG to WebP resulted in a 45% reduction in file size. WebP format can be expected to improve user experience in your websites and reduce server load.
However, it's a relatively new file format, so actually some browsers and image viewers don't support this format yet. If you want to provide WebP format files in your websites, you have to put them with PNG, or JPEG format files so that users with legacy browsers can find content correctly.
# What is AVIF?
AVIF is an abbreviation for AV1 Image File Format, an image file format specification for storing images or image sequences compressed with AV1 in the HEIF file format. In many cases, AVIF can be expected for higher reduction in file size than WebP. However, there are only few browsers which support AVIF and, in addition, there are few systems or services which help you convert image files into AVIF format files.
If you want to provide this file format in your website, you should note you have to provide other alternatively formatted files like PNG, or JPEG with them.
# How lighter are WebP and AVIF actually than traditional image formats?
You can use IMAGE2Webp (opens new window) to try out how lighter WebP and AVIF are, but as far as I usually use this, WebP and AVIF images are around half the size of the original images on average. Because WebP and AVIF images are quite lighter, they can reduce server load and contribute to higher performance and better user experience.
# What is the best practice?
As written in the above, legacy browsers may not support either WebP or AVIF. Some browsers may support WebP and may not support AVIF, and if a browser doesn't support AVIF, possibly it doesn't support WebP either. In many cases, AVIF and WebP are lighter than legacy image formats like PNG, JPEG, or GIF format, so the best practice would be like this:
- If AVIF is supported in user's browser, AVIF files are provided.
- If WebP is supported in user's browser, WebP files are provided.
- If both AVIF and WebP are not supported in user's browser, PNG, JPEG, or GIF files are provided.
As described above, you can write HTML code like this:
<picture>
<source srcset="/path/to/AVIF" type="image/avif" />
<source srcset="/path/to/WebP" type="image/webp" />
<img src="/path/to/PNG_or_JPEG" alt="" width="..." height="..." />
</picture>
2
3
4
5
6
7
- If both AVIF and WebP format files are not supported,
<picture>and<source>are ignored.