📝 CSS-Tricks 216: AVIF, Source Order Viewer, and UI frameworks

View this newsletter on the web.

AVIF has Landed!

Big news this week: a wild new image format appears! And, as Jake Archibald writes, it’s called AVIF and it just launched in Chrome, so you can use it today with the help of the picture element:

Why would you want to use this new format though? Well, that’s because AVIF is remarkably tiny. In Jake’s post he shows how AVIF can be under half the size of a WebP image, which is about half the size of the common JPEG. However! As with all things when it comes to images on the web, there are a few caveats that are worth reading about.

[Chris]: I love seeing innovation here. HTML and browsers are ready for new technology like this and give us the tools to take advantage of resonsibly. But be extra careful! This isn’t necessarily an “if support, then use it” technology. I’ve seen AVIF images that are double the size of the original, there are situations where it’s lossless encoding doesn’t look great, and other cases where WebP is smaller. So this really complicates image equations and provides a lot of opportunity for image CDNs to step in and help us make better choices without every image being a manual job.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s