[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]
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.