The AVIF Format is the next-gen image format based on the AV1 video encoding format. AV1 was created and is developed by the , a consortium formed by Mozilla, Google, Cisco, Netflix, Amazon, and other companies. The main idea behind AVIF is to take advantage of the compression algorithms originally developed for video in an image format. Netflix for images across its applications because of the superior quality this format provides while keeping the image size low. Alliance for Open Media believes that AVIF has potential All the major browser makers are closely involved, directly or indirectly, in the development and promulgation of AVIF. So why should you care about it? https://www.youtube.com/watch?v=ouUgppbKvlk&t=169s?embedable=true AVIF Benefits: Lighter Images Without Sacrificing Quality It’s an exciting time for image compression. WebP has been gaining momentum as a JPEG replacement, but now, AVIF has arrived, out-compressing WebP in nearly all cases. In fact, the AVIF image format provides greater reduction in file size when compared with JPEG, PNG and WebP formats. The advantage is that the compression algorithms were originally developed for video in an image format. With AVIF, users have seen file sizes drop by nearly 60% compared to JPEG and 35% compared to WebP, with no loss in quality. In addition, the AVIF file format supports lossy and lossless image formats, as well as transparency. The AVIF image format is an image format that supports any image codec. AVIF is available today in web browser versions used by a large number of web users: Google Chrome 85 and beyond Mozilla Firefox 86 and beyond Android Safari on iOS 16.0 and beyond (For a list of browsers that support AVIF, please see .) the AVIF section on caniuse.com Source: https://caniuse.com/avif* AVIF In Action The AVIF format is best suited for images that contain specific details that need to be preserved, for example, gradients, text and graphics in movie posters. Its performance and quality is great when you use compression. If you are reading on an AVIF-capable browser such as recent versions of Chrome, Firefox, or Android, you should see three images below: An AVIF image 9KB in size The images are comparable in quality, yet the AVIF image achieves significant reductions in file size. By using AVIF for image compression, you can reduce the image file size even further and gain additional benefits: A WebP image 12KB in size A JPEG image 16KB in size Faster page loading times Better SEO rankings (Search engines like Google reward page loading speed, especially on mobile) Lower bounce rate Improved customer satisfaction Lower bandwidth costs , a German-based football media company, saw page load time accelerated by 26% and first time to interactive time accelerated by 24% after enabling automatic AVIF conversion. OneFootball imgix & AVIF Since making AVIF available at imgix, our users have seen file sizes drop by nearly 60% compared to JPEG and 35% compared to WebP, with no loss in quality. , one of our first customers to implement the automatic AVIF format conversion, has seen a 30% decrease in file size. Unsplash https://twitter.com/OliverJAsh/status/1441095716227543042?s=20&t=R1kCrCUHCqOCp6XlI-GS9Q?embedable=true Just like Unsplash, you can automate image format conversion by using imgix. Through the use of the parameter, imgix will automatically serve images in AVIF for all browsers that support it. For browsers that don’t yet support it, the imgix rendering API will fall back to the next-best available format. If is set and the browser does not support the AVIF format, we'll first fallback to WebP if it is supported. If WebP is not supported, imgix will fall back to the source image type or to any format specified by the fm parameter. Image quality and website performance is great when you use compression within the AVIF format. ‘auto=format’ auto=format Future-Proof Your Images It can be a cumbersome process to create, manage, and serve different formats of images for different purposes. Copying images into different formats can also incur a huge storage cost over time. Instead of deciding which image format to serve for which environment, or constantly debugging the complex interaction between data and images--imgix does it all for you. Working with an image optimization partner like imgix that serves the AVIF format means you are future-proofing your images and setting yourself up for success as technology continues to advance. As new standards enter the market, we will constantly evaluate and innovate so you can stay ahead of the curve. Try this feature free by signing up for . an imgix account Also published . here

HTTP Live Streaming (HLS): Why It’s the Best Protocol for Video Streaming

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

Sign Up for Free

AVIF Is the Next-Gen Image Format You Will Hear a Lot More About

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps