Unlock faster websites & better images: meet AVIF!

There are few things that matter as much as speed when it comes to running a business online. I know it, I’ve been building websites for over two decades. Slow-loading websites will drive customers away faster than you can say “abandoned cart.” And what’s one of the biggest culprits behind sluggish sites? Images.

Many times, website developers will consciously sacrifice speed to make sure the visuals look good.

Luckily for all of us, those days of sacrifice may be over. There’s a new image format blowing up on the web that could be a game changer for your business: AVIF.

You may not have heard of it yet, but trust me—you’re going to want to get familiar. Whether you’re an e-commerce store, a marketing agency, or running a media-heavy website, AVIF has the power to improve performance and boost your SEO rankings without sacrificing image quality.

Here’s why you need to pay attention.

Understanding AVIF

What is it?

AVIF stands for AV1 Image File Format. It’s the new kid on the block when it comes to image formats, and it’s already shaking things up. AVIF uses the same technology behind AV1 video, allowing for superior compression (i.e., smaller file sizes) while maintaining top-notch quality. Think of it as an upgrade from older formats like JPEG, PNG, and even WebP.

Where did AVIF come from?

AVIF was developed by the Alliance for Open Media (AOMedia), a consortium formed in 2015 by major tech companies, including Google, Mozilla, Netflix, Amazon, Microsoft, Cisco, and others.

The stated goal of AOMedia is to create open, royalty-free media formats that improve efficiency and performance across digital platforms.

The AV1 video codec which AVIF is based on was developed by AOMedia to offer superior compression for both video and still images. By using AVIF, the consortium aimed to provide a modern image format with better compression, reduced file sizes, and higher visual quality compared to legacy formats like JPEG and PNG, all without the need for expensive licensing fees.

Why Should Your Business Care?

We think anyone involved in the online omniverse should be paying attention to AVIF because…

1. AVIF = Lightning-fast website performance

Ever clicked on a website and waited… and waited… and then gave up? You’re not alone. Most people leave if a page takes longer than 3 seconds to load. AVIF images load faster because their file sizes are much smaller. This means faster page loads, which can lead to higher user engagement and, yes, even better SEO rankings.

2. Smaller files, same quality

Unlike JPEG or PNG, AVIF provides the same—or even better—image quality at a fraction of the file size. Whether it’s for product photos, blog images, or banners, you get the best of both worlds: stunning visuals that won’t slow your site down.

3. SEO Boost

Speed plays a major role in SEO. Google loves fast-loading sites, and with AVIF, you’re checking that box. The recent August 2024 announcement from Google confirmed full AVIF support for indexing, which means now’s the perfect time to get ahead of the curve. This “We’re all-in” announcement seems to be the checkmate move everyone was waiting for. There is a buzz about AVIF that I haven’t seen since it entered the market in 2019.

By adopting AVIF, your site could see a bump in search rankings, helping you attract more traffic.

4. Transparency & Color Depth

AVIF supports transparency, making it ideal for logos, icons, and other graphics that need to blend into various backgrounds. On top of that, AVIF offers richer colors and better contrast, which is great if your business deals with photography, fashion, or any type of visual media.

We’re not done yet. AVIF delivers more…

5. Mobile optimization

Mobile users are a huge chunk of your audience, and guess what? AVIF shines on mobile. It’s light, loads fast, and uses less data—perfect for customers browsing on slower connections. This can make a big difference in keeping users engaged on the go.

6. Lossless and lossy options

Need to preserve every detail of an image? AVIF has you covered with its lossless compression option. Or, if you need to save even more space, you can opt for lossy compression, which reduces file size without noticeable quality loss.

7. Future-proof with HDR

High Dynamic Range (HDR) is the future of displays, offering more vibrant colors and deeper contrasts. AVIF is HDR-ready, making it a smart investment as more devices support this technology.

The cons of using AVIF images

1. Not all browsers support it

No technology comes without its bumps in the road, and AVIF is no exception. It’s still rolling out across browsers, and as of September 2024, 93% of browsers support AVIF.

But there’s an easy workaround…

Not to worry though, it’s easy enough to include fallback options like WebP or JPEG for older platforms. Several plugins are already available for WordPress that convert all your images to AVIF and keep the original version as a fallback to load when a browser that doesn’t support AVIF is detected.

2. Some popular apps don’t offer native support

At the time of writing this, next-gen image formats like WEBP and AVIF cannot be downloaded from Canva.

For this too, there is a workaround…

At Artist Dynamix, we’ve had to download our files as JPGs or PNGs from Canva and then use an app like Photoscape to convert to WEBP.

This means there’s the extra step of converting your images to AVIF using another app (Or you can upload them to your site as JPG and have a plugin automatically serve them as AVIF. See below).

Apps that you can use to convert your images to AVIF include Squoosh, GIMP, XnConvert, ImageMagick, IrfanView, Photoshop (with Plugin), FFmpeg, CloudConvert, and Converseen.

How to upgrade to AVIF

There are several ways you can include AVIF images on your website.

1. Plugins

Plugins like Imagify, ShortPixel Image Optimizer, Optimole, EWWW Image Optimizer, WP Compress, Smush, and LiteSpeed Cache make it super easy to incorporate AVIF images into WordPress websites. They provide different image compression and caching support and all support AVIF (And WEBP, another next gen image format that was all the rave before AVIF came along 😭).

2. Manual Conversion and Upload

Convert your images to AVIF format using the tools mentioned above, or command-line tools like avifenc. Then, manually upload these AVIF images to your website alongside other formats like JPEG or PNG, providing fallback options for unsupported browsers.

3. Serve AVIF via CDN

Use a content delivery network (CDN) like Cloudflare, BunnyCDN, or KeyCDN that supports AVIF. These CDNs automatically serve AVIF to browsers that support it, while falling back to other formats for browsers that don’t.

4. Custom Code for Conditional Loading

Implement custom JavaScript or HTML to detect if a user’s browser supports AVIF. If it does, load the AVIF version of your image; if not, fall back to WebP or JPEG. This can be done by checking the image/avif MIME type via JavaScript.

5. Using <picture> Element in HTML

Use the <picture> element in your HTML to specify different image formats, allowing the browser to choose the best one. Include AVIF as the first source, followed by WebP or JPEG for fallback support.

<picture>
   <source srcset="image.avif" type="image/avif">
   <source srcset="image.webp" type="image/webp">
   <img src="image.jpg" alt="Your image description">
</picture>

Need help with optimizing your site?

If you already have good hosting and a well-designed website, AVIF is the biggest step you can take to speed up your website today.

It is your ticket to faster load times, better SEO, and stunning images that won’t bog down your site, but you might have questions or are not sure if you should start your website optimization with something else. Get in touch with us and we’ll answer your questions and help you get your site up to speed. Literally.