Optimizing Images

[00:00:00]
>> MDX is something that's really powerful, but there's something that we haven't talked about yet, which is probably the biggest factor in a lot of websites and that is images. The management of images can be an extraordinarily frustrating thing to do and I've noticed that on a lot of modern websites people have chosen to just not deal with it.

[00:00:24]
So if you go to a lot of websites, and you look at the network tab, you'll load 10s of megabytes of images and it just really can bog down the experience. It can lead to, like a lot of jumpy content, like there's nothing more annoying than when you go to a page and you get loaded and then the content that you're reading jumps down the screen because an image just popped in and these are all experiences that are solvable, but they're tricky.

[00:00:57]
And they require some custom code and they require some consideration. And a lot of times when we're on deadline, we gonna get something out the door, we just don't have the time or don't make the time to deal with those problems. And that's a real bummer, because I think that a poor image handling experience from a website is probably one of the most noticeably bad things that I deal with on my day to day internet browsing activity.

[00:01:27]
It is really the, like the thing that will get me to close a website faster than anything else is if I open a site and everything starts jumping around because the images don't load well, there's ads popping in all over the place, like if that content feels janky, it doesn't feel polished, I'm just like, you know what?

[00:01:47]
I don't really need to read whatever this article is, I'm gonna just do something else. So what I originally started using Gatsby for, honestly was image management. Gatsby has a very well at least when they first introduced it, a very novel approach to managing images, in that Gatsby itself as part of the build system will optimize and make responsive and handle UX, all sorts of improvements around the way the images work on your site.

[00:02:23]
And it's built into the framework so that we as web developers are not out here trying to remember or make time or convince somebody on the team that we need to carve out a sprint to fix images. Instead, we can as part of building our site, use Gatsby's image plugin, and the image stuff just happens, it's just done and we don't have to think about it.

[00:02:45]
Now there are still things that you want to think about which I've touched on a little bit when we were talking about gatsby-build times, and I'll talk about a little bit more as we get further into the section. But in general, a huge number of problems with images that lead to a poor UX, slow load times, bad SEO ranking because your site's not fast enough, etc, all of that stuff can be greatly improved with almost no work by using this gatsby-image-plugin.

[00:03:15]
So to do that, let's go ahead and install it and take a look at how it works. So we're gonna install gatsby-plugin-image, we're going to install gatsby-plugin-sharp. And sharp is a it's an open source library that does image conversion, so if you if you use sharp you can take a JPG and turn it into a WebP or take a PNG and turn it into, well, you probably turn it into a WebP or an avatar or something like that.

[00:03:51]
It's a really powerful library, it's originally built in C and ported into or I guess wrapped in node, which historically has been if you've ever seen me complain about sharp it's because sharp doesn't always build consistently, so the tool itself is wonderful, the port of it to note is sometimes frustrating.

[00:04:12]
But I haven't seen those problems in a while, so I imagine it's probably improved quite a bit. And then we've got the gatsby-transformer-sharp and so there are two things that happen there. Well, let's see there are three main buckets of plugins and then there's a lot of kind of auxilary use special case plugins and Gatsby.

[00:04:33]
There are standard plugins which are like the image plugin or like the MDX plugin, where you're basically saying I want to add this, this piece of functionality to Gatsby. There are source plugins like the file system source plugin which say I want you to pull in a certain type of data into Gatsby.

[00:04:55]
And then there are transformer plugins and transformer plugins are the ones that will say okay, I found a type of data I want to transform it into another type of data. So transformer-sharp will say I'm looking for files that are images and I will transform those into Gatsby optimized images.

[00:05:15]
So though you'll see those kind of categories and that's typically what each one is doing. So that's why we need a gatsby-plugin-harp and a gatsby-transformer-sharp. So let's get those installed, once we've got that in, we can head on down to the bottom of our Gatsby config and let's add some image setting.

[00:05:33]
So I want to include another instance of Gatsby source file system. And this one is gonna be for images. So we are going to say it's got a name of images and we want to run a path Of dirname and then remember way at the beginning when we were looking at this folder called Images in the source directory, we're finally gonna use that.

[00:05:59]
So it's gonna be source, images, And then we wanna include gatsby-plugin-image, gatsby-plugin-sharp, oops, And gatsby-transformer-sharp. Okay, so now that we've got those, let's restart our Gatsby server, npm run develop What did I break? I type out image. Image Try that one more time. Here we go. Okay, so everything is building.

[00:07:08]
And Once this finishes, there we go. Let's head over here and let's look at what we're getting. So I'm gonna start with all file and I'm gonna filter by the source instance name and lets just get the images. And I want to get nodes, and lets get the, I don't know, lets get the public URL.

[00:07:40]
Right, so this is a trick if you're trying to like pull in all of your images, you can filter by whatever the source instance name is in this case, that is what you have set here, the source instance and we set a name of images. So I'm pulling in all of the images and we're just getting the publicURL.

[00:07:59]
So if we build the Gatsby site, the images we'll be moved over to To this publicURL/data then I can add a hash, and then the name of the file. And this is a kind of nice feature if you want to quickly see what's going on. Now these images are pretty big so the previews don't show particularly well, but you can at least if you know what your images look like, quickly get a sense of which one you're looking at except for this one that apparently doesn't, I know why that one looks like that is, because that's a wall.

[00:08:37]
[LAUGH] So then in here, so we've got these these regular old files, but If we pull in the size, these are pretty well resized. I ran these through Squoosh.app, which if you haven't used Squoosh.app, it is a wonderful tool, do I have an image I can- Probably do here, here's an image, so this is a rubber duck that I made that I'm very happy about, but if I wanna resize this I can see, like I dropped this in and we're compressing it and we get a 92% file size reduction.

[00:09:17]
So it's down from 376 kilobytes to 31.1 kilobyte and you can kind of slide over to see what the difference in quality is, and it's there but it's subtle, you can't see too much of a difference. Now if I were to like take the quality way down, you can kind of see what happens, right?

[00:09:37]
Like it gets pretty, pretty gross, but we can play with it untill it looks good enough and you get a huge reduction in file size there. So anyways I ran these images through Squoosh to give us a pretty good starting point and there's a reason I did that cuz even though Gatsby is going to actually process these images for us, part of the build process means it still has to load the original images into memory.

[00:10:07]
So if I use the original size of these images like let's go to unsplash and look at the original size of this image, here, that's the image. So if we look at the original image, we can see let's open this in a new tab, and we'll look at the network tab here, and if I'm looking at my Network tab, disable the cache, we reload, this is 3.2 megabytes, so this is a huge file.

[00:10:41]
And if I want to process this, I pull it in, I load 3.2 megabytes into memory, I have to cut it up into different sizes, we'll look at what that looks like in a minute and do all this work, right? And that's a huge source file to start with, so I'm basically from the get go setting Gatsby up to fail because I'm saying, here's a huge file you don't need 90% of this do a bunch of extra work for no reason.

[00:11:06]
And then I go up to a dozen or 100 or 1000 pages and each one of them has a giant image on it like this and then I'm gonna get mad at Gatsby because Gatsby slow. It optimize your images a little bit, like the way that I would do this is so we take this image, we're gonna save it, maybe we're gonna save it.

[00:11:27]
Yeah, we'll save it here and then I would go over to Squoosh, and I've got my image, I drag this one in here, right? So now we've got this giant image and I'll just hit this resize button. Now I happen to know that I'm never gonna put anything on my site over 1600 pixels wide, so I can then make a call.

[00:11:52]
Let's resize this down to 1600 pixels, and I can do 75% quality like that still looks pretty good, I can barely tell the difference, right? And I've made a difference from 2.38 megabytes to 152 kilobytes. This is a enormous difference, especially when you start looking it like a site with 100s of images on it.

[00:12:14]
So this is a little bit of upfront work, you can automate this, there are tools that will let you do it. But ultimately just make sure people aren't dumping raw images from their camera or like your phone will take a photo and that photo is like 5 megabytes, don't just dump that straight into a Gatsby site.

[00:12:31]
Make it the smallest or the the largest size you'll actually use and optimize it beforehand and you're gonna really save yourself some build time that way. Okay, so diatribe aside. Let's get back into actually using these here. So we have our list of images, and these are the unoptimized ones.

[00:12:53]
So this is the full size image of 109 kilobytes to this one, yeah, so this one is 109 kilobytes and if I come out here and load, there it is, here's the image. Now I don't need that full size image, so I'm going to get my file, we'll get the nodes, right?

[00:13:10]
And then under here we get a childImageSharp, and that childImageSharp is gonna let us get what's called gatsbyImageData. Now if I query this, you'll notice that I should have filtered this down to be just the source instance name. So now just our images, we get a type of layout, we get a background color, we get the actual images, so there's a fallback image and then we get a source set and then we get different sources for different sizes, so like here's an image WebP and it gets resized down to like 512.

[00:13:51]
So this is actually really cool because what this means is now instead of these huge images, I can go to this one here. And this is a resize or that's the logo, let's look at a different one. So here is the the smashburger. Yeah, so here's the smashburger, this is the original and let's grab one of the smaller ones.

[00:14:20]
So this is a resized version of that smashburger. And you can see that Gatsby basically took each of these and made multiple versions of it so that when we do responsive images if I'm on a phone, I don't need a 1200 pixel wide version of this image, all I need is the 300 pixel wide version.

[00:14:43]
And if I'm on a modern browser and I can support WebP, I don't need a JPEG, I can use the WebP. And so let's actually look at how big the difference is on these two. So this is a JPEG, the JPEG is 88.4 kilobytes at full size. So let's do the same thing, same size, but with a WebP.

[00:15:04]
The WebP is 60% of the size, 65% of the size. That's a pretty notable difference for an image that more or less looks the same like there's barely any change in the quality of this and there's a huge change in the file size. So if your browser supports WebP definitely makes sense to use that, right?

[00:15:25]
And so Gatsby is giving us the ability to do that by providing not just JPEGs, but also the web piece, and it's doing that in a way that can be used with the store set attribute on images and pictures, which means that browsers will just naturally choose the smallest size that fits its specs.

[00:15:45]
So if I'm on a huge browser, it's gonna use the biggest possible image. If I'm on a teeny tiny little phone, it's gonna choose the image that actually fits the resolution of that phone. This is a really, really powerful way to deal with these problems so that we don't have to, I don't have to go generate all of these, I just have to make sure that the source image isn't a monster, right?

[00:16:08]
And, that's why this is such a cool setup, and honestly, I don't even need to make sure the source images is a monster, I could just let Gatsby have a nice, slow build and be okay with that. And, sometimes that's fine, you know? It just depends on like, what are you trying to optimize for?

[00:16:21]
Do you want to never have to do any manual work? Great, Gatsby will do it all, you just gotta wait.