Hello World Master

Tutorials, articles and quizzes on Software Development

Web Development > Articles

What are AVIF images

What is AVIF?

AVIF is an image format based on the AV1 format used in video encoding. AVIF’s image compression allows it to hold images in a smaller file size than JPEG images or even WebP encoded images.

Why use AVIF?

Decrease the amount of data your users download

Since AVIF image file sizes are smaller that means that users visiting your website would be downloading less data from your website than if you were to use JPEG images.

This is important because not everyone has fast data connections to quickly load images. If an end user sees that a website isn’t loading, they’re more likely to bounce and leave the site.

In addition, not all users have access to unlimited data. Downloading images and video can take up a lot of data on on their data plan, leading them closer to either reaching their data cap or having to pay extra for more data. This can result in users being more conservative on visiting sites that notice consume a lot of data.

Downloading an image doesn’t just mean saving it in your devices storage, for the image to reach your device through the browser it must be downloaded

Increase your scores in Lighthouse and in Googles Core Web Vitals

Improves First Contentful Paint (FCP)

Downloading an image requires data to be transferred over to your browser and then rendered. How long this process takes could affect your FCP score in Lighthouse.

According to Google:

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

First Contentful Paint (FCP) (web.dev)

Text and Images are included in being part of the content that could be rendered first on the page.

Improve your Largest Contentful Paint (LCP) score

Largest contentful paint, of LCP according to Google:

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Largest Contentful Paint (LCP) (web.dev)

This score is actually be more relevant to implementing AVIF images than FCP, because with the right developer resources and knowledge, you can make sure the text content loads first and then the image is loaded afterward, even if the page is in the viewport.

If you have a site that has an image that the user should see immediately without having to scroll to see it, larger image file sizes could be contributing to the increasing a pages LCP score.