Hasty Treat - The New AVIF Image Format Is Unreal

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott CSF

key.

Welcome to Syntax.

In this Monday, hasty treat. We're We're gonna be talking all about the new unreal image format called Avif. You know what the pronunciation on that? It's an image format. We had JPEG. We had Ping. We had PNG, whatever. Now we have Avif.

And let me tell you, it is very, very, very cool. It's also very Small. So we're gonna be talking all about what it is, why you might use it, how you might use it, and what the future looks like for AVIF. My name is Scott Talinski. I'm a full stack developer from Denver, Colorado, and with me as always is Wes Bose. Hey. Hey, Wes. This episode is sponsored by 2 awesome companies, one of which is Sentry at century.i0, and the other which is FreshBooks. Now Sentry is the perfect place to see all your errors and exceptions happening in your application.

It does an amazing job at cataloging all of your errors in its dashboard. It's very cool. And along with that, it gives you some really interesting features like performance Tracking tools that allow you to see just about every single route on your application and get the perfect metrics that you need to debug any sort of performance issues that are happening on your site. Not only that, but, you know, sometimes it's really easy to sweep those kind of things under the rug. Right? You know, I call this site's fast when I'm using it, but you don't exactly see what all your users are seeing all the time. And this is the kind of tool that's just already in all of the stuff that you're already using, so pop it into your Sentry application that you're already using. And guess what? Now you can see right in front of you Exactly how miserable your users are on some routes of your page. It's very, very cool. So head on over to century.i0.

Use the coupon code tasty treat, all lowercase, all one word, and you will get 2 months for free. Next sponsor is FreshBooks. FreshBooks is cloud accounting. You know what they do, your invoices, your expenses. One thing I'm gonna highlight in this ad read here is that You can hook it up to you directly to your bank and have your expenses automatically imported into FreshBooks. And I was just checking it out the other day and hooking up my own bank account, and they now support tons of banks, 14,000 Different banks. And in Canada alone where I am, the list of of possible banks as well as they they hook up to your PayPal, Which is really cool because, like, for example, my Cloudflare, I pay for my domains with PayPal, and that can hook right into PayPal and automatically import those expenses, Which is really slick as well as all the bank accounts you have. It can both do bank accounts as well as credit cards. So depending on on how you're paying for things, You get the imported there. Really slick. Saves you tons of time. Check it out, FreshBooks .comforward/ syntax for a 30 day unrestricted free trial. Make sure you enter Syntax in the how did you hear about us section when signing up, and thanks so much to FreshBooks for sponsoring. So let's get into the meat and potatoes here. And I'm

talking about Avif, the image format. Now right off the bat, I'm gonna say, I don't think Wes and I know exactly how to pronounce this, But I don't think that's anything new with image formats. I mentioned that off the jump saying JPEGs and whatever, JPG, whatever people call this. I'm gonna call it AVIF. Is that what you're gonna call it, Wes? I think so. It's Avif

Avif sounds weird. Yeah. Avif sounds weird. It sounds yeah. It's AV is AO media video. That's it's this format initially stems from video compression, and the I f stands for image format. So

a v I f? AVIF. Yeah. That's what it is. Let's go with that. Let's go with that. So to get off the jump, what is AVIF? I think The background on it, it's derived from like you said, it's derived from a video codec, and that video codec is the AV one video format.

This is a royalty free video coding format that was designed for video transmission over the Internet. So this was not a format that was designed for just display display, or whatever. This was specifically designed for transfer over the Internet. And so they basically took this a v one format and were able to create a new image Codec directly from the individual frames of an a v one video.

They're often seen as being so side by side, but at the same time, video compression has a bunch of issues that Image compression doesn't have and vice versa, I would say. So they are different beasts. So it's interesting to see that this is pulled directly from a video format. Another thing is that like AV one, AVIF is royalty free, which to me is the most exciting thing about this. Because in the past, video formats and image formats have been a huge topic amongst browsers because of ownership of those formats.

For instance, m p 4, not royalty free, and, m p 4 is owned by several people. And because of that, I I don't know who I think Apple owns part of it or they have their own QuickTime thing. Either way, the big meat here is really just that When something is not royalty free in any of these image formats, browsers are gonna be way less likely to implement it. Because let's say Google owns this image format. In Google, you have to pay Google royalties is to use this image format. That's gonna make Apple and Firefox much less likely to implement that in their platform or vice versa with any of those companies.

So by being a royalty free format, nobody's fighting for, essentially, control. It's not their format. They're not cashing in the bucks

when people are using this format. So I think that's a big deal, and it's nice to see a really, really hot new image format be royalty free. You might be saying, like, didn't we just get WebP? And, I I thought that myself. We had Henri Hovetica on, the podcast When we did I think we did our live show, and he said WebP was 10 years old, and Safari had just implemented it. The whole benefit here is that the AVIF files are tiny and can be used to compress stuff that you would traditionally use for JPEGs or WebP as well as things you would normally use at PNG for, which is really cool. Actually, does it have transparency?

It's actually a great question. It does have transparency? It does. It does. Yes. Cool. Because I did see in some of the comparisons, they were, like, talking about, like, that the AVIF format Was maybe a little bit less appropriate for something with, like, a lot of antialiasing, and then WebP was coming out on top in some of those situations. So that that'll be interesting to check out exactly When it will be most appropriate. One thing that I saw is they said in in situations where you would use a JPEG or even a WebP right now, They would said WebP was basically half of the size of a JPEG, and AVIF is half of the size of a WebP.

So not only are we getting faster Internet, faster browsers, faster download speeds, we're getting smaller images so that, therefore, anybody on a satellite connection, Crappy Internet connection over the the phone or or whatever. People who have those connections that are not fiber Internet hardwired to the dome, Those people are gonna be able to get fast loading times because the images themselves, which are often the clunkiest, heaviest things on your website, those things are gonna be smaller, and that's fantastic.

Jake Archibald has a blog post where he compares the differences between several types of images, like a photo of a race car that was Clearly taken with a nice SLR, but then also something that was, like, exported from Illustrator that's very simple colors and then also an that has transparent background, but also a gradient underneath it. And it's unreal to see. You can just click the tabs and see the difference between them, Both, like, if you go from the WebP, which is 50 k, down to the AVIF, which is 13 k, There's absolutely no difference that I can visually see between the 2. And then and other options are like, okay. But if they're all the same size, Like, what does a 14 k PNG look compared to a 14 k WebP versus a 14 k AVIF? And the The results is like, wow. That that's incredible that it does. I I think the only thing that it doesn't do is animation, which is Okay. Because you should probably just be using a muted video for that, not even a GIF anymore. But, man, I'm I'm so impressed at at how small these images can get. And, really, there's no discernible difference between the 2 when you're you're switching between them. The race car one, If you switch between them, the AVIF looks better

than the WebP, which is twice the size of it. It's astounding. It is astounding, the amount of size. We should say that this is a lossy format.

What you're kinda dealing with, it's inherently going to be a lossy format, as in Data is removed from the image. When you're taking this image and you're compressing it with a VIF, there is inherently going to be some data removed. Now the thing about compression engines in general, whether you're compressing audio, video, images, whatever, the key to compressing Is that you want to be able to remove as much as possible without degrading the visual aesthetic of the image or audio static, whatever. You want to be able to remove enough of the stuff that nobody cares about and that people aren't going to notice that it can reduce The bytes that you're shipping, but it won't reduce what is the visual output. That's why this format is so good is because it's able to Remove the information correctly or at least to the point where you have these really fantastic looking images, but also keep The file size is insanely small because at the end of the day, you have to think about this like an image or a video or audio. All it is is just shipping Bites of code that represents something, and then our brains are able to decode it via our eyes or whatever. So, like, if you think about it in those terms, all we're doing is Figuring out the right ways to remove information from something while keeping the end result to be as good as possible. And boy howdy, very good. There is a lossless option

with Avif. I was just reading.

But in that case, the file is much larger than Any of the other options. So, like, it's not something you should be doing. It should be a lossless version. Yeah. Or sorry. It should be loss lossy. Lossy. Which means that you do lose pixels or you do lose metadata about it. But the loss e version is it's even smaller than the SVG version of some of these things. So if you think, like, oh, yeah. SVG is the best version. If you don't need the benefits of the SVG, which is being able to target the pieces of it, Then this is possibly even even better option. Word, unreal, but real. Yeah. Let's talk about how to implement it. So, like, you're not gonna just be, like, opening up Photoshop and importing your images and save as and replacing them all. You're not gonna be hand coding these things because, Like, to be honest, a lot of these, like, next generation benefits, whether it's code splitting in your React application or whether it's using a new image format, you need some sort of robot to do it for you. Otherwise, it's it's just not gonna happen. Nobody has got time for that kind of thing. So you will have to lean on tools that hopefully handle your existing images for this type of thing. Cloudinary currently has this in beta. So Cloudinary is a sponsor of ours. You can but they're not sponsoring specifically this one, but you can pop the Cloudinary URL in front of it and tell it to format auto or form format AVIF, and then it will kick out the best possible option for that, which is pretty cool.

Gatsby now supports it in their latest version of Gatsby. So if you're using Gatsby image component, it will kick it out. Oh, and then, Also, I think, the thing we didn't we didn't say at all was you can support multiple versions of this because the Picture element. You can give it a source or source set and tell it, alright. This is the AVIF file. And if it doesn't support that Type, it will just fall back to whatever's next. So as long as you have a JPEG or a PNG at the end of the line, the users that have browsers that support it are gonna get the benefit from that. Yeah. And there's also this squoosh,

s q u o o s h.

Squish Squish. Squish.

Squish.

Squish. Squish. Yeah.

I'm set. Am I am I am I tripping here? Wes, am I am I tripping? I think you're tripping. You said squoosh. Squoosh. Squoosh. Squoosh. That's the same word. Okay. Whatever. CSF.

This app is really neat. One of the cool things about this is there's also a CLI to to be able to use this in your command line for compressing images. One of the neat things about this is I'm gonna go ahead and recommend you click one of the test app or one of the test photos. For instance, the 2.8 megabyte Red panda image is my favorite. I love Red Pandas. And this gives you a little draggy tool so you can see the exact difference between the compression algorithm. So let's say if we wanted to give it a try and there's a little drop down that allows you to select AVIF here, And you can actually adjust the quality. Now the cool thing is you can also pinch to zoom to, like, really get in. Like, I wanna I wanna see this cute little red panda's nose In AVIF versus the the original image, and, oh, boy, I'm seeing a a 70% reduction in size. This image went from 2.8 megabytes to 66 kilobytes, and this red panda's nose is looking as adorable as ever. So This is a really neat tool to give this a try, but also see this thing in action and see what what kind of benefits you can actually get out of it. But, again, there's also the CLI if you want to Try it out, or you can actually compress an image of your own by dropping it directly into the interface here. We should say support for AVIF is it's in

Most recent Chrome as of August 2020.

It's coming in Firefox a 6, which By the time you're listening to this, it should be out. So the fact that it's in Firefox and Chrome means it's in Edge as well And a lot of the Brave as well. It's not in Safari, like you probably could have guessed, But that shouldn't matter because of what we talked about earlier is that your tooling should just fall back to a WebP version of that. And then in 10 years when Safari implements it, it will just stop generating that one thing. We had a For years with, video tag as well Oh, yeah. You had to, like, have a o g g and an m p four and, what was the other one?

I mean, did Safari only do MOV? I I feel like that might have been a thing. Because Safari I don't know. At some point, Safari got an MP 4, but There was the whole format wars on on video, and and now it's even, like, continued into, like, the streaming formats as well. But, as long as you're able to get All of the fallbacks and everything in order, then everybody should be able to get something they'll be able to see, which is really what's important here. Another thing that to think about is, like, I don't know what the macOS support for AVIF is, but I did find this quick look plug in. Because that's actually one of the things that really bugs me about, like, web p And whatever that, WebM movie format is, you wanna do, like, quick look on your your Mac computer to see the file. Yeah. It, like, Has to open it in the browser or something. It doesn't give you the quick look. And so I did find a quick look plug in for AVIF. I haven't tried it. I'm gonna Right right now where you basically just drop this into your library quick look folder, and then you can do a quick look on AVIF files In your browser or in in Finder, in macOS. Yeah. That that's one thing I'm gonna have to get is I have this little right click convert to JPEG

On my Mac, because all the time is I airdrop a photo from my oh, it's not WebP. It's whatever the Apple Photo version is what is the Apple photo format?

Oh, gosh. The h e I c one the whatever one. Yeah. Heik, h e I c. Yeah. You know what? Okay. Let me let me rant for a second here. Yes. Let's hear it. You know what you cannot do on a Mac, on a iPhone? Say, it takes the photo in the h e I whatever, the the h crap Photo format. I don't know. Whatever it is. The format's fine, but it takes a photo in that. And so when you're on hold or you're on a chat support on your phone with an Apple service rep, and they'll be like, can you take a picture

of the issue? Will you take a picture of it, and then you go to upload anything, and there there are things like our image Flutter only allows JPEG or p n like, it's your format. You crazy. If it's your format, support it. Like, if if you're not gonna support it, nobody else is. Okay. The end rant. Yeah. Let's have a call to all developers is update your image uploaders to support Oh, yeah. IP Mhmm. Hike. Because, like like, the iPhone is the most popular camera in the world. And the fact that most websites that ask you to upload an image Camera's Especially, like Like, if I have to email a photo to somebody who I know is not even a lick technical or I know they're on a Windows computer, I, like, have to be like, oh, I have to convert All these images from Hike to JPEG, there's workflows you can do, but, like, you shouldn't be so. It's the most popular camera in the world. Why can't We support that everywhere.

Agree. Cosigned.

Stamp it. Push it. Push it live. So this this quick look that you just posted looks Super handy. So you can you can preview those values in your finder. Next. Yes. Does not have support for it yet, but there's a pull request in, So the code has been written. I'd imagine maybe even by the time you listen to this, that Next. Js's new image component will support this as well. I think that's it. Oh, there's 1 more, a v I f dot I o. It's just a drag and drop. It'll convert it to convert your JPEGs And web piece and whatnot to AVIF. So if you ever need to manually do that, you certainly can just drag drop it in. This looks like a really Slick one. These little these online image converters always make me a little bit uneasy. Mhmm. Like, the other day, I had to Upload that dot e m l file, which is an email file, and I had to convert it to PDF.

And I found this website that did it, but I was like, There's no way I'm gonna upload

contents of this, like, sensitive email to this random server. Yeah. You know they're they're they're copying everything. Yeah. Yeah.

But, like, I'm sure that that's not to say whoever built this one. I'm sure this one is fine. Oh, wait.

Note I'm so silly. Excuse me. It says, Literally, the first line on this website, no data ascent. The magic happens in your browser. So it's all happening client side, not Not server side. I think a good rule of thumb for a modern Internet user is to just assume that everybody's out to steal your stuff. Yes. And so I I don't think that's, anything you gotta apologize for, but I I cannot I cannot recommend

reading this Jake Archibald post highly enough. It is very, very good. It gives you a ton of information. It gives you a ton of examples. If this is the type of thing you're like, this sounds great. I gotta learn more. This blog post should be the 1st place you head to. A lot of great stuff there. Alright. I think that's it. Let us know if you're using Avouf in your own project. I'm curious to flip this on in my own website. I should like, I wonder what the difference would be in load times and whatnot when I flip it on From WebP to AVIF. Yeah. I'd have to find a blog post with, like, lots of photos or something like that to see what the difference is. For Cloudinary, you said it's in beta. How do we turn it on? Do you know? Have you checked? The docs say just put the f underscore AVIF as the format. Mhmm. Okay. And then it says, please contact us if you wanna use this in production.

So I would imagine that pretty soon that they would roll out the the A stable version of that. But, yeah, you could just pop that in your your thing. Or if you have auto on, I imagine that that would

start delivering AVIF by default. Eventually. Yeah. Cool. Awesome. Well, this is a great one. So I hope you really enjoyed this AVIF episode, and we'll be at you on On Wednesday with an episode about TypeScript. So check it out. Peace. Peace.

Head on over to syntax.fm for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.