Gatsby Tutorial #16 - Optimized Images

Key Takeaways

all right then gang so in a previous tutorial i showed you how we could use this image on the home page and we did that by putting the image inside this static folder right here and because we put it in the static folder gatsby made it public to the browser and if we just wanted to use it in a component we could do we could just reference it like so because it was made public to the browser now images out of the box when we use the static folder like this they are not really optimized for the web someone viewing the website on a mobile is going to ultimately download the same image if it's a big image as those viewing it on a desktop and that's not really needed and also they're not going to load in lazily they're not resized automatically etc so they're not optimized in any way shape or form now when we're using gatsby we can use a gatsby plugin or a number of them together to optimize images and to solve these kinds of problems now this plugin is called gatsby image so the gatsby image plugin gives us access to an image component which we can use and also we need two other plugins installed for this to work as well if we scroll down it might show us this we also need to install gatsby transformer sharp and gatsby plugin sharp so these other plugins are responsible for processing our images and creating extra image options for our graphql layer the idea being is that we're going to use a query to get the optimized images we need instead of just referencing a public address so let's start by installing this thing right here so i'm going to copy that open up my terminal and come over here and i'm going to paste in and press enter and then also while that's going on i'm going to come back over here and i'm going to grab this because these are the other two things we need to install as well so remember this one gives us access to the image component which we're going to use and this one right here is responsible for processing the images and giving us a graphql interface so i'm going to copy that as well come back over here paste them in and press enter to install all right so now that's done the next thing i need to do is come to the source folder let me just close some of these and create an images folder now remember this has to go inside the source folder because we're going to process those images if we place it inside static then it's just going to be made available to the browser we're going to do some processing on these images and they're going to get added to our graphql layer so first things first i'm just going to move this banner from the static into this images folder right here now the next thing we need to do is open up gatsby config because right here we need to configure the plugins we just installed and the two plugins we need to add are these two right here i'm just going to paste them in gatsby transformer sharp and gatsby plug-in sharp so that was those two things over here gatsby transformer sharp and gatsby plug-in shop so we register those two plugins right here now we also need to do one more thing we need to add in a file system source instance for the images folder because even though we have these gatsby still doesn't know to look inside this images folder because we are going to use this file thing over here to grab the images and it needs access to that directory so let me now copy this thing right here this instance of gatsby source file system and paste in another one down here now we're going to call that images and we're going to change this to images as well so now we've done this we can open up our terminal we're going to cancel out of the current process and we're going to run gatsbit develop again so that it catches these changes and we can preview all of that in graphical all right then so the way now that we would get an image is by first of all going to file because we just want a single image so we go to file and then i'm going to use an argument called relative path because i want to dictate which file i want to get if i don't do this then it's just going to get any old file it finds but i want to say what the relative path is going to be now in our case it's just going to be banner.png that is the relative path relative to this folder so all i need to do is pass into this equals and then banner dot png like so so we're telling it to find that particular file now once we have that we can come down here and you can see we have this child image sharp so remember these plugins right here image sharp or transformer sharp and plug-in sharp this is what it's using to give us these things right here so if i open this we have different properties and the properties i'm interested in are either fixed or fluid so you can have two different types of image you can either have a fixed one which isn't really responsive or a fluid one which is with different sizes so we're gonna go with a fluid one and then you can get several different properties for this image so for example i might want the source and the source sets and maybe the sizes whatever you want and if i click play on this notice we get all of this data back so we have the source we have the source set and we have the sizes as well so all we need to do is make this kind of query from the page that we want to use this image in so that's what i'm going to do i'm going to grab all of this first of all and i'm going to go to the home page so let me open up pages and go to the home page and then at the bottom we're going to make a query so we'll say export const and this constant is called query we set that equal to graphql click on this at the bottom make sure it's imported at the top and then backticks like so and we can paste in this query okay then so we have this query let me just rename this i'm going to call this banner now this is okay but instead of us writing out a load of different properties that we want to get here we can use something known as a fragment and we have one here called gatsby image sharp fluid like so and what this does is basically package up a number of different properties that we need to pass into the image component that we're going to use in a minute so all we need to do is pass those properties in this collates them all together dot dot gatsby image sharp fluid so it includes things like the source like the source set etc so that's the query now what do we need to do to show this image on the page well remember we also installed this other package if we scroll up we can see we installed this as well gatsby image and this thing gives us access to an image components that we can use and we pass in this query data to that component so if i come to the top what i'm going to do is come to the bottom and paste in this so import img from gatsby image the package we installed now instead of this image down here we're going to use that new image component so capital i ng and then it's a self-closing tag and all we need to do is pass in a fluid prop this is because we're using a fluid image if we used a fixed image we'd use fixed instead and the same down here we'd use fixed instead of fluid if we wanted a fixed image but we're using fluid and all we need to do is pass in whatever we get back right here so how do we access that data well first of all let me comment this out and take in the data by destructuring it from the props we've seen all this before and i'm going to log this data to the console just so we can see how we can drill into that data to get the things that we need so if i save this and go over to the home page i'm going to inspect and let me just refresh and then go to the console and notice we have this file object right here so inside file we have child image sharp and inside child image sharp we have this fluid prop this is the object right here that we have to pass in to this thing inside the image component and like i said it contains a lot of different things these things right here so all we need to do is extract it from the data so all i'm going to do down here is uncomment this first of all and i'm going to pass in the data dot file dot child image sharp dot fluid like so and if i save this now hopefully we'll see that image on the page let me just get rid of this and then i'm just gonna refresh this page and now this is working so if i right click this and inspect you're gonna notice that this is not just an image tag but also if we scroll up it's a picture tag with a source set as well with different image sizes and that means that if i load this on a smaller device like a phone it's not going to download the large image it's going to download one of the smaller images that gatsby has created for us now so it's much more web optimized now one thing i do want to mention sometimes when you're using gatsby image like this it might give you some kind of error on the page a lot of the time secure that error all you have to do is cancel out of the server delete the cache and delete the public folder then restart the server and then it should work so hopefully that will solve your errors for you but we are going to be using images this way going forward using these plugins and next up we're going to add images for each of our different projects right here