This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Optimizing Images with Sharp" Lesson
[00:00:00]
>> Jason Lengstorf: If we look at the Network tab here, this is actually pretty atrocious. Because you'll notice, we are now downloading 3.5 megabytes of image.
>> Jason Lengstorf: And that 3.5 megabytes of image is going to show up even on our tiny browser. So if we're at iPhone size, we're still downloading 3.5 megabytes of image to fill this space.
[00:00:25] And that's just no good. So in a different app, what you might end up doing is manually creating a bunch of different sizes and writing a bunch of media queries and having to kind of do some art direction there and figure out exactly what you want. If you wanted to do that in Gatsby, you absolutely could.
[00:00:43] However, we will just do it for you so that you don't have to. And the way that we will do that is by installing a couple Gatsby plugins. So let's take a look here. And we're going to stop our server. And we'll do an npm install of gatsby-transformer-sharp.
[00:01:08] Sharp as a third-party library that does image transformation. It works in, I think it's like a C binary or something that Node then wraps. And it's pretty powerful. It's also kind of a mystery, I don't really know how it works. But it's really, really cool in what it allows us to accomplish.
[00:01:29] So then we're gonna use the plugin-sharp. Now, the difference between a transformer and a plugin, the plugin is gonna install Sharp and kinda make Sharp available to do various things. The transformer looks for nodes that are images and will apply image transformations to them. So a transformer in Gatsby is a plugin that looks for data and will transform data from one type to another.
[00:01:59] It's a really, really powerful model. And then the other thing that we want here is we're going to install component from a third-party that's called gatsby-background-image.
>> Jason Lengstorf: So once we get this installed,
>> Jason Lengstorf: We're gonna hop into our,
>> Jason Lengstorf: gatsby-config. So let's do that.
>> Jason Lengstorf: And we're going to, first, just add in the transformer and the plug-in.
[00:02:35] So gatsby-transformer-sharp. No config there. gatsby-plugin-sharp.
>> Jason Lengstorf: Same thing, doesn't need any options. And then now we wanna get at our images. And so I'm going to just create another gatsby-source-filesystem and call it images.
>> Jason Lengstorf: And we’ll just create a folder up here next to our post that’s also called images.
[00:03:03] So let me create the folder,
>> Jason Lengstorf: And I’m going to move this static image,
>> Jason Lengstorf: Up into images. So I want it to be there instead.
>> Jason Lengstorf: And that means that I no longer need this static images folder either, so I can just delete that.
>> Jason Lengstorf: So now that we've got this, what's gonna happen is Gatsby's gonna look inside of this images folder.
[00:03:35] And because we've got the transformers for the transformer and the plugin for sharp, it's going to do stuff to those images. And that is a really, really powerful model for us because what it means is that we can get in here and do some really cool things with these images.
[00:03:54] So let's start our server again.
>> Jason Lengstorf: And once we get up and running, because we haven't written any code, nothing's gonna be happening yet. But let's jump into the playground.
>> Jason Lengstorf: And what I'm going to do is, let's pull up just our images.
>> Jason Lengstorf: And we'll start by looking at the relative path.
[00:04:22] So if I run this, we can see now that Gatsby is aware that this image exists. And it can find it. And that's useful. We just, through that alone, would be able to identify where the file is. And theoretically, we could try to bring it in or something.
[00:04:38] But that's not super useful now. But because we've installed the sharp stuff, we're able to,
>> Jason Lengstorf: Where did it go?
>> Jason Lengstorf: Need to refresh?
>> Jason Lengstorf: Here, we can get into childImageSharp. And childImageSharp is a whole other node that has all sorts of stuff in it. So one of the things that we can do is we can get the original image.
[00:05:12] And if I get the original image, that needs a width, a height and a source. So I can just kinda get some data about this.
>> Jason Lengstorf: And so, we can see, this image is way too big. We just don't need it to be that big. But we would be able to link to that directly.
[00:05:27] We could put this in as our source on the background image and it would work. But it wouldn't solve our problem because the image would still be huge, it's the original image. So instead, we're going to use something called a fluid image.
>> Jason Lengstorf: And in a fluid image, we have a handful of options.
[00:05:46] We create a base64 encoded version of the image. We can do a traced SVG version of the image, which is something we're not gonna get into today, but it's really cool. You can get the aspect ratio. You can get its source. So if we grab its source, we can see, okay, that's good.
[00:06:01] What if we want its srcSet?
>> Jason Lengstorf: Let's grab that, okay, so now we're looking at cool things. All right, here's the original, there's the big one. And if I come out here to my localhost and I just dropped this in, there's my giant image, right? And this is the uncompressed, full-size image.
[00:06:22] But I also have, here's a 400 pixel version of it. So I can come back out here. And let's look at this one instead. And now, we've got a smaller version of it. And if we wanna really tiny version of it, like a thumbnail version, I can come back out here and grab the thumbnail version.
[00:06:43]
>> Jason Lengstorf: And so basically, what Gatsby's done is it's taken this image and it's created a whole array of different sizes for different viewports and different resolutions, so that we don't have to do that work.