Q26: Image Formats

[00:00:00]
>> All right, so match the image formats to the descriptions. We have JPEG, PNG, or Ping, apparently, it's pronounced ping, I never knew that. We have WebP and AVIF, and then we have both lossy and lossless compression, supports HDR and WCG, supports transparency. And we have both lossy and lossless compression, supports transparency, supports progressive rendering.

[00:00:19]
Our 3 is lossless compression, high quality, supports transparency ,and larger file size. Or 4, lossy compression, supports progressive rendering. It's not really a description, it's more like characteristics, I guess. All right, so we have A, JPEG for lossy compression, supports progressive rendering. We have PNG or ping for lossless compression, high quality, and supports transparency, also larger file size.

[00:00:50]
Then we have WebP for both lossy and lossless compression, supports transparency, and supports progressive rendering. And AVIF for both lossy and lossless compression, supports HDR and WCG, and supports transparency. So first, when talking about JPEG, ignore that animation. But yeah, with lossy compression, this is a method for data compression where some of the original image data is discarded just to get a smaller file size.

[00:01:17]
So this does mean, though that the image quality is often worse, but you can kind of achieve a good balance between size reduction and an acceptable image quality. Cuz it's not in all cases that we need to have the super high res image. Then we have progressive rendering.

[00:01:34]
[LAUGH] Is this animation just gonna be the whole time now? The back is a kind of progressive rendering, cuz that's often what you see when you visit a website. And first, the image is super pixelated, and then slowly it's becoming sharper, that's progressive rendering and JPEG supports that.

[00:01:50]
Okay, sorry about that. And then there's also faster decoding, cuz devices can decode them really fast and display them really quickly without using any significant processing power. Next is PNG, this is just the image I got from Wikimedia or something. So this is lossless compression, so it doesn't get rid of any of the original image data.

[00:02:13]
So this is perfect for images where you really need to get these super defined sharp edges like those, like your logo or any text, stuff like that. Where with a JPEG, it could have been kind of pixelated, because of the lossy compression. This one doesn't. It also supports transparency, which JPEG doesn't.

[00:02:31]
Like in this photo, it has a transparent background. So yeah, you can kind of have those images with semi transparent elements as well with PNG, but because of the lossless compression is larger and file size. But in some cases, that is fine. If you just wanna have this super fine or refined image, that's okay.

[00:02:52]
Then we have WebP, which is a newer image format. This one supports both lossy and lossless compression, so you can kind of configure that yourself. It also supports transparency, so it's a pretty good alternative for both JPEG and PNG, cuz it also supports progressive rendering. So we have the good progressive rendering of JPEG, and this transparency from PNG.

[00:03:16]
And this one is pretty good for stuff like this, maybe an e-commerce or anything where you kind of show these smaller pictures in a lot of them, because WebP's size is much, much smaller than JPEG. Yeah, it offers a much better compression than both JPEG and PNG, but yeah.

[00:03:36]
And then we have AVIF, which is not as widely supported. I mean WebP is pretty well right now, but AVIF is newer and not as well supported. This also supports both lossy and lossless compression, same as WebP. But this also supports the high dynamic range and something called the wide color gamut.

[00:03:53]
I think you pronounce it gamut, I never know. It allows you to represent images with a much bigger contrast and much more richness and colour to it. Yeah, also like the luminance level. I believe is included in that high dynamic range. So for example, this picture is super colorful and it has to be super sharp, and AVIFF is perfect.

[00:04:14]
But often, the decoding and encoding takes a lot longer than with the other image formats. And of course, the browser support, there isn't as much browser support for it yet. It also supports transparency, again, same as WebP. So it's perfect for web background, transparent backgrounds, stuff like that.