Speaker is making progress on their project. They want to get the performance part of it ready. They are also working on containerizing the functional parts of the project into the main project. Speaker wants to go back to work on the project.

Speaker is developing responsive images and preload for Safari. They explain how responsive images help web browsers to fetch higher resolution images. Speaker explains how the W value tells the browser, the width of each version depending on the device. They explain how responsive images can be preloaded in Chrome 73.

Speaker wants to preload a smaller image to make their website load faster on mobile devices. Preloading of responsive images can be faster than loading without waiting for a script. Speaker's first image is this wolf and they want it to load up, but they have to wait for the gallery to load before they can show it. Speaker is thinking about using the preload and pre-loading responsive images to improve their website's LCP.

Speaker is using Astro to build the site. They want to make sure responsive images load more quickly and avoid weird transitions between the sizes.

Speaker is working on their new side project. They created a travel site Dwayne dot i n to remind them of places they have been. Speaker created a website and has shown it to other people in their travels. They want to create something similar but without wild features. Speaker is working on The View Transitions API.

Speaker has changed the way the page loads and transitions. They found an article on pre-loading images. Speaker is going to add the list of the links to the recording and add a link to this blog. They want to preload the images like the before and after of the page to make it load faster.

Speaker will send everyone off with a new Jabez featuring a Pawnee.

• cellular data
• extra resolution
• image cdn
• background images
• responsible image
• lazy load
• link rel preload
• picture tag

Welcome back, your dreams were your ticket, welcome back that same old place but those dreams every vein, and they turn around each other.

What's going on?

You're welcome back.

All right give us stretch.

Oh yeah, that's good.

Okay not too bad.

Alright, so how's everything going?

Hopefully that last session was a productive.

For you.

It was pretty good for me.

I got it's got my laundry like that's all like washing and stuff.

So normally when I travel is like a lot more than normal, and so I have got that going it's like two loads of just yeah through it all in there.

And, so I got that going and then let me share my screen.

So this is what I am working on.

He will lead into a thing I want to talk about, so sorry shares doing and I think while ago maybe like it was the last time I was actually live doing this.

I was showing a project that I am working on new side project and let us see.

Show my screen here.

All right.

So I am working on my new side project is kind of like a take on.

Let me see.

So I have this site Dwayne dot i n.

All right.

Oh, if I could type, that would be amazing.

I created this site.

It's like my travel site, right?

And so for example let us go to Brazil real quick.

All right, and then again chances are good.

Folks at City JS Sao Paulo for having me and it's just kind of like an always want to be able to Have like a memory of what where I have been and I have got a chance to go to.

And, so I created this site So they kind of like remind me of places I have been right?

And so it just kind of scroll through it and it's just pictures of things.

All right you do like 360.

So this is my hotel room in São.

Paulo Brazil, nice.

All right.

So I created this site and I have shown other people it in my travels, and they're like, oh, that's pretty cool.

How'd you do it?

They would like one as well.

And, so I am thinking I can just make something similar.

With some more features but not as like wild as much.

I just basically just photos just to start off with, right?

And so, this is what I am working on.

Kind of make it something easy just to be Deployable, right?

Because my other site has so many, like things behind it.

I want something that just kind of like easy to be deployed, right?

And, so I came up with this and last time I showed you know, like it loading in, I always wanted to have something where like images like load in like that.

So this was a good opportunity, so I figured that out.

That's pretty cool.

I got you some CSS stuff I never used before to make that work, right?

And then also when you like scroll through you say I wanted to have like the animation of It, kind of like doing the same thing the way it paid in kind of And then but I also have it to where if you prefer reduce motion that won't happen, as well.

All right.

Let us see.

So I think the last time I said I was going to work on The View transitions API.

Right?

And Sky thing that's super, amazing.

I don't know if I showed it, but I got it working.

And so when I say if you transmission API so like here it is, my go to the page.

You see how it kind of like got bigger and scroll from where it was to where thing.

And so then you can also and if you go back, You see it went back to the starter that's where you like left off at and it shows these other ones, all right?

So if I click this, You see how it moved from position to there and it's like a brand-new page.

Also, if you look up here and then from here, you can like scroll through I even got the form like the details page to another Details page it also like transitions right which I think is pretty cool.

So, you can just keep scrolling through.

Right now if you sometimes notice it does like a flicker kind of thing.

And so, what I was thinking, what I could do is that it will Check out in transition, two ways of doing it.

But I think what I might do as you, like, if you go back, see, that was little bitten smoother and that's because the actual image isn't loaded yet, and so it's going from like nothing is more than comes back.

And, so I am you see how it went small and then came big again.

If you go back now that the image is loaded already, you see it just it doesn't do like Eating small quickly kind of thing.

And so I am thinking I can preload it.

See how that got smaller and then the other one showed it up.

But if I go back, It's just works.

Because the image is already loaded.

And, so I was looking into pre-loading, and so I found this article, which is pretty dope.

And I was kind of going through it, so I am going to 0.

Let me ask my yeah, I am going to add the list of the links so you can check it out for yourself.

If you're watching the recording, And then I am going to add a link to this blog.

Post that I have been kind of like looking at I am thinking what I can do is preload the images like the before, and after of that page that you're on pre-loaded images.

And so that way, it doesn't do like the weird getting smaller and then bigger again, it will just if the size difference, it will just, you know, transition to the size but not get smaller and big kind of thing.

So I wanted to get that working.

So I came across this article and it's actually like updated like last month, all right?

And so I am like alright cool.

So starting in Chrome 73.

I think we're like 112 or somewhere that the link preload and responsive images can be combined in order to load images faster and that exactly what I need, only the images to load faster so that way it will.

Not do the, you know, getting small and big again, transition, right?

I just want the dimensions of it to change, sort of, by wanted to be loaded already, so there's like not a Flash and then So you can see it's sporting a bunch of browsers except Safari which is fine for me.

So this article gives me an opportunity to discuss two of my favorite things, responsive images and preload as someone who is heavily involved in.

Developing both those features I am super excited to see them working together.

And so normally like what you wanted to load for spot like different images, like different widths, let us say, depending on the size of the screen, you could do this which I thought was cool.

So image the source of the default one, but they have a source set so you have like a small with a width of 500 when the width of the thing is 500 and then if you have a medium one, where the with is, like, 1000 w, With the screen and then you have a large because like 1500, and they have the bolts, right?

So it says, suppose you're browsing the web on a screen that's 300 pixels wide and the page just requested an image that's 1500 pixels wide.

That page just wasted a lot of your cellular data because your screen can do anything with all the extra resolution.

Ideally the browser should fetch a version of the image.

That's a little wider than your screen size, say 325.

Pixels this ensures a high resolution image without wasting data and even better.

The image will load faster because it's less of a size, responsive images, enable browsers to fetch different image resources to different devices.

If you don't use an image CDN, you need to save multiple dimensions for each image and specify them in the source, set attribute.

So, that's what they did here.

The W value tells, the browser, the width of each version depending on the device.

The browser can choose the appropriate one.

So yeah, so the width of the small as five hundred, the medium is a thousand and largest 1500.

I wonder if you can put like an H there like a height.

Let us just go to OK my the check that out this goes somewhere else I will check that out later.

All right cool so not preload that preload.

Lets you tell that lets you tell the browser about critical resources that you want to load as soon as possible, before they discovered in HTML, this is especially useful for resources that are not easily discoverable such as fonts, including in style, sheets background images, or resources loaded from a script.

So for example, you have , you pre-loading is the image and it's a PNG image file, okay?

So now both of them together.

Responsive images and preload have been available for the last few years.

But at the same time, something was missing.

There was no way to preload responsive images but in Chrome 73.

The browser can preload the right variant of responsible image in the source set before discovers the image tag.

Something before he even places the image in the HTML like it knows what version like what size of the image.

To pull in and that's what I am looking to do because the people are looking like, if you want to load it on a cellular device, right?

And it's a smaller screen.

I want to be able to preload a smaller image, so that way it will load even quicker.

And yeah, so that's so that way the transitions will look a little smoother.

So, depending on your site structure, that could mean significantly faster image display.

We ran tests on a site that uses JavaScript to Lazy load, responsive images, pre-loading resulted in loading, 1.2 seconds faster, and so especially if you're like on a mobile device, that could be even better, maybe not on a good strong Network, a quick network that could be even more.

So they kind of show you like.

This is what the kind of like look like before, right?

And now here you can do like the same thing by at like the same link Rel preload as image and so you still have the same basic one but then you have this image source set and kind of similar to the way it was before.

Cool, let us see.

So use cases, pre-loading dynamically injected responsive images.

So let us say, you are dynamically loading, hero, images, as part of a slideshow and know which image will be displayed first.

In that case, you probably want to avoid waiting for the script before.

Loading the image in question, as I would delay users seeing it.

So I don't think they show it here, right.

So, let us say your first image is this wolf, right?

And you want that to load up?

Up.

But you have to wait for the JavaScript for the slider, the header slider to load before the gallery of the says here.

Before you can actually show it, right?

So that means you have to wait for this Gallery.

J.

Yes to load right here before the first image is even loaded, right?

But you may want to show them the image before, all the JavaScript.

So, by using the preload, All right, like before is you see it?

Loads of the same time.

It starts at the same time, as the JavaScript, instead of waiting for the JavaScript to finish.

And that's pretty much what I want to do, what I am thinking about doing, and they talk about other stuff like background images using like CSS, whatever.

So it's a way around that as well using the preload and then pre-loading responsive images.

An action.

So they have like a pwi demo shop thing like a pie shop and it shows one that's pre-loaded images.

One, that's only a few of them.

And then you can see here like with the preload, you see how fast is like a lot faster that you see the images and said like these blank squares while you're waiting for like the JavaScript and stuff to load.

So that's a pretty cool.

And then there's also pictured but it from where I stand the preload stuff is not really available.

For the picture tag yet and I kind of talked about why and then somebody effects on largest content for paint.

So you can say pre-loading may improve your website's LCP using techniques above.

You can ensure that your responsive images load more quickly and let us see.

Let us see.

So yeah, that's basically it.

And so that is what I am working on, and I am using Astro to build the site, right?

And so now I am just trying to figure out like, where can I put that like, when in the like the chain will I have access to like the source of the images when it's here?

Right, because I think I have it.

Like, going from here.

To their.

I think I have it there so that way I can preload the previous and the next.

So when you click it, it just works, see how that one kind of like went in and out.

I want to avoid that.

I want like a smooth transition between the sizes, I don't want to have it like do that weird thing where it goes in and out.

I wanted to be more of a like going to the final.

Size of the images.

You see I am saying?

So yeah.

So I want like that.

Now, the going small and coming back in butt.

Yeah, so okay.

So that's what I am working on.

I think I might know where I can put that stuff.

So I am just kind of doing some more research.

So I yeah, Just curious.

So what are you all working on?

Let me know what y'all think?

But yeah, making some progress.

And I think once I can get that preload thing, I will feel better about all the, like the performance stuff I think I would be able to do as much of the performance.

I can at least to be able to get a good first version of this running.

So I got a lot of other stuff.

Worked out already like the functional things.

And now I am just kind of like working on like how One of the layout to look and moving from thing to thing.

So this trying to like containerize all that, so I can just put it bring it back into the actual project so it's like a little side project I am working on.

So right now but yeah, so I am going to get you all back to work because I want to go back on this.

I think my laundry might be done.

At least I can throw it into the dryer now, so I will send you all off with some traveling music.

Do remember what I did last time, but we're going to go with a Pawnee?

Be a new job is the track is called.

Thank you.

Because again thanks for hanging out.

Shouts.

I will see y'all around until then I wish you much productivity and thanks again for hanging out.

Come on.

I know a quick screen share.

Okay, see you all around.

Thanks again for hanging out.

Here we go.

New Jabez featuring a Pawnee be the track is called.

Thank you.

All right, see you.