 Hey, everyone, Sam here. On this episode of the Santa Tracker series, I want to talk a little bit about GIFs, MP4s, and just generally saving your user's bandwidth. Let's have a look. So this episode heavily features one of my favorite scenes. It's called Present Bounce. It really brings me back to my youth. You can drop conveyor belts on the screen and press buttons to have a present roll into Santa's sack. You've also got bouncy things and stuff like that. Sometimes I can do this level in one try. Not quite this time. So one thing you might have noticed when we loaded this scene, and I've just reloaded it now, is we get these tutorial cards. Well, we wait a second. They only show up if a user doesn't do the thing we want them to do. So in this case, it's telling the user to drag the conveyor belt onto the screen. Cool, I'll do that. The tutorial will now go away. If we wait a few more seconds, we'll actually see a few other tutorials. So we've got a few bits and pieces of, you need to click the conveyor to change it, and you also need to press the button to start the level. What I want to pick on is that in previous years, these were actually GIFs. And if you look at this figure here, there's two megabyte GIF picture. In previous years, if we use it, downloaded this tutorial image, that actually download two megabytes of GIF. And this came from a good place. In Santa Tracker, we tend to avoid having a lot of text. We much prefer using iconography and animation to show a user what to do. We don't want you to have to read a lot to really sit down and play. So we had this GIF, which was great. Now, we can actually do, thanks to browser advancements, is send an MP4 down. There's one catch. If you have an MP4, you can have it auto play, but not if it has audio. This works really well, right? Because this GIF doesn't actually have any audio lining up with it. We just want to show an animation. What we actually do is we've converted this animation directly to an MP4. We actually use an online tool. You can Google for a couple, although most of them are just front ends to the open source tool, f of mpeg. So if you have GIFs that already work and you like them, you can just typically convert them. One problem you might have though, is that these GIFs end up having no transparencies. It's a nice property of a GIF that actually can have transparent pixels. So this matches our little cloud effect. So let's talk about how we achieve that effect. The video isn't transparent, so how do we add this cloud effect around the edges? So let's have a look again. So if we look at our source code, we can see that we've actually got a video element inside our Santa tutorial element, which is a thing that manages these clouds, which you see on the page. This video tag is actually not displayed. If you look at our CSS, you can see that it's actually displaying none. The user actually never sees the video as it is. So you can see here we have an on play handler. This is the Polymer syntax for adding an event listener in code. So this just basically means video element dot out event listener play. So whenever that happens, we call blit to canvas. Play is called every frame that the video was played or drawn. And so what we do whenever the video was played, is we actually take it, we reset the canvas, and then we actually do a couple of things. Firstly, as you can see here, we blit our shadow image. That's the little shape that we wanna have this video fit into. We then turn that actually to white for various reasons that shadow starts out as black for us. We then draw the video using a certain composite operation. And what that basically means is that we'll only draw things within that shadow that we already have. So we blit the video, which is the current frame. We can literally say V, which is our video element, and we can literally draw it to the canvas. And now we have this lovely video playing here that's actually playing in a different element being drawn to the canvas right in front of us with no real performance loss whatsoever. And this video, most interesting enough, is only about 80 kilobytes compared to two megs. Obviously this is the worst possible case I could find. We've got a few examples of maybe a couple hundred K down to 20 or 30 K. And actually another challenge we face is that many of our GIFs were already highly compressed. And when GIFs compress, what actually happens is you get a lot of blitting and spots around the edges. So it turns out putting them into F of MPEG isn't really useful, because it's actually gonna try to maintain that weird compression that you kind of saw in that asset. So unfortunately, there's some of our GIFs that we don't have the source code to, which we can't really fix. So we're kind of stuck with them for a bunch of reasons. If you look at our tutorial folder here, we've got a code boogie.gif file. And if you look at this image, you can see there's a few artifacts around the edges. So this one's only 200 K, which still feels like a lot, but actually turning it into an MP4 makes it even bigger, which is kind of a pain. But we don't have the asset for this, so we're not gonna bother fixing this for now. So as well as converting our GIFs to MP4s to make them smaller, we also do a few other compression things on our media to make them better. So for PNGs, we use PNG Crush or Zopfle to make them smaller. And for SVGs, we use SVG O, and occasionally a bit of manual tweaking to make sure that they're the smallest they can be. So Santa Tracker has a ton of SVGs throughout its site, you know, the trees, the cute houses and things like that. But we often find that they're way too detailed for the screen they're being drawn at. You know, we originally used an asset when it was this big and now it's this big. So we'll often make sure we reduce the amount of detail we send down to the user because if they're not gonna see it, it's not worth putting in our SVG. And a tool like SVG O doesn't really know that, it just tries to make them compressed. If you are curious about the approach we took today to play our video and make, you know, draw a mask around it, be sure to check out some of the links below. This isn't a new practice we've done for Santa Tracker, but we've hopefully taken it and used it in a really nice way. So thanks for watching and I'll see you on the next episode. You can subscribe to the Google Chrome Developer Channel down here. And check out some other great videos along here.