 Thanks everyone for coming That's tough act to follow that last talk, so I'm gonna do my best to be entertaining We're gonna do a brief history of images on the web So we're gonna look at legacy formats that you're all familiar with like GIF and JPEG and PNG and SVG And then we're gonna move on to modern formats that you've probably heard about but maybe don't know too much about Web P which we're landing support for in WordPress 6.1 And then a vif and JPEG XL which have some very promising characteristics So let's jump into the legacy formats and by the way all the images that you see here generated. We're generated by image n So I've got some fun images for you the GIF format is 35 years old and when I came out pretty much we had everything we needed for the web It's supported everywhere, of course you can use a GIF for anything it has animation. I mean that's amazing, right and Transparency so you could show the background through the back of the image and it had lossless compression So when you you get your image to be a little smaller But it was exactly the same information that you started with you didn't lose anything But it had a limited palette only 256 colors So we had to do dithering when we wanted to make photos and also there were compression issues One is the licensing issue. There were corporations that held copyrights to the LZW compression algorithm used in GIF and Also, it didn't do a very good job at compressing animation because it just compresses one frame at a time Unlike modern video formats that can compress based on the difference between each frame So it wasn't very efficient and finally no one knows how to pronounce it. Is it GIF? Is it GIF? I don't know just debate amongst yourself after the talk and Finally is animation really a good feature? I mean this is what we got from animation right a lot of this flashing all over the page And maybe that wasn't such a great idea for an image format Then along comes JPEG 30 years old It's supported everywhere, of course and it introduced lossy compression Right with a variable level of quality So you could choose the quality that you want it and the lower the quality the smaller the image would be This was like a revolution because you could suddenly achieve Ten times compression you're reducing your images to these tiny little images Which was really important at the time because we had dial-up modems and we were trying to make images that were all under 50 kilobytes You know so compression was really important and we would tweak our images to get them to where they still looked okay But they were heavily compressed and it also had full and accurate color unlike GIF It had a 24-bit color palette and it had ICC color profile So suddenly you could have images that in theory would show the correct color to people It was a little more theoretical than practically And it had progressive decoding which is pretty cool So that's when a JPEG image kind of loads blurry and then more details come in and it becomes sharper That's called progressive decoding unfortunately in WordPress We don't actually get progressive decoding because when you upload your image WordPress Recompresses that into several smaller sizes and the tools that we used to do that in PHP don't support This type of decoding or encoding for this type of decoding So you don't really get that in WordPress even though it's a great feature of JPEG So some downsides, it's 30 years old lossy compression has improved significantly And also the thing I just mentioned no progressive decoding in WordPress. All right, then along comes SVG 21 years old Very widely supported you can use them almost everywhere you can use images The images scale sharply. These are vector images not raster images So they can go to all different sizes and remain sharp So think of something like an illustration like a star and you can scale it to any size and it remains sharp. You can also Oh, it's also very very efficient for illustrations So if you have an illustration type of image that you want to use it's it's the format to use It's the most efficient way to store them. It's also styleable with CSS So you can take your CSS properties and apply a color to SVG or rotate it Which you can't really do with regular images All kinds of things right? It's also scriptable You can add JavaScript in there and make interactivity inside your SVG amazing. What an amazing image format It does everything except scriptable isn't really a very good idea for an image format because It introduces security concerns and for that reason to this day WordPress does not support SVG out of the box You can't just upload an SVG There's plugins you can get if you really want to do it But be careful like if you're taking an SVG from an unknown source and uploading it You might be compromising your website It's really only suitable for certain suitable for certain types of images, so it's not really for photography Then along came PNG The snail riding on the truck 15 years old it's supported everywhere It's a successor to GIF really like that's why it came about was to resolve these licensing issues with the compression that the Free software community at the time did not trust And it had some advantages had the full and accurate color and it also had alpha channel transparency Which meant that your transparency could be variable each pixel could have a certain level of opacity and that gave Images that showed the background through those smooth edges whereas before with GIFs. They would just be these very blocky Tough edges, so this is a pretty significant feature and PNGs for that reason are still very widely used for things like product images Where you want to have really good color quality high resolution No loss of quality and also that transparency showing through PNG didn't support animation not sure if that's really a minus but it didn't unlike if it didn't support it It also only had lossless compression, so lossless compression is good It gives us a little bit, but unlike JPEG you couldn't really like dial down the compression if you really wanted to make a small image So briefly I want to take a little side tour and talk about image quality because when we get into these newer image formats It's hard to compare just image size. We need to think about what is the quality? How good does that image look when we compress it? So if you look at these two images, I'm guessing that especially people who are at any distance and even me here I can't really tell the difference the one on the left is you know quality 90 1 megabyte and the one on the right is 70% smaller you can't tell the difference because you're looking far away at a screen with low resolution and those images have been recompressed as I added them into the slideshow so my point here is context matters The quality that you need to use for your image depends on where the image is going to be seen And at what size if it's a tiny little thumbnail It's okay if it has some pixelation But if it's your furor photographer and you want your images to be really gorgeous on your site and they're displayed at full screen You know on a desktop you need to use a really high quality. So the context matters So how do you know what the quality of an image is well There's all these algorithms that will help you determine You know how similar is the structure SSM or how much color loss have you lost with the PSNR the signal-to-noise ratio There's several other algorithms. I'm not covering here The algorithms try to methodically use an approach that gives you a very definite quality like how different is this image From the original image Unfortunately the algorithms tend to be biased right one algorithm will tend to produce better results for JPEG than for Web P or better results for a vif then for JPEG based on how they analyze the data and how the compression format where it's Kind of prioritized storing data. So some you know favor things that lose color or that lose details There's another approach to testing image quality and that is sitting humans down in front of screens You can use something like mechanical Turk from Amazon and get run through hundreds and hundreds of images and ask people Does this one look as good as the original? Does this one look as good as the original and when you do these tasks over and over again? What you wind up with is a lot of data about a huge set of images and you plot it out on a graph like this So it's not just looking at one image You're looking at many images and trying to see how that what pattern you can discern What's the trend or you take the medians and you put them on a chart like this Where you see the file size across the bottom and the quality as the across the left So what this chart shows you is it for any given quality, you know, for example 94 quality whatever that is the the web P which is red here is going to be a smaller size Then the blue which is JPEG and that pretty much holds true across the curve So the curve is showing you that across a range of sizes web B tends to be smaller Of course, that's not going to be true for every single image. These are these are medians, right? So we're looking at sort of the overall average Part of the point here, too, is that quality you can't talk about quality by itself And you can't talk about file size by itself. You have to talk about the two together So let's talk about the modern formats Web P is what's coming to WordPress next. It's 12 years old. So it's actually been around for quite a while It's very widely supported All the brown all the modern browsers support it Safari older Safari versions don't support it There's a couple other places that are not supported but really we can expect almost everyone to be able to use web bees It has both lossless and lossy compression. So this is pretty revolutionary This is combining features that different formats had before and what this allows you to do for example is use the alpha Transparency feature that we only previously had in PNG and use that with a lossy image compression So you can get something that's like 80 percent smaller than a PNG But still has that alpha transparency allowing you to show through the background. This was not possible before web B It also has full and accurate color, of course, and it's fast at decoding You'll see why this comes into play later. In other words, the browser can decompress the images very quickly It is a little bit slower at encoding than JPEG So the server has to do a little bit more work to create the web bees, but it's just a small increment It's not really a huge problem And there are some support coverage we have safari outlook on windows some open graph tag consumers, but really not much Next comes a vif a vif is about three years old It's well supported safari just announced support recently. I'm sure edge will come along soon It has both lossless and lossy compression animation alpha transparency full and accurate color and very high compression So you might get a 30% boost from using web P and you would get like a 50% boost from using a vif So significantly better. It's cutting the size of JPEGs in half Unfortunately right now a vif is very expensive in coding and decoding So very slow to encode the images when you upload them and also slow for the browser to decode Since it's a young format. This is something they're actually working on actively improving There's also some support coverage gaps the big one for wordpress is on the servers A vif is not supported until PHP 8.1 and wordpress does not really support PHP 8 very well yet So as we as a community move up to that we'll have access to this format But for now, this is not something we can directly support at least on the server in wordpress Finally JPEG XL It's brand new one years old It's got everything lossless and lossy animation and alpha full and accurate color and efficient in coding and decoding very high Compression just like a vif and then it has these new amazing features losslessly re-encoding JPEGs JPEG XL can take an old JPEG that you've compressed with lossy compression Apply its new more efficient compression algorithm without losing any information and save that back to your file It's an amazing feature. However, it's not that useful for wordpress The reason being that wordpress always keeps your original file around when you upload it So we can always go back to the original source when creating our new compressed version So we don't really need this feature at all And it has another amazing feature which is advanced saliency based progressive decoding Which is where you know that progressive thing that I was describing before where the image starts blurry and that's gets more focused This allows you to decide where that focus comes into play first So for example with a picture of a person against a background You could mask out the area of their face and have the face come into detailed focus before the the information from the background Loads so really cool decoding features Of course, you'd need some sort of authoring experience some sort of tool to sort of mask out those areas None of that exists yet and that brings me to my last point, which is that JPEG XL is not supported anywhere And it so it may never actually make it into the web. We don't really know at this point It is behind a flag in like Chrome dev I believe But it's questionable whether it will actually ever be turned on and part of the reason is it It doesn't really offer much of an advantage over avif and there is a limit to how many different image formats browsers will want to support So to wrap up Just a couple things about what you can do now to do the best with images on your site And what we might do in the future with images on the web So your best friend for right now is an image CDN Get set up with an image CDN and the image CDN can negotiate with the browser about what the best format It can accept is it can automatically generate all the formats and It's also going to resize images for you if you're if your markup has the wrong size. So it's really the one stop shop toolkit to solve all your image problems But there's other things that affect image loading that are important to consider You've got blocking CSS in your header That means the browser can't even get to the image to load it Also defer your scripts if you have scripts in the header that are blocking the browser again Your lcp your image is going to load more slowly doesn't matter how big the image is the browser has to get to it Upgrade your php get get on faster servers. That's going to you know affect your time to first bite It's going to affect when your images load. So my point here is that good images Also means good web pages that that serve those images And finally we're looking at this in the performance lab plug-in which is prioritizing the lcp image with a new Property called prefetch and this informs the browser that it should Prioritize the image that you've applied this attribute to so you would apply that to the main big image that you really want the browser to load first What could the future hold in my last minute? Maybe we could do format conversion in the browser with web assembly So you can actually run libraries like lib avif that does the avif conversion right in the browser So maybe we don't have to wait for servers to catch up or for wordpress to start using php 8.1 Maybe when you upload an image your browser could actually do the format conversion Maybe the browser itself could build in these conversion tools, right? We have applications where you click and you're like save as why can't we why can't the browser itself convert images for us? Build it has the decoding why not build in the encoding as well and take that a little further Why not build wordpress media entirely in the browser, right? We've talked about rebuilding wordpress media for a long time now And just like we rebuilt the editor entirely in JavaScript. It runs in the browser Why not do that with wordpress media and get access to these same compression algorithms using what wasm? And finally could wordpress serve as a CDN in other words Just like you hire an extra seed at image CDN Maybe wordpress itself could be your image CDN and do that generation of images Dynamically on the fly as you need them serve them in the correct format based on the browser's request That's it. I skipped a few things. Yeah, thank you But I have a link it's a bit Lee WC us dash web dash images dash talk I have all the links and also a few other things that I didn't get to in this talk like about how browsers decode images Which were on the description, but I I didn't really have enough time to get to them So I put some more links in that document as it also has a link to the slideshow and I'd be happy to take any questions Yes, it's bit Lee bit dash ly slash WC us Dash web dash images dash talk Cloudinary. Yeah, I mean Right or maybe wordpress.org could could be an image CDN He said could we just buy cloudinary? It would be nice if there was an image CA and built into somehow using wordpress But we're not quite there yet Yeah this might be a bit of a silly question, but just from like a Content sharing and in like image saving like with webp. Yeah It only like you can only like save as webp and none of that's like support on people's computers So like let's say for marketing or something just for ease of use You want to have like save this, you know image to your site as like a cheat or to your computer It's like a little cheat sheet or something like little resources like that that everybody in the world knows how to you know Download an image. Well now if everything's in webp, they don't know how to do that and that changes the way that we create content Do you have any insights into how webp can be either more shareable or? Easily converted into other image formats on download Yeah, so I do think the browsers have a role to play there like I really think chrome should have a save as jpeg option for webp's I Want to disagree with you a little bit about that you can't use it once you download it because most image applications and preview and most tools on Mac and PC do support webp now because it's been out for over 10 years One thing is there are many many sites on the internet that already are using webp as their primary image format So you probably already are visiting many sites that do this Once wordpress starts doing it the the number of sites is going to skyrocket And if you make a tool that doesn't handle webp, you're going to start thinking maybe I should make the tool So the answer is we adopt webp and the tool makers will follow us Hi, our neural nets opening up new frontiers and image compression I'm sorry. Can you repeat it our in our neural nets? That's opening up new Possibilities I don't I don't know anything about that, but I do know that like webp uses some sort of like predictive encoding I don't really know like how machine learning applies to Or neural nets apply to image encoding. I have read about some formats in Addie's book Sorry, I meant to have this out if you want to really deep dive into images This is a book by Addie Osmani. It's called image optimist image optimization And he actually goes into like how the algorithms work and there are some he actually talks about one that's very very slow But it does JPEG encoding way way more efficiently than any of the other JPEG encoders And I think it does use some kind of machine learning We're actually at time. All right. Thanks everyone