 Awesome, is this working? Everyone can hear me? All right, look, I even got a title slide. Just look the red, just look that, yeah. All right, there it is. Cool, I'm gonna talk very quickly about images on the web past, present, and future. This is gonna be kind of a history of images on the web. So kind of looking at three phases, or two phases, the legacy formats that we're all familiar with, like GIF and JPEG and PNG, and then the more modern formats that are newer, that are coming, or that have been around for a little bit like WebP and Avif and JPEG XL. And we're gonna get into what's the pros and cons of all these image formats. So we're gonna start with the legacy formats. By the way, kudos to Imogen, our internal image generating tool at Google, similar to like stable diffusion. So all these images I just made by typing in fun phrases. So thanks to that. The JPEG format, or the, I'm sorry, the GIF format is 35 years old, which is pretty amazing. It's been around for 35 years. Before that, we just had like ASCII images on the web. I don't remember those. But GIF came around, it's supported everywhere. You can use a GIF pretty much anywhere you can use an image. It has animation, that was very exciting when it came to the web with animation. And it has transparency. So you could put a GIF image over a background. Pretty nice feature. And it has lossless compression. So the images that you get are a little bit smaller than what you start with. And when you decompress them, they're lossless. They don't lose any information. They're exactly what you started with. Pretty nice. But it had a limited palette, 256 colors. I remember a lot of dithering to try to overcome that. But it is a limitation of the format. And the compression had issues. When it first came out, there were licensing issues. The underlying compression algorithms were owned by large corporations. And the free software movement was hesitant to adopt GIF for this reason. Also, no one knows how to pronounce it. Is it GIF? Is it GIF? I'm using GIF, but you can, I don't know, keep arguing about it after the talk. And finally, these are the downsides. By the red is down. The lower ones, these are good things. Animation, I'm really not sure that's the best thing for an image format. You know, we have these like this kind of thing appeared all over the web. And honestly, animation in an image format, probably not the best. Probably should just be using a video format for that kind of thing. Then along came JPEG, 30 years ago. Wow, this is like a long time ago, in my mind. It's supported everywhere, right? I mean, you can use a JPEG anywhere you can use an image. It's got lossy compression. This is pretty significant. Because now you can take an image and compress it down to 10 times smaller than you started with. And then when you decompress it, you get something that's not exactly the original, but it's very close to the original. That's the lossy part of it, you lose some information. It's also variable, right? You can choose what compression level you want. You want a really high quality image, you choose 95. If you want a small image, you can choose 40. And you'll get a little bit less quality, but much smaller file size. So this is an innovation of JPEG. It also offered up to 10 times size reduction, like I mentioned, and also full and accurate color. So unlike GIF, now you had color profiles and full 24-bit color. It has progressive decoding, which is a really cool thing. You probably have seen where JPEG images start out blurry, and then the details come in. So even as the page is loading, you can get a sense of what that image is going to look like before it loads. It's 30 years old. This is a downside. Compression has improved a lot since then. We've been really working on compression, video compression, and newer image formats, as we'll see, do a much better job at compression. Also, progressive decoding is great, but we actually don't get progressive decoding in WordPress because the back end that handles image recompression when you upload your image to WordPress is going to be either LibGD or Imagic, the two libraries that PHP uses, neither of which supports the progressive decoding. So we actually don't get to benefit from this in WordPress. Then along came SVG. SVG is 21 years old. It's very widely supported. You can use it almost everywhere. It's got images that scale. It's vectors, so it can scale to any resolution. That's a pretty amazing feature. It's very, very efficient for illustration type images, much more efficient than the raster formats. And you can style it with CSS, which is amazing. You can add colors or overlays. You can do rotation. All kinds of cool things you can do with SVGs that really don't work as well with regular images. It's also scriptable and interactive. You can put JavaScript right inside an SVG and have it be interactive. That's amazing for an image format, right? Actually, no, that's not great. Because it's scriptable, that means it's also insecure. Someone can put a malicious script inside an SVG file. You upload it to your website, and then visitors to your website are going to get infected by a virus. It's not quite that simple, but for that reason, we don't support SVG to this day in WordPress Core. If you want to use SVG in Core, you have to get a plug-in, something to let you do that. So it's really only suitable for certain images, and you have to be careful about how you use it. Then along came PNG 15 years ago, relatively recent, as image formats go. It's supported everywhere. It's really a successor to the GIF format. This was the licensing concern that I talked about. This was intended to replace GIF, and also overcome some of its limitations, right? So it had full and accurate color. It also introduced this concept of alpha channel transparency, where the transparency wasn't just pixels that were on and off, but the pixels could have a variable level of transparency. And this allows PNGs to have a smooth edge when you place them over a background, which is different than how GIFs were. They were always kind of very blocking at the edges. It doesn't support animation. I'm not sure if that's really a negative, even though I have it in the negative column here. It only has the lossless compression, so no lossy compression like JPEG, unfortunately. And now I'm going to take a little side tour before we talk about the modern image formats to talk about how to think about image quality. So these are two images that are compressed with JPEG. One of them is compressed at a very high quality level and one at a very low quality level. Can anyone tell the difference? No. You can't tell the difference, because up here on this slide, it's been recompressed. It's displayed at a resolution where you can't see the difference. And it's very hard, in general, to tell the difference unless you look very closely. If we were to zoom in to some of the very fine details, you could tell that the one on the left is 1 megabyte, 90 quality. The one on the right is quality of 40. It's 70% smaller, the file size. But part of the point here is what I'm showing you is the file size you need, the quality you need, depends on the context that you're going to be showing the image in. If the image is going to be a small image, a thumbnail image, it can probably be compressed to a much smaller size. If you're a photographer and you want to show your images at full resolution, you probably want to use a much higher quality. So the context that you use your images in matters. How do you know which image looks better? Well, you can use an algorithm. There's all kinds of algorithms like DSM that compare the structural similarity of an image to the original and give you a numeric number. It's a 7, it's a 10, it's a 9. You can also put humans in front of images and ask them, just like we're doing over in the Google booth, by the way, you can come play my little image game. And you can ask people, which image looks more similar to the original? And if you do this enough, over and over again, you actually gather data and you can figure out what quality you need to use to meet human perception, which is different than algorithmic perception. So in the end, you do this study. You get a bunch of data, whether it's from an algorithm or people. And you wind up with a chart like this that tells you at a given file size or compression level, what's the quality of the image? And this one here is comparing the WebP format to the JPEG format. And what this chart shows you, because the red line is always to the left and above the blue line, is that for a given size, the quality of WebP is better. As you get up into higher qualities, that difference disappears. That's what the chart is showing us. So let's talk about the modern formats, and then you'll see why I was talking about the quality. We've got WebP. I love this image with the goat. It's 12 years old, so it's actually almost, it's been around for a while. It's pretty much supported everywhere. So every browser supports it. You can use WebPs almost everywhere. You can use JPEGs. It's got lossless and lossy compression. So that is a pretty significant thing. This is the first format that offered both of those. Before, if you wanted lossy, you had to use JPEG. Lossless, you chose another format. Now, this format actually has both. It has animation and alpha transparency. Again, combining features that previously only different formats had. So now you can have an image that's lossy, but also has alpha transparency. So it can be much smaller than an equivalent PNG file would be. It's got the full and accurate color of JPEGs with the color profiles and high color. And it's also fast at decoding. So this is important. And you'll see why on the next couple slides. That means when the browser gets the image and it has to decompress it, it's relatively quick for it to do so. It is a little bit slower at encoding, though. So when you upload images and you want to compress them into the WebP format, that takes more work on the server than doing the JPEG compression. And there are some support coverage gaps, especially once you download a WebP image and start to use it in a non-Web context. Like if you try to upload it to another service, you may find that WebP doesn't work there. And that's a concern for some users. Then we move on to Avif. Avif is three years old, so really brand new and still evolving, right? These formats are not static. The tooling that drives them, like the libraries, are constantly being updated and improved. But Avif is very modern. It is well supported in growing. Safari recently announced support, so that'll be across iOS, macOS devices. I think Edge is the only outlier now that still doesn't support Avif. It's, again, like WebD. You've got the lossless and lossy compression. It's got animation and alpha transparency. It's got full and accurate color. And it's got very high compression. 50% over JPEG in general. 50% improved compression over what we get currently with JPEG. So even better than what we have with WebP. It's a little bit expensive at encoding and decoding. This is a downside. It takes quite a while for Avif to do the compression side. And also, when the browser decompresses the image, it's slower than. And this is something they're actively working on. But this especially affects users with low-powered devices. If you're on a high-end MacBook Pro, you're probably not going to notice this. But if you're on a lower-end smartphone, you are going to see a difference in how quickly these images actually show up. Even though the image is smaller, it may take longer to appear for you. And there's definitely some support coverage gap. The most notable is on the server side. So as I mentioned, when you upload an image to WordPress, that has to get recompressed to the different sizes on the server. And that's using PHP. And in order to do that, to use Avif, you need PHP 8.1. And we know that WordPress is not quite ready for 8.1, and not many people are using PHP 8.1. So that is a limitation. Then comes JPEG XL. This is like the most promising format ever. It's like a cat hang-lighting. It's one year old, so it's like the baby among all the formats. It has everything, right? Losses and lossy compression, animation, alpha transparency, full and accurate color. I'm repeating all the things from before. And then it gets into these amazing cool features. This is really cool that it does losslessly re-encoding JPEGs. This means you can take your compressed JPEGs and recompress them in the JPEG XL format without losing any information. Usually when you take a compressed image and then you try to recompress it, there's kind of this amplification, I guess, of the artifacting. With JPEG XL, they've overcome this problem. They've managed to get smaller sizes without that. And they have a really cool way of doing the progressive decoding where you can actually say, I would like this part of the image to get the information first. Am I done? Yeah. OK, I'm going to wrap up here. It's supported nowhere. That's the big disadvantage of it. Not on the server, not in the browsers. So we hope support will come one day, but not yet. All right, I think I'm out of time. I'm out of time, right? Am I out of time? Yes. OK, cool. I'm going to just say goodbye then. Thank you. That was really all I had. Thank you.