The Best Free WordPress Tutorials to Master WordPress

WEBP vs. AVIF: Which Fast Loading Websites to Use?

0 667

We can say that the most popular image file formats for the web are JPG and PNG. Although WebP, developed by Google, came onto the scene a few years ago, which offers 30% smaller images than JPG while maintaining the same image quality, now AVIF promises 50% smaller images than JPG and maintains the same image quality.

So what exactly is this AVIF? Is it better than WEBP?

Let’s get into the details of this topic step by step:

What is AVIF?

AV1 Image Format or AVIF is the latest image codec in the world. AVIF images are typically around 50% smaller than the equivalent acceptable quality JPEG web file and can save much more with a nearly imperceptible loss of detail. The AVIF file extension is .avif.

Developed by the Alliance for Open Media (AOM), AVIF developed AVIF to provide royalty-free images with better compression efficiency and more feature support compared to existing image formats.

AVIF is also supported by big companies like Google, Netflix and Apple.

AVIF is compatible with high dynamic range imaging. It supports 10- and 12-bit color at full resolution, providing images up to 10 times smaller than other known formats (WebP, JPEG-XR, JPEG2000, PNG and GIF).

AVIF is a good choice for web developers.

You ask why?

  • It is copyright free, so you can use it for free without worrying about the license.
  • Currently Google, Amazon, Netflix, Microsoft etc. Backed by big companies.
  • It has optimal compression.

What are the Advantages of AVIF?

The first images in AVIF format were released by Netflix in February 2018, and since then more apps and companies have been supporting AVIF, albeit rather slowly. You can now also find AVIF support in Google Chrome, VLC or GIMP.

So what are the advantages of AVIF ? We have listed for you below:

  • It supports HDR, transparency and wide color gamut.
  • It provides the highest possible lossless and lossy compression.
  • Developers don’t have to deal with legal or financial hurdles.
  • There is no shortage of resources, as companies such as Amazon, Google, Apple, Intel and Samsung are behind it.

Why Is AVIF Better Than Other Compression Codecs?

Some of the features that potentially make AVIF better than its competitors are as follows:

  • AVIF supports High Dynamic Range (HDR), which provides better and brighter images.
  • AVIF supports both lossless and lossy parsing.
  • AVIF includes an alpha channel (see color subsampling) that gives images a richer touch.
  • AVIF provides 8, 10 and 12 bit color depth.
  • AVIF supports 4:2:0, 4:2:2 and 4:4:4 color subsampling and more
  • AVIF provides the highest compression in royalty-free format.

Along with these advantages, there is only one disadvantage, which is its availability in the market. AVIF is a fairly new image format. Although AVIF has received many accolades around the world, it still lacks browser support. Browsers are the primary medium for most images we see in everyday life. That’s why browser compatibility is so important.

Which Browsers Support the AVIF Format?

The first browser to fully support AVIF was Chrome 85. It is supported in the latest version of Chrome on desktop, but not yet Android, Firefox or Internet Explorer. Currently Microsoft has added support for AVIF in Windows 10, “19H1” updates. Although it is planned to be implemented in Safari 14 on Mac, AVIF still does not work in Safari in tests.

AVIF is a game changer that will soon become the world’s de facto image format. Due to its potential features, it is likely to gain full support on all platforms soon.

AVIF is not yet supported in all browsers, as it was developed for use on new, modern and cutting-edge devices. In the image below, you can see which browser supports the AVIF format.

  • Google Chrome started to support the AVIF format with version 85.
  • Internet Explorer does not support the AVIF format.
  • Microsoft Edge does not support the AVIF format.
  • In order for the Mozilla Firefox browser to support the AVIF format, the image.avif.enabled preference must be activated in the about.config settings.
  • Safari does not support the AVIF format.
  • Opera started to support AVIF format with version 71.
  • Apple devices with the IOS operating system do not support the AVIF format.
  • Opera Mini does not support the AVIF format.
  • With the Android 90 version, it started to support the AVIF format.
  • Opera Mobile started to support AVIF format with version 62.
  • Chrome versions for Android support the AVIF format.
  • Samsung Internet started to support the AVIF format with version 140.

How to Convert Your Old Images to AVIF

Since AVIF is still in its infancy, the easiest way to create images in AVIF format is to convert your old formats.

This can be done online with many online AVIF image converters.

You can follow the steps below to convert your images to AVIF:

  • Visit the website .
  • Upload your old images (can be PNG, JPEG, **GIF **and others).
  • Wait while the website processes the conversion.
  • Save your new AVIF files.

What is WebP?

WebP is a format developed by Google and announced in 2010. It uses both lossy and lossless compression to save on file size and is in the process of being implemented by major browsers.

WebP image files are up to 26% smaller than comparable PNGs and 25% to 34% smaller than comparable JPEGs, with no noticeable difference in quality. This allows webmasters to use images that are both high quality and small in file size.

The main advantage of the WebP format is that it can pack an image into a smaller file than other formats while maintaining comparable quality. This helps speed up your web pages without compromising the look of your images. Smaller image files also save bandwidth and device resources, which is especially important on mobile devices today.

Well, if the WebP format is so great, why is it only used by 1.3% of websites?

This is mainly because WebP is relatively new and has only recently been adopted by leading web browsers and image viewing/editing software. Today, the WebP format is supported in Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera browsers, as well as in the popular editors Gimp and Adobe Photoshop (although Photoshop support requires a plug-in to edit WebP files). However, image viewers such as Adobe Acrobat and Apple Preview do not support WebP.

However, WebP is not supported by all browsers and software. So Apple Safari and Internet Explorer do not support WebP. While this may change in the future, you should be aware of this limitation now. If you want to serve WebP images on your site, consider storing extra PNG/JPEG for users of these browsers.

AVIF vs. WebP 

WebP is one of the most popular image compression formats widely used in browsers today. WebP compression was developed by Google taking the VP8 video format. WebP is considered one of the most successful image formats transferred today (for compatible browsers only). When the PNG format dominates the image market, WebP provides a 45% reduction in file size when compressed from PNG. This is a great success. That’s why it was instantly adopted by Firefox, Opera, GNOME and many other browsers.

Now, if WebP is so widely accepted and provides both lossless and lossy compression, what’s the point of making AVIF native to those browsers?

The following differences will help you understand this situation:

  • AVIF provides a smaller size image compared to WebP.
  • WebP only works at 8 bit depth, whereas AVIF supports 8, 10 and 12 bits.
  • WebP only supports 4:2:0 channels while AVIF supports 4:2:0, 4:2:2 and 4:4:4 channels.
  • The image quality produced by WebP is inferior to AVIF or even JPEG.
  • AVIF supports HDR, which produces high-brightness images.

Which Browsers Support WEBP Format?

The WebP format is supported by Google Chrome, Firefox, Opera and a few other browsers. With iOS 14, Apple added support for Safari and the upcoming macOS Big Sur.

The WEBP format has a greater frequency and breadth of use than the AVIF format. Many browsers support WEBP format over AVIF format.

In cases where both WEBP and AVIF formats are not supported, it is shown to browsers that support it with software development, while older and more common formats such as JPEG or PNG can be used in browsers that do not.

Should I Use These Formats Yet?

Although WebP is much closer to being an industry standard, neither AVIF nor WebP are yet standard file formats.

If you’re a web developer, you need to make sure the correct file format is delivered, so it’s a good idea to choose formats with more support.

But when Photoshop introduces native support for these formats, AVIF or WebP may become mainstream. But just as JPG is replacing the GIF and TIFF formats that preceded it, we can expect the transition to these new and cost-saving formats within a few years.

You might also like
Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More