Image Formats

[00:00:00]
>> Todd Gardner: So where we left off is we're loading our image, our LCP image, as fast as we possibly could. It's being started right away, but it's still taking a really long time. And so next, we need to figure out how do we optimize that to send fewer bytes.

[00:00:13]
We need to send as few bytes as possible in order to show this image. And some of you might be asking, wait, didn't we already add HTTP compression? Isn't the image already as compressed as we can make it? And no, that's not true. Because HTTP compression works great on plain text.

[00:00:30]
But an image is already a compressed format. It's already optimized. And so if you run it through a text compression, you don't actually save very much. It's usually actually a little bit smaller sometimes, but it doesn't help that much. So instead, we need to talk about the images themselves, the images on disk, and we can talk about one, the format of that image, and then second, responsive images.

[00:00:57]
And both of these things are big performance wins first, let's talk about image formats. There's lots of different image formats. And they're all for different purposes. They've been built by different groups for different reasons. Here is an image. This is an image of my cool little sloth logo for Request Metrics, or one of my emoticons forward of him with sunglasses.

[00:01:21]
And so this is the same image in four different formats. Exact same image. You can look all day. You won't find any visual differences between these, but they're all drastically different sizes. The JPG in this case is the worst, at 13 kilobytes. The PNG, which is how this image was natively, is 5.5.

[00:01:44]
WebP, which is a broadly supported web delivery mechanism, is 2.7k. Or AVIF, which is a newer, slightly less broadly supported web frame, web image format, is 2.6 which is the smallest. Now, this used to be we talk about the difference between JPG and PNG, and the difference was basically photos or illustrations based on how much detail per pixel you wanted to capture.

[00:02:14]
The two frameworks were a little bit different, but in the last couple of years, WebP and AVIF support has gotten really, really good. And so largely, we can talk about those formats for serving the web rather than just JPEG and PNG. What you'll see here is that the difference between WebP and AVIF is very, very small.

[00:02:37]
Whichever one, you can easily use are greatly, are huge advantage over the other ones is like, either way, it's at least half the size, maybe even smaller. Now here's another image where the opposite is true about JPGs and PNGs. This is a straight up photograph of a sloth and the JPG in this case is smaller because it's better at compressing high detail images.

[00:03:06]
And so if I try and convert that into a PNG, the size balloons, because it's not the right format for that, but WebP and AVIF can easily handle either one. But both of those options, the difference in size is negligible, and quite a bit smaller than either of the other options.

[00:03:30]
Now, there's lots of cases where you might not need to use Web P, you might not be able to use Web P, and that's all right, there's lots of other tools that you can do. This is one of my favorite tools on the web. It's called TinyPNG. It's at tinypng.com.

[00:03:44]
And this is just a PNG compressing tool. PNG and all kinds of other image formats. And these are the same image run through TinyPNG. The left one is 57K, the right one is 15K. And it's just about running it through an optimizing for what data is being stored inside the PNG, you're not gonna be able to tell the difference.

[00:04:04]
So if you can't use WebP, still, optimizing PNG images in their native format is still a huge, huge help. So let's talk. Yeah, so we're gonna do a bunch of work around image compression here in a second. But at the same time we're gonna talk about responsive images, which is maybe the image size itself doesn't always need to be huge.

[00:04:30]
So sometimes we want beautiful high resolution, high pixel density images. If I view my sticker store on a desktop, on my retina display, I want a beautiful, high resolution image that looks crisp, so you can make everything feel nice and sharp. And so I might want to ship this image sometimes at 2800 pixels wide.

[00:04:59]
That is totally okay. It's a totally okay thing for you to want to do, but a lot of times people will be on a smaller screen or a non retina display or something like that, and I might only ship the same image at 720 pixels. On desks or on mobile I might ship a different image entirely at 600 pixels.

[00:05:18]
Or maybe I'll ship the same one at 300 pixels for a smaller Android device. So the same image or the same kind of class of image, I might want to render at different sizes. Right now, I just have Hero Desktop and Hero Mobile, which are these giant images that I'm sending down to everybody all the time.

[00:05:39]
I could save a lot of bytes if I just shipped a smaller image that was more appropriate for the size of the device that was being viewed