This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Using Optimized Sharp Images" Lesson
[00:00:00]
>> Jason Lengstorf: To actually use this, now that we've installed everything, we can go back into our hero, and we're going to do a few things. First, we're going to import our background image.
>> Jason Lengstorf: From a Gatsby background image. And then, all we have to do here, is just make it a style background image, which is pretty sweet, right?
[00:00:32] And then we're gonna drop this out because we're gonna set that differently. So background image takes a few props in one of those props is the, like the fluid image set up. In order to use that, we've got to get into, that's why we imported GraphQL and useStatic query up here.
[00:00:51] So we're going to add a query, and that query that we add is going to be. Let's pull up the image, and that's going to be the result of a useStatic Query. And we use the GraphQL template tag.
>> Jason Lengstorf: So we've got a query, and then the query that we wanna run is, I'm gonna alias this.
[00:01:17] So this is another thing that's really cool about GraphQL. Let me show you out here. If I'm out here and I wanna rename this thing, right now, it comes back as childImageSharp, right? You can see that here. But if I wanted to just call this, like, image, I can add whatever I want in front of it with a colon, and it's gonna rename that over here.
[00:01:39] So it's just a way to alias your code if you wanna make it a little clearer what's happening, and what is being returned. So that's what I'm doing here. I'm gonna alias, and I'm gonna make a request for the actual file. And because this is hard coded, I can just tell it what I want.
[00:01:56] I don't need to worry about variables or anything. So I'm just gonna say I want the nicole-harrington-mn .jpeg.
>> Jason Lengstorf: And inside of it I'm gonna set up an alias of sharp for childImageSharp.
>> Jason Lengstorf: We want the fluid set and then we're gonna use another new concept called the graphQL fragment.
[00:02:21] If you've ever used a REST spread operator in JavaScript, this is gonna be kind of the same thing. Gatsby provides a few helpers. These fragments basically are just, it's like declaring all of this, like all together, and instead of making you do that, we just do it for you.
[00:02:42] And so we're going to use with web P, because on modern browsers using web P is gonna be an even more compressed and more performant image. And normally, that would be a pain, because you'd have the web P version, you'd have to write a feature detection so that you could determine whether or not the browser supported web P.
[00:02:59] We're gonna do all that for you, it just works. So you are able to make this query. And then now that we've got this, we can take our image background and just add in the image background that we want. So we want this to be, we'll make it a section, and then we're gonna pass in the fluid and that's going to be image.sharp.fluid.
[00:03:23] And the tag is like the component we use, so this is gonna be a section. We can make this a div, we can make it whatever we want. Hero section seems that seems reasonable. So let's get up here and go back to the homepage. And let's see what changed.
[00:03:44] So we've got our hero. We've got the background image. Let's move over to the network tab and take a look how big this thing is Is now. That is 56 kilobytes as opposed to 3.5 megabytes. And we made relatively few changes in the code base. We definitely didn't do any manual image manipulation to make that work.
[00:04:07] And the really nice thing about this is again, we're going to automatically load the right version. So like this is the web P version, if we had a different resolution, if we were on a different browser, it would load a jpeg fallback or it would load a smaller resolution or whatever was needed.
[00:04:26] So that's a really powerful way to not really give up any control over your stuff but to just automatically optimize that performance and put yourself in a really strong position. And then the last thing that I wanna show you is a feature that will happen on slower browsers.
[00:04:42] But that, if we want to force it, we can do what's called a fadeIn. And the fadeIn is going to cause that really nice little blur in functionality. Where before the image loads, like while we're waiting for that network request, we see a blurry version of it, and as soon as it finishes, I can simulate that a little bit if I go to the network tab and throttle, let's slow 3G, and I'll move this to the side.
[00:05:09] And now I can reload. And this is really slow 3G. This will take a little bit. Once it loads, we get our page pop in here. It hurts. The terrifying thing is like, this is actually how a lot of people use the internet. And it's another reason to be really cognizant of how much data we're sending down and like focusing on performance, is a nice to have when you've got a fiber internet connection.
[00:05:46] It's a non-negotiable, when you're on 2G or 3G so you can see like as that comes through that, that blurred image shows up. And doesn't block the render. And then the image, when it's ready, refreshes and shows up again.