Image compression deep-dive

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

Jake and Surma going into technical details with image compression. As well as showing of their compression web app / playground squoosh.app.

If you’re into making the web smaller, with smaller images and you’re a beginner or expert. There’ll probably be something for you in this 30 min video.

👍︎︎ 1 👤︎︎ u/sleepydevguy 📅︎︎ Jul 17 2020 🗫︎ replies
Captions
[MUSIC PLAYING] JAKE ARCHIBALD: Hello mate. SURMA: Hello! JAKE ARCHIBALD: This is like remote 203, isn't it? It's good. SURMA: It's-- yeah. It's weird. It's like, we have almost all the technology that we need to make this work without feeling different. But it's still different. JAKE ARCHIBALD: We'll let other people be the judge of that, if it works or not. SURMA: That's true. JAKE ARCHIBALD: So, I'm here to talk about image compression. It's something I've been wanting to talk about for a long time, right? SURMA: I mean, we wrote an entire app around it. JAKE ARCHIBALD: We did. And we are going to be seeing that as part of this talk. SURMA: Nice. Like it. JAKE ARCHIBALD: If you look at the studies they do across web pages, like, images are like, the biggest thing on the page. SURMA: 50%, roundabout, of each page is just-- 50% of the bytes that go over the wire for any given page are on average images. JAKE ARCHIBALD: Yeah, and sometimes for fun, I'll go and take just like, some images from a web page and like, re-compress them. And usually, I can half the size of them without losing any of the visual fidelity. So it's just like, so much stuff on the web can just be compressed better, either by using a different format, a better encoder, or just like, better settings within a particular encoder. SURMA: Yeah. That's what I found as well. I've recently done a little experiment and found like, even without like, going into like, the very deep settings of an encoder, often people just don't optimize their images at all and just like, doing the default setting in Squoosh will already give you a really decent compression rate without losing visual fidelity. JAKE ARCHIBALD: So if you're watching this at home, if you're the kind of person who just like, saves you images out of Photoshop for the web, then this is the talk for you. Because I have things to discuss. Because I think you're missing out on huge performance gains. So I want to dive into image codecs. I to show how they work. And I want to explore some of the lesser known settings. So here are the formats. Right? We've got Lossy, JPEG and WebP. We've got Lossless, PNG, GIF, and Also WebP. And-- SURMA: Hang on, my friend. Hang on. You put GIFs under Lossless? JAKE ARCHIBALD: They are Lossless. They are-- SURMA: With their 256 colors? JAKE ARCHIBALD: Yes. But you make that change before compression. Like, the GIF compressor won't accept images more than 256 colors. That's a step you have to run before the compression. It's Lossless, trust me. Because we are-- SURMA: Fine. JAKE ARCHIBALD: --doing the same for PNG as well. But I've got a question for you. If you have a digital drawing, like a drawing that has been created on a computer, which format would you use for this? SURMA: If at all possible, SVG. JAKE ARCHIBALD: Yeah. I agree with you. Because a vector can be any resolution. So it's ideal for drawings. But sometimes the drawing's really complex. So they're actually smaller and much faster as a Lossless image. But then again, if the drawing has a lot of gradients and shading, it might actually be smaller and acceptable in a Lossy format, without it looking bad to the user. So a lot of the talks and articles I see about like, image compression, they try and bucket kinds of images into formats. And I think that can be misleading. So instead, what I want to do is I want to talk about what these formats actually spend their bytes on. SURMA: Yeah. JAKE ARCHIBALD: So, Lossy images. It's like sharp edges. They really struggle with that. That will increase the size of the image. And also, small details in undetailed areas. That kind of sounds confusing. So we'll look at a few examples of that in a moment. For Lossless, it's color change, especially unpredictable color change. It's another thing we'll look at some examples of that. And also total number of colors impacts the file size as well. With Vector, number of shapes and also shape complexity. There's a little difference with Vector. And that's the complexity of the shapes. We'll actually introduce a CPU cost in the way it doesn't with the other formats. So that's something to bear in mind. That's the TLDR of this talk, really. That's it. That's it, done. SURMA: Well, thanks for doing this. And I'll see you next time. JAKE ARCHIBALD: Bye bye! No. No. I want to get to know these codecs in detail. I'm going to dive in. SURMA: Well just to be clear, these are categories of codecs, as you said. Like each of these categories has multiple codecs to offer. And I think the basic advice should be that you just try the same image. Like, if you don't know which category your image falls in, just try the image and all of these codecs. That's kind of the ideal process, right? JAKE ARCHIBALD: Yes. But you can make some educated guesses based on your knowledge of how these things work. So, Surma, have a look at this. I know this is difficult because you're watching this over a WebRTC. So some of these demos are slightly limited. Do you notice anything about this picture? SURMA: Yeah. If it's not the stream compression, then I'd say the clouds have blocky artifacts going about. JAKE ARCHIBALD: I think that is just stream compression. So-- SURMA: OK. Then let's try this again. When you say notice, do you want me to find something that is wrong with the image? Or just something that should help me make a guess on which codec is best for this? JAKE ARCHIBALD: Well, I'll tell you what. If you haven't noticed it straight away, then that's good enough for me. So, if at home, if you're watching this in full HD, that's 1920 x 1080. Obviously, you're getting video compression on top of that. So you're not seeing exactly what I'm seeing. But this picture, the brightness data is full HD 1920 x 1080. But the color data in this image is 96 x 54. Like, that's 0.3% of the data. And you barely notice. Closer, you can start to see a bit of discoloration around some of the fencing. One of the fence posts has turned into a ghost. That's the most obvious-- SURMA: Yeah, like, if the colors are-- if you have that little resolution for the colors, the colors will start bleeding across boundaries, even though the live data still gives the contour. So that's-- [INTERPOSING VOICES] SURMA: Yeah. JAKE ARCHIBALD: And this is because you've got bad eyes, Surma. Like, you have these terrible human eyes that are really bad at seeing changes in color. But you're actually pretty good seeing changes in brightness, though. So I'm going to take this image and I'm going to flip it around so that the brightness detail is low resolution, but the color detail is high resolution. And here it is. And the first thing you'll notice is it looks bad. But it's the same amount of data just flipped around. Here, it looks fine. You can't go this extreme in all examples. So here's an image that has a bit more complex data around color. You can see this yellow stripe and the red stripe on the car. It's like, there's some of the details quite blocky. But, as we start increasing the amount of color data, it, again, it becomes difficult to notice. With this image, once I get the color data around 5% of the brightness data, it becomes impossible to notice for me. Now, I've actually built a little web app to research this. I had a lot of fun with it. SURMA: Of course you did. JAKE ARCHIBALD: This is the first web GL I ever wrote, Surma. SURMA: Oh, you did it with Web TL. That's fun. JAKE ARCHIBALD: Yes. To do the color conversion. So it's something you can-- I'll put a link to this so you can throw your own images at it. You can get some cool effects. You can see the individual color channels. Because this is what Lossy codecs do. Right? They call it chroma sub sampling. Rather than RGB, they do brightness and then two chroma channels, two color channels. And that means they can just discard loads of that color data and save a lot of file size as a result. As you mentioned earlier, you get some color bleeding as a result. But it's barely noticeable, especially in like, photographic imagery. One more thing that Lossy codecs do in terms of Lossy stuff. It's another quiz for you, Surma. I have made an alteration to this image. Can you see what I have done? SURMA: There is a very ominous circle between the trees. JAKE ARCHIBALD: Yes. I've drawn a circle in the sky. There it is. But that's not all I've done. Down here, I've replaced the brightness data with noise. Just noise. But you don't really notice that at first. Like, and here's the interesting thing. Here's a DIF of the image versus the original image. Now, the circle in the sky is so subtle, it barely shows up. In fact, if you're watching this with video compression, it might not be visible at all. SURMA: I can see it right now. JAKE ARCHIBALD: But the noise in the bottom, it's like, a huge difference. But again, you have terrible human eyes. You're good at seeing small changes in what we call low frequency areas. Like the sky, there's not a lot going on. You spot that small difference. Whereas you struggle to see the changes in the high frequency areas. SURMA: This reminds me a bit of the blind spot that we have in our eyes where our brain fills in the gap for us. Because I see the circle. And you showed me the DIF. And faded back to the full image. I saw the circle. And then the shape of the circle started blending into the environment. And now it looks like a bush. Like, I know the circle is there. But I can't actually quite see it. So I think it's just my brain auto correcting and I'm quite frustrated with my brain for doing that. JAKE ARCHIBALD: It does. And this is something that Lossy image codecs like, they take advantage of this. So what they do is they'll take an image like this and they'll divide it into 8 x 8 blocks. And rather than describe these blocks pixel by pixel, they use this. They multiply these shapes together to form exactly the same image. Like, not at that intensity. Each block can be a different intensity. It can even be negative. But you can reconstruct any 8 x 8 image using these shapes. And this blows my mind. Like, I don't believe this. I still don't believe this, even though I built an app to show it. Look. I've made a little pixel art 203 for HTP 203. I'm not very good at pixel art. But that's what I tried to do here. But what you see below is all of those shapes at the intensity that it uses to reconstruct that image. So we can actually sort of apply them one by one. And you can see as it does the low frequency things, it starts to build up like, this blurry picture. And then as it goes and starts to do the high frequency bits of data, the full image comes into view. It's incredible to me that this actually works. But it does. Doesn't save much data, really. But let's actually take a real bit of the image. This is the picture of the woods from before. I'm going to pick up some of the grass. Now what Lossy codecs will try and do is they'll try and discard some of this data. So you see already it's not using all of those shapes. That's where these zeros are coming from. But as I drop the quality-- and this is like, JPEG quality in this case-- we can see more and more of those zeros appearing. And the thing about sequences of zeros, they compress really, really well. So we're left with an image that isn't 100% accurate. But this is high frequency data. You don't really notice. Loads of data is saved. SURMA: I mean, even here in the side by side view, it is hard to tell which pixels are incorrect. JAKE ARCHIBALD: Exactly. But let's take a different example. So this time, a curve, which might be part of a logo or something. And in this case, even a very small drop in quality is introducing noise that is very noticeable. Especially if the color is solid on either side of this curve. That's low frequency data. This small amount of noise is really noticeable. It's like the circle in the sky, right? You'll see it very, very easily. And that's why like, Lossy compression is not very good at sharp lines next to solid color. So now, if you look at a picture like this, which is a heavily compressed JPEG and zoomed in, you can see what it's made of. You can see the color bleed from the sub sampling. You can see the 8 x 8 blocks. You can see those waves that it's using to construct that data. And that's it. You now know how Lossy compression works. There's only two elements of Loss in both JPEG and WebP. And that's it. You've seen them both now. The rest of it is-- SURMA: I have a question. Because I'm trying to remember. WebP, I think, also does this frequency-based transform, the discreet cosine transform, as it's called. The conversion to this frequency patterns if you add them up. JAKE ARCHIBALD: No, that's what we get. Yeah, that's what we just saw. Yeah. SURMA: I think WebP does it also, adds a bigger block sizes if they are low noise. But I'm not quite sure if I'm remembering that correctly. JAKE ARCHIBALD: Yeah. So WebP is just better. So there's just a few different things. Like you say, it can use different size squares. It can also, when it starts a square, it can use a nearby square as a starting point. Also, JPEG has to use the same mathematical conversion for every 8 x 8 block in a given channel. SURMA: Right. JAKE ARCHIBALD: Whereas WebP, you can have four. So it could have a different strategy for like, high detailed areas versus low detailed areas. And it has a better Lossless compression thing as well. It uses arithmetic compression rather than Huffman. And it has better [INAUDIBLE] code filters as well. So it is just better. It also supports alpha transparency as well, which JPEG doesn't. So, why have I wasted my time talking about JPEG? [MAKES SAD TROMBONE NOISE] Safari does not support WebP. It's the only one browser that doesn't. So that's the only benefit of JPEG, really. We can still use WebP for browsers that support it. This is the picture element. So we're serving WebP for browsers that support it, and falling back to JPEG for Safari and older browsers. There are also Client Hints to do on the server side. I'm not going to go into it. I'll put some links for that if that's what you want to do. So, let's actually compress some images. Now, the compression tools in things like Photoshop are not very good, which is on the reasons that we built this. Not just us two. We were part of a team. But yeah, Squoosh.app. This has the latest WebP build. It also has most JPEG, a really good JPEG encoder from Mozilla. So I'm going to use the F1 image from before. Because it was a bit of a tricky one to compress. First thing I'm going to do is zoom it out so it's the same size as it will appear on the site. So if you've got an image that's going to be 1,000 CSS pixels wide, but you want it to look good on a high density screen, you want a 2000 pixel wide image. But then you want to zoom it back out so it's the size it will actually appear on the screen. Now, I'm going to start with WebP in terms of compression. And all I'm going to do-- I think you mentioned this before-- just bring the quality down until it looks bad, you know? And especially with a high density image like this, you will be surprised how low you can go-- SURMA: Yeah. JAKE ARCHIBALD: --on the quality. Like, it's still really barely noticeable. Now, it's really tempting to do this. But please don't. Like, don't put your nose to the screen. Don't zoom in. Because if you do that, it it'll look bad. It's not going to look good, right? The more you zoom in, the worse it will look. Like, oh look at that. That's disgusting. But users are going to do that. SURMA: I mean, honestly, considering that we are at-- that we just removed 98% of the data, and it still looks that good even when zoomed in is kind of cool. JAKE ARCHIBALD: Yeah. Absolutely incredible. And so if anyone comes at you and says, like, oh, I took one of the images from your website and I zoomed it in by 1,000% and it looks bad. Like, just say, I don't know, OK Zoomer. And ignore them. Because that is not what real users are going to do. And you should be optimizing things for real users. So keep it roughly the size it will be on the site. I actually wanted to look into some of these advanced settings in WebP because when we first built Squoosh, I didn't know what these did. I just took what the code-- SURMA: There's a lot. JAKE ARCHIBALD: --made a UI for it. There's a lot of-- I now know what they do. I did some research. The really interesting ones also adjusting the filter. This is a good thing to do. This really slows down the encoding time. But, it improves the visual a lot. Now, the filter is actually a decoding filter. It's just what it's going to do to remove that blockiness. But it increases the encoding time because it tries to figure out by looking at the image what the best kind of filtering is going to be. But, yeah. It's just it's just a one bit flag. Or not one bit. Like a couple of bits. SURMA: Three bits, I guess, if there's eight levels of filter sharpness. JAKE ARCHIBALD: Yes. Exactly. I think there might actually be more. I think it might actually go from 0 to 100. But so it's probably a byte. The other one, that I always knew like, oh, this makes a big change to the image. But I don't know what it's doing. Is this spatial noise shaping. Now, like I said, WebP can have these four different strategies. SURMA: Did we misspell spatial? JAKE ARCHIBALD: Oh maybe. Oh, that's a classic one. Do you know what the amazing thing is? I've actually spelled it wrong in my notes for this video as well. SURMA: Well, that's a bad report. JAKE ARCHIBALD: Anyway. Yeah. So the other option is spatial noise shaping. And so WebP can have these different strategies for different parts of the image. SNS, what that does is it changes the extremity between those different strategies. So higher SNS takes bytes away from the stuff that least needs it and gives it to the stuff that needs it most. It's like Robin Hood for image compression basically. In some images, turning it up to 100 has a positive result. It doesn't here. 50 is actually pretty good for this image. SURMA: Can you go too high? In the sense of like, going higher makes the image worse again? JAKE ARCHIBALD: Yeah. So, and with this image, it does go worse. SURMA: Ah, interesting. JAKE ARCHIBALD: So if I make it extreme here, it's giving more data to the road. Because that's where the blockiness is. But it starts to introduce-- it makes the tires of the car look bad. SURMA: I see. OK. JAKE ARCHIBALD: And you start to notice the artifacts there. You start to-- because it's taking data away from the high frequency area giving it to the low frequency. The image of the woods that I had on before, actually SNS of 100 works really, really well. Because it takes lots of data away from the leaves and stuff that you can't see the noise and gives it to the area of the sky. So it works really well. We're going to need a JPEG as well. So, just for fun, I'm going to make the JPEG the same size as the WebP just to show the difference in quality of the compression here. So I have to take-- same again. Quality right down til it's about 40 kilobytes. And I'm going to do what I said not to do. OK, this looks really bad to my eyes right now at this level. But obviously, with video compression, it might not be as obvious. So I am going to zoom it in. JPEG creates this horrible blocky effect across the road. And like I said, this is low frequency data. So this is going to be like the circle in the sky. It's super obvious. It looks horrible. SURMA: Around the yellow strip, the transition from the yellow strip to the road makes it really obvious where-- JAKE ARCHIBALD: Yeah. SURMA: --the data's lost. JAKE ARCHIBALD: Yeah. You get to see the blockiness there. And this is where, like, the filtering that WebP does is-- yeah. It's much better. So yeah. I just have to increase the size of the JPEG until that horrible blockiness goes away. And at that point, it's like double the size-- over double the size of the WebP. There are things you can do to improve it if you want to spend the time. More advanced settings. The most interesting advanced setting here I think is the chroma sub sampling. SURMA: Yeah. JAKE ARCHIBALD: This is what we discussed before, right? This is just reducing that color data. Especially if you're on a high density screen, you can get away with less. In fact, most of the time, I would say you can just turn it up to four. We saw earlier that this particular picture is kind of sensitive to color reduction. So 3 was a good one there. But that knocks 10K off. So it's worth having. SURMA: I also often unbind it with the separate chroma quality so that you can basically introduce the blockiness into the colors, but not into the brightness, which is often much less. JAKE ARCHIBALD: That's interesting. I've never had success with that. I've always-- I've tried that. And I've never-- I've always been unhappy with the results. But yes. Like, mileage may vary, right? SURMA: The option is there. So if people can play around with that. JAKE ARCHIBALD: Absolutely. But yeah. I think it's worth, in this case, to do sort of both the WebP and the JPEG, because it's like, half the size of the browsers that support it. But that's it. That's everything I really had to say about Lossy images. SURMA: Well you said you had major research about the options. What exactly is pointless spec compliance? JAKE ARCHIBALD: Pointless spec compliance removes the progressive encoding and some of the other things that, according to a strict interpretation of the JPEG spec, it's not supposed to do that. But everyone supports it and it's good for file size. So-- SURMA: I thought I would totally put you on the spot. But you actually know the answer. Well done. Well done. JAKE ARCHIBALD: Yeah, do you know, I didn't research the JPEG. But that was one of the ones that I knew from looking into the encoder there. So Lossless. Completely different world. A Lossless image describes pixels one at a time from top to bottom, left to right. But rather than describe each color from scratch, it will use some of the surrounding pixels to make a prediction. And then it just encodes the difference. There's a number of strategies that you can use. It can look at the pixel to the left. It can look at the pixel above. It can use an average of some of those pixels. But here's the gotcha. It can't change the strategy for every pixel. Because that would just add too much data. Instead, it has to stick with a particular strategy until it decides to change strategy. Now, PNG can only change strategy at the start of a line. WebP can define 2D blocks of different strategies. But this is why Lossless compressors can be really slow. Because it's just brute force going through all of these different strategies to figure out which one is best. Like trying all the combinations. But it means this compression works really well if the pixel next to it is exactly the same, or the pixel above is exactly the same. Because there's no difference then. Really easy to compress. And it's why Lossless formats struggle with photo data, because it's lots of organically changing color. Oh! One more trick that Lossless things have. If there's 256 colors or less, it just sticks those in a table and it can reference them by number. So rather than every time describing the red, green, blue, and alpha, it just says, its color number 5 everyone. There it is. Pop that in there. And that compresses really, really well. So difference between the formats, then. WebP-- not many people know about the Lossless WebP format. It's like a completely different codec. In fact, it is a completely different codec. The only relation between the two is when you do Lossy WebP with an alpha channel, it's using the Lossless format for the alpha channel. Pointless fact for you all. SURMA: Oh, that's good to know. JAKE ARCHIBALD: Yeah. It's just-- it's just better. It's got more strategies. It's got the 2D thing going on. It compresses better. But you do need the PNG for Safari. And that's all we're talking about. And just never use GIF. Just don't. Stop it, please. Never use it. It's just-- it's bad at everything. Is just bad. So stop using GIF for everything. But let's put this into practice. Back in Squoosh. This time, I'm going to use something with a lot of flat color. And I say thanks to Steven Waller, who donated me some of his artwork to use here. He's an artist I used to work with. And he makes these wonderful drawings. Apparently, these are his teammates that he worked with at the time. I didn't ask him about the bear. But fair enough. I would say the first thing to do here, same as before. Zoom it out. Like, keep it the same size as it will appear on the site. So the kind of scaling that you would actually use to use the high density devices. And now I'm just going to go to use WebP because it's the best. And I'm going to pick Lossless. Yeah. Completely different codec. Whatever. Very few people know about it. But it's really good. We're straight down to 43K. This is a slight Loss option, which-- SURMA: It's my favorite. JAKE ARCHIBALD: --I know you found very funny. It's great, isn't it? And what it will do is it will change the pixels to try and make them more predictable. I actually don't like the visual effect it introduces. But so I don't really use it. But mileage may vary. It's fun to play with. But remember when I said earlier that these formats do really well with 256 colors or less? We're going to do that. I'm going to reduce the palette down. Cause it doesn't look like this image has a lot of colors. But because of the anti aliasing around all of the curves, it's got lots of like, slight variations, blends of one color to another. I've also changed the codec to browser PNG. And that's just cause it's really fast to compress. So it's going to be-- I'm going to get a quick response when I'm changing the number of colors. I'm also going to turn off dithering. If you reduce the number of colors of something, you can get this banding effect that you can see here. Dithering, like, tries to remove the banding by using, like, pointillism. Or like these dots to kind of recreate the shading. It's super effective. But Lossless deals well with flat color. So it will increase the file size. So I would avoid it unless you really need it. SURMA: Although I am impressed. Like, I have compressed a couple of like, photographs to PNG with dithering. And it will actually look-- if you zoom out, if you have it small enough-- it will actually look almost the same. Often it's imperceptible. JAKE ARCHIBALD: Yeah. And there are some times that you need to do that. So now, same as before, I'm just going to reduce the colors as much as possible until it looks bad. And this is why, this is one of the reasons we built Squoosh. Because it's like, it's so much nicer to do this with a visual response than getting like, a computer to try and figure it out. Because it's not going to do it as well. I'd say, important advice. Same as before. Don't zoom in. Because it'll look bad. You know? Like, you can see the harsh edge here. But zoomed out, you barely notice it. So it's fine. And that's how users are going to see it. So there we go. So we've been able to like, reduce to colors like, down to 68. And so now, if we're going to go and just switch back to WebP. Turn the effort up, let it use all of its iterations to figure out the compression. And like, boom. There we go. It's like 13K. Sort of like-- SURMA: That's amazing. JAKE ARCHIBALD: Isn't it? Like, it's incredible how much that saves. For Safari, we need the PNG. PNG compressors are really varied. So we use auxi PNG, which is a pretty good one. And that will take it down-- to what will we get? 17K. SURMA: Well that's a close second. Pretty good, yeah. JAKE ARCHIBALD: It's close. And I would say, I would give a shout out to Image Optum, which ships with Auxi PNG, but also lots of other PNG compressors, that we would like to add to Squoosh at some point, but we haven't yet. And it brings the file size down even more. In fact, it's only 3K off the WebP. So in this case, I would probably not bother. Unless I had like, a load of images on the page. And that difference adds up. I would say just serve the PNG. It's fine. Like 3K, it's not worth the complexity. So yeah. Rather than think of a compression format for a particular kind of image, like, my takeaway is, like, think about how the compression actually works. And use that as your first guess. But as you said earlier, it's always worth trying it in something else. So I'm going to look at a couple of edge cases to finish up on. Look at this. Look at this. This is beautiful. This is SVG. [INAUDIBLE] SURMA: I was about to say, it looks like one of these things that the CSS artists built with just like a billion divs and gradients and shadows. And then a photorealistic thing turns out to just be CSS. But I guess SVG-- JAKE ARCHIBALD: That's pretty much what is happening here. But with SVG. I think this was manually created. Yeah, very similar. If I minify it in SVG OMG, which is a SVG compression-- well, it's a GUI made. But it's based on SVGO, which is a node app. I can get it down to 37K. But this is so complicated. And uses so many filters. Like, look at the jank there on the resizing. And this is on a high end MacBook. It is taking a ton of CPU to render that image. So, over in Squoosh, Lossy WebP does a really good job of this. Like 53K. It's actually bigger than the SVG. But the saving and CPU makes this a better decision. SURMA: And that's actually interesting. Because that's something that Squoosh doesn't really allow you to quantify, right? The saving in the CPU. JAKE ARCHIBALD: Yes. Yes. Exactly. Yeah, it would be nice if we could find a way to do that somehow. But yeah, if it's struggling in-- with this image, you notice how slow it loads. And you notice in SVG OMG how slow it is to resize. So that's a good signal. The PNG equivalent-- cause we can't use JPEG for this, because it's got alpha transparency. The PNG is 86K. And I've had to reduce the colors and not introduce a lot of banding. So I had to introduce dithering. And that's actually noticeable. You can see the dots. It's not great. But without the palette reduction, it's 300K. So, in this case, you kind of say, I'm sorry Safari users. You don't get quite as nice an image. You know? SURMA: Yeah. JAKE ARCHIBALD: But yeah, it's worth it for the file size. SURMA: Although, I guess you could also surf the SVG. Because like, I mean, the picture element, you specify the sources in order of priority. So you could put the WebP first. And could put the SVG second? JAKE ARCHIBALD: Yeah, you could decide like, to say, well, you know, Safari users are likely to be on a high end device. So the SVG is less bad maybe. But it's still going to cause jank to other things on the page, you know? It is-- like, as you say, on the high end MacBook, it's bad. But yes, you could make that judgment call. You could say the jank is better than the 300K or the banding or whatever. One more example I'll leave you with. This is another one of Steve's drawings. It has a lot of flat color. So my instinct for this would be to go for a Lossless format. But there's also a lot of shadows, a lot of gradients as well. So again, Lossy WebP does a really good job of this. Like, and it takes it down to 28K. If you go for a Lossless format, even with the palette reduction, it's 118K. And you actually get a lot of banding with it. So yeah. It's like-- tools not rules. That's my takeaway from this. Like, think about the codecs in terms of what they are good at. Think about how they work. And with that, go and make your room just smaller. SURMA: Please. Please make your images smaller. JAKE ARCHIBALD: I've actually enjoyed this. This has been like, shall we do some more 203s like this? Shall we do some remote 203s? Cause I don't know when we're going to get back to the office. SURMA: I was planning to. Absolutely. JAKE ARCHIBALD: Well we've got the equipment. So let's do it. SURMA: Happy next time. JAKE ARCHIBALD: Happy next time. Bye! [MUSIC PLAYING]
Info
Channel: Google Chrome Developers
Views: 39,557
Rating: 4.9301424 out of 5
Keywords: type: Conference Talk (Full production);, purpose: Educate
Id: F1kYBnY6mwg
Channel Id: undefined
Length: 31min 32sec (1892 seconds)
Published: Thu Jul 16 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.