Ranking the best Image Formats

Let's talk about image formats and which ones are the best to use for the web. A lot of times developers spend quite a bit of time microoptimizing their applications and worrying about rerenders in React. But the reality is the biggest gains are when you optimize your assets because if you ship a 1 megaby JPEG image compared to a 100 webp image, you're really going to see some significant speed gains. So, let's start this list off with one that's you might not recognize the file format here. It's BMP. If you do, congratulations. You're really old. But this was one of the OG raster image file formats. This is before even JPEG came to the scene. So, this came out in the 80s and it was made by Microsoft. And the whole idea was to make it really simple for software to read and write uh this format because it didn't do any fancy compression or anything like that. Instead, it's a lossless compression. So when you hear lossless, it means that it's not doing any compression on the colors um or different there's a bunch of different types of compressions, but and lossy, which is something like JPEG, they do compression there. So, this is lossless, meaning that unfortunately the file sizes are quite large. So, you're not really going to see this used on the internet at all. Um, if I show you, I have an image here. This one here, the sample, it's 7 megabytes large, and this is only a 1080p image. So a BMP file literally gives you a 7 megabyte file. If you go up to 4K, this image would be 51 megabytes. So really large. Now since it doesn't do any compression and stuff like that, it's really fast to like read and write with files like this, but that's pretty much it. I wouldn't really recommend using it anywhere these days. So, for that reason, we are going to take BMP and I'm going to put it on the D tier list. Let's go to TIFF. This has been around since like the 80s as well. The big advant it's still being used to this day. Actually, you're going to see TIFF being used for publishing and editorial work or professional photography because it had a rich set of metadata. So, you could store a lot of technical information in that one file. And this one file also supported a bunch of stuff like having multiple layers in it. So you could actually store multiple images in one TIFF file, which is super cool. And it would also support alpha layers and masking. So yeah, if if you know TIFF, you probably need it uh for your professional work. But I'm going to go with it in the C tier. I should also mention that what's cool about TIFF is that it acts as a wrapper uh around how you it essentially gives you the flexibility to either compress or export the file as lossless. So that's pretty cool. Okay, there's one more that actually came out before JPEG here and that's GIF. Okay, so this came out a long long time ago and actually GIF was meant as a simple static image format, right? So you could literally just use it as a JPEG, right? To just upload your pictures, but it had the feature in it to actually store multiple frames. So you can actually create an animation with it. And it became really popular on the internet to do that, right? All of these gifts here. Now the thing is these are newer GIFs. So unfortunately the GIF format became synonymous with these short looping meme videos, right? But newer GIFs that you see online are actually just like short MP4 videos with like H.264 encoding. So it's not even the GIF format. Now, I'm not really a big fan of the OG GIF format because the color range support was really low on it. This is kind of how you usually see GIF images look like where it only supports like 256 uh colors if I'm not mistaken. So, not too good. Uh file sizes tend to be quite large on it as well, which I don't like. And it doesn't support proper like alpha channel uh and transparency. Sorry. So, if I want to cut out this cup from here, from the background, uh, you wouldn't really have a good way to do that. So, for that reason, I'm going to take GIF. I'm not really a big fan of it at all. I'm going to put it in the D tier. And it is GIF. It's not GIF. Fight me on it. Let's go. Um, okay. Next one. Let's go over to PNG because GIF and PNG, they were actually beefing quite a bit in the early days of the internet because GIF decided, hey, I want to make some money and I want to patent uh patent uh the technology so I can get some money out of developers. And a couple of developers got together and they were like, "Nope, we're going to make an open- source version and we're going to call it PNG." uh which was like pretty much not GIF or something like that. I don't really remember. But what PNG gives you a big advantage is that it has full well it's patent free which is great. Uh but it gives you full transparency and that's something that something like JPEG doesn't really have. So if I take this image for example and I try to cut out this portion. There we go. Let's do that. All right. I can select this part. I'll just mask it out. There we go. Cool. So, there's nothing there. I can go here and export it as a PNG. And there we go. And that is 2.5 megabytes here. So, one thing that PNG uh does is not only you get the transparency, but the format is uh lossless. Okay? So it doesn't really compress anything for you. So usually you tend to see the file sizes still be pretty big. So this is 2.1 megabyte which is is is not too good because there's way better options out there. So it was primarily used for this and that's pretty much it. Uh especially for logos and stuff like that that were raster based logos with like really interesting fonts. Again, you probably don't see people do that anymore, uh, because you just have SVG. Uh, so yeah, for that reason, I'm going to put PNG. It can go in the C tier because it just has the compatibility. You can use it anywhere really. All browsers support it. So, it's just one of those things as JPEG, which I'm going to already put here in the C C tier. Uh, kind of matching PNG. We live in the age of AI and as a software developer, it's becoming harder and harder to adapt and to keep up with all the new technologies that are coming out. That's where today's sponsor, Brilliant, comes in Clutch, offering thousands of interactive lessons on computer science, math, and even AI. I highly recommend you check out their course, How AI Works. There's a lot of technical jargon when it comes to AI, like what's a stable diffusion model, what's quantization, distillation. you'll learn everything about it here in a really nice interactive and visual way. The reality is people are not spending an hour of their time on long boring lecture videos anymore. Instead, with Brilliant, you have nice short uh little lessons that you can hop on to any time of the day. Uh when you're sitting on the toilet, I'm not judging. You can do whatever you want. Uh but it kind of gives you that freedom that you can just pick up a lesson, do it, and boom, you're done and you learn something for the day. So check out Brilliant by heading over to brilliant.org. org/developed to enjoy 20% off your annual subscription and also a free 30-day trial. You can also scan the QR code right here. And thank you so much, Brilliant, for sponsoring this episode. If you don't want transparency, you're going to opt to something like JPEG. So, kind of the same thing, but what JPEG does really well is it's a uh applies a compression on the image. So there's different ones out there, but usually it's like taking the image and separating them by 8 by8 blocks and then looking at that block and trying to see uh kind of the complexity in the image. Sometimes you might have areas like this where it's all purple here, right? So it would just like take the average of those colors and compress it uh to to keep it simple. Whereas BMP um TIFF and PNG would store the raw pixel value. So it would be like okay this pixel has this value let me note it down this pixel has that value. Whereas it when you apply this compression here it's essentially going to say something like well it's going to be 10 of the same color value here in this row. Boom. Right? So it just stores that once and you can actually save up quite a bit of space. So remember this is a TIFF file, sorry, a BMP file that's 7 megabytes. Okay, so let's do a export here as JPEG. And I'll just go down to let's see medium here is 286 kilobytes. So what a save here. That's crazy. That's like 20x 25x. We'll export it as medium and then let's compare the qualities. So there we go. 286. We'll pop it on top here. I'll just line it up and zoom in. Let's find a good spot here with these lines. And if I toggle between them. So there we go. That's the JPEG. And this is with the JP. This is the BMP. JPEG BMP. So as you can see, it takes a lot of these kind of blocks and tries to smoothen them out. You're going to lose color detail essentially here uh to reduce the amount of data that gets stored. And it results in more like blur, harder edges, unclear edges. Uh, but this is like, look how zoomed in I am. If I zoom out, maybe even here. I don't think Yeah, I could barely tell the difference anymore. And if you're zoomed all the way out, then I honestly can't tell the difference. So, this was the perfect way to store uh photography and raster type images on the web. As soon as JPEG came out, wow, this is amazing. Now, as much as I like it and as much as it's supported, it has to stay in the C tier because in 2010, Google came around and said, you know what, let's make a really, really sick uh format that just supports all the cool features. So, WEBP, WEBP came around and it essentially does way better in compression than JPEG. And it also is smaller in file size and supports transparency. It supports animation. So you can imagine you take PNG and JPEG together. They have a baby and webp comes out. So let's take the same 7 megabytes here image the BMP and we'll export it as webp. We can compare the quality. So here we go. WEBP we'll do best quality here. It gives 1.4. 4 megabytes. Let's try to match the JPEG one. So the JPEG one is 286. Okay, we'll go there. That's 320. So really close to it. We'll export it and compare the qualities. Let's drop it in here. WEBP. Line it up. Okay. Now, if let's just compare it between the JPEG and the WEBP to see if there's any quality difference. Okay, so the JPEG and automatically I can see it's way clearer. That is so much better. So you can actually see the edges here. It might still be hard to show up on the YouTubes. Uh but there's a significant difference that I can see. Oh yeah, way better. Now if we actually compare it with the BMP, which is the original, barely. There's barely any difference anymore. So, how crazy is that? You get the same compression with slightly better quality as well. Well, almost matching the original. That's actually insane. From here already, you cannot really tell anymore. And then if you're zoomed out here, zero difference. So, webp is is is really good. And again, what's really nice now is I can take this webp image. And if I do the same cutout I did before and export it. Remember how big our PNG was with 2 megabytes? Well, let's get rid of that top portion and export it. There we go. And let's do webp medium. There we go. 220 kiloby. It's a 10x reduction. Next file format I want to talk about is SVG. And this is the first format that is now vectorbased. Meaning we're actually just using math to calculate paths and then shapes and circles and rectangles. And what that means is that the file sizes are really small because we just store kind of the coordinates and values and we let the browser calculate that for us. So it results in really really small file sizes. You have a Twitter logo like this go for even 2 three kilobytes, okay? Rather than a JPEG that would be 50 to 100 kilobytes. So it's really great for logos. It's really great for text as well, right? That's really clear. H I find it so funny with these comparisons where they have JPEG versus SVG. There's loads of these, by the way. And then when you check, well, that's not actually an SVG. It's still an image. It's still a raster image format. What is this? You can Oh, this is Is this a good comparison? Let's see. Anyway, I kept going on these comparisons and they're all images. They're not bloody SVGs. Uh, but yeah, if you want to use it for logos, it's great to do there. You're also going to see it used in animations. So, they're really easy to animate. Then you have tools like uh Lotty for example and Rive H that allow you to do something like this where you can load up an SVG and then animate different paths and shapes on it. And these result in quite small uh sizes like look this whole animation the 7 kilobytes. So pretty pretty cool. I really like SVG. Um yeah I just like the freedom it gives you to animate and do a bunch of fun stuff with it. So, for that reason, I'm going to put it in the A tier as well. Now, last one. This is a really new one. You might have not heard of it, but it's called AF. And the gang that's behind AF have they essentially have a video version of this, like a video encoder that's called AV1, which is keep an eye on that. If you're looking for a way to do video, AV1 is amazing. Uh there's other video formats like H.264 264, which is the like most standard one that you're going to see being used kind of everywhere. You have HEVC, is that the Apple one? That's a nightmare. Lots of patent issues. You're going to find different places that doesn't really work or it's not supported. So, it's a really annoying format. But AV, anyway, let's talk about AI. This is essentially pretty much everything that WEBP can do from transparency, alpha channels, and it improves on all of that front. So, compression with AVA formats is 20 to 30% better than WEBP. And you also have new features in it such as white color gamut and you can also do HDR, which webp doesn't have. So, it's a pretty bulletproof uh bulletproof way uh to to store everything. And I highly recommend you browser support is really good on it, too. I would honestly just rock this as my go-to. And I have a WEBP as a fallback. Uh AV support. Let's have a look. I haven't looked at it in a while. 96%. That's pretty great. IE, we don't care about IE. Opera Mini Yeah. Whatever. Yeah, that's great. Now, my application here does not have a way to export this AVF, which is really annoying. Affinity Photo, please. Goodness sakes. But let me do a conversion here, and then we can compare it with WEBP, JPEG, and the original BMP. So, the bottom one here is JPEG, top one is AIF. And look at the JPEG one. Look how ugly it is. This is the same size. Look at the blotchiness there. And all of these pixels here just look really bad. Uh, you can there's barely any detail there in the trees. And if I turn AF off, look how it cleans all of that up. And even this line here, see this white line? You cannot even see it in the JPEG version. It's almost invisible. So, wow. The quality difference is enormous. Now, just quickly, would be fun to also compare AVIF to WEBP. So, let's drag that in. Let's see WEBP. These are identical in the size now. So if it looks any better, that's a big W. Okay. So this is WEBP. Let's turn WEBP off. And again, slightly better quality. Look at the WEBP version in the sky here. It might be hard to see, but there are all these little blotches everywhere, which looks really bad. And if I turn it off, look at that. It all gets cleaned up. How nice is that? Wow. So, AIF is the way to go. And for that reason, AF goes in the S tier. And I absolutely love this format. Let me know if I missed something. I'm curious to hear what you use out there. And I'll catch you in the next one. Peace.