Using Modern Image Formats

[00:00:00]
>> So now, let's say that the LCP is already there as soon as possible. We have already hacked a little bit our code to make our Largest Contentful content as soon as possible. What about the rest of the content? Well, first, we should use modern image formats, not just PNG or JPEG.

[00:00:19]
SVG can be one, but also we have WebP, AVIF or A-V-I-F, Guetzli JPEG, Zopfli PNG. Okay, let's go one by one. WebP, it's called WebP. It's currently available in every browser, including Safari, okay? And it's much better than JPEG and PNG, it can replace both. It was created by Google, it's open source.

[00:00:46]
AVIF, it's like WebP 2.0 kind of. And today, it's only available on Chrome and Safari, but only on the Mac, not on iOS, there is a mix there, okay? So Guetzli JPEG, by the way, Guetzli, Zopfli, Brotli, all these are German names used by Google to define these compression algorithms.

[00:01:15]
That's why it's so complicated if you are not a German speaker, okay, Guetzli, Zopfli. Guetzli JPEG, it's a new compression algorithm for JPEG files that is using the same JPEG format. That means that it can be rendered on IE6. It's not a special format that is on a special browser, it's just a different way to encode the file.

[00:01:37]
And something similar happens with Zopfli PNG. It can compress normal standard PNG that works everywhere even more. But AVIF and WebP are completely different formats, different containers, so you need a browser compatible with those formats, okay? How to deal with these image formats. By the way, before doing that, if you're doing GIFs or GIFs, it's a very bad idea on your website, because that format come from 1989.

[00:02:12]
It's actually really, really bad for performance, it's not optimized. You can use animated PNGs, animated WebPs, but the compatibility is kind of weird, and it's much better to use in mute video. You can do an MP4 mute, there is a Boolean attribute mute that works everywhere and it's much better.

[00:02:32]
There are many tools to work with images, but I encourage you to try Squoosh. Squoosh is a progressive web app created by the Chrome team. It's open source, and it lets you convert images. You can do it manually, like what I'm doing right now or I will do right now.

[00:02:52]
By the way, it's 100% PWA client-side. I can install it and use it as a Mac application or a Windows application. It is a PWA, and it's 100% client-side, which means that your images are not being sent to the server, everything is converted client-side with web assembly. So I can drag and drop one image.

[00:03:13]
For example, I can take my LCP image, that is the one that I wanna compress first, and I'm going to take ancient-greece and paste it here. No, it doesn't work. Okay, let's try again. Let's look for the file. It's in public> in gallery > ancient-greece, there we are.

[00:03:37]
And here we can see the difference when we are changing formats. So this is if you want JPEG, AVIF, okay, or WebP. So here, you can see the original and how the new one looks like. If you don't like it, well, you play with the quality, or if you want lostless, you don't lose any, any details.

[00:04:04]
And here, you can see how much space you will save. So the same file, in this case, I'm not even losing quality, and it's saving already 40% of the size. So then you save it, and I'm going to save this on the same file, public > images, but no, images, no, in gallery > ancient-greece.webp.

[00:04:31]
The problem is, what should we do with the WebP? Should I change this to WebP? I can, but what if we still have some users browsing with an old browser? Well, instead of doing this, what I can do is I can keep my PNG there and use picture.

[00:04:51]
Have you used picture before for responsive images? With picture, you need to put the IMG, and what you are going to set its alternative sources for that picture. And I can set one for the type. So if it support image/webp, I'm going to set the source as gallery/ancient-greece.webp.

[00:05:13]
And I can have also the AVIF version, and many versions, and even when using media queries, one version for mobile, one version for desktop. And when doing this, the browser will pick the right one. Does it makes sense? And also, I should add the fetchpriority as high. Fetchpriority there, because it's our LCP image, right?

[00:05:44]
We want high priority. But now, if the browser is WebP compatible, it's going to take that one. That is 40% smaller, so it will appear faster. We are saving milliseconds, remember, we wanna save milliseconds. Does it make sense? Squoosh, remember, it's a free app, you can use it as squoosh.app, squoosh.app.

[00:06:10]
But also it has a version that is a CLI. If you search for a squoosh cli, it's on NPM. You can request conversions directly from the command line. So you can even make a little script that will do that for you in every image, converting into WebP, resize it in different formats.

[00:06:36]
So you have a nice tool, also open source, to help with batch conversion. Does it make sense? Yep, so you can see that we are applying a lot of techniques at the same time, but each technique is saving a little bit more, a little more, a little more, a little more, until we get into our budget.