 OK, so I'm going to talk about a technique called preventing image reflame. And I started working with a team recently. And we were doing a bunch of image work. And there are lots of images coming on the site. And I think if you're looking at sites that don't have fully optimized imagery, then, for example, this, let's have a quick look. This image is pretty big, if I can bring this over. Is this big enough? So OK, so this is a 203 kilobyte image. So let's say that we are writing a blog post, right? And then you're scrolling down. Has anyone ever had this happen? So then you start reading. Hold on. Let's do this. So say we're on a mobile, right? And we want to read this blog post. And we refresh, or we land on the page. So I'm reading this blog post. And then suddenly everything just starts moving around. It's super slow. Hold on. There you go. So I'm reading this. And then this guy pops up. I don't want to see that. I want to keep on reading what I'm reading. So there's a way that we can prevent this from happening. And the way we do this, if we go like this, there you go. So we've got a markup here. And I should mention as well that this is all lazy loaded. So let's just speed this up a bit, actually. So you see here, we scroll down. We get more requests. And then, yeah, we get this annoying guy pop up. So how do we stop that from happening? We want to not interrupt users. We don't want them to start reading the page. And then it to just be annoying, because then people are going to just drop off, right? So the way that we can do this is pretty simply just wrap our images in our page with a div. I've called it image container. And oh, hold on. This is old. So what we're doing here is we're setting height zero on this image, on this div that's wrapping over the image. So obviously, what is this going to do? Completely remove that image from displaying. But if we set an overflow hidden, position relative, and this is the key part here, this is the padding bottom 100%, and then we set the image absolute with 100, and then top left, right. So what happens then? So we load the page. But you see here that that image isn't pushing the rest of the content down. So our users can carry on reading. And even if their phone is like super slow internet or the internet just drops, they're not going to have that bad experience, right? So I mean, this is like, yeah, I don't know where to go from here, actually. So as you can see, we saw that that image is actually a dolphin that looks, you can kind of see that. So then you're probably saying, well, hold on, that's just a square image, right? We can't see the rest of that. So then actually, hold on, let me back up a bit. How does this work, right? So we take 100% of the width, and then we know that the padding bottom is we're going to use like a ratio, right? So if we take some kind of, hold on. So these are some quite standard image ratio sizes. So we've got 16.9, and then the reverse, 9.16, and then 2 to 3. So in photography, so I think the standard, like when you used to take film photographs and you used to get them printed out, 2 to 3 was usually the format that you would get them done. There's also 10 to 8. And then 16 to 9 is actually what I learned this morning is the ratio of the Instagram story. So yeah, anyway. So what we could do here is we could replicate these image ratios. And if we can change this, I'm hoping that these images that I have here are 16 to 9. So if we refresh the page, hold on, it's the other way around, this one. So these are 9 to 16. So we've got 9 across and 16 down. So we can then set that refresh, and there's our dolphin. Then we keep on going down. There are these big images. But we still have this presentation of content shifting down. So yeah, I think that's quite simple. Like I think it's a really nice way to make it a nice experience for users. And then we could also do this in React really, really easily. So if anyone's ever used Star Components, you can then just take, you can create a ratio container. Oh, why is it not coming up? Ration, that's why. Take width. And so what you can do here is, I guess, you can programmatically take, you could probably do some JavaScript, work out some widths and heights of the image that you're getting down and then just programmatically pass it down here as props. And then you've got perfectly image prevented of reflowing, if that's what you want to call it. There is a much better discussion about this, written by this guy, Jasper. So if you want to go and have a look at that, that will give you some proper in-depth kind of information about it, rather than me just waffling on. And then I just downloaded this. So you can go and have a look if you want at that chat. And that's my lightning talk. I know it died. Ha, ha, ha, ha, ha.