Load Images in Gatsby.js with gatsby-source-filesystem
In this lesson you will learn how to increase performance of the images used in your website built with Gatsby.js. Img component provided by Gatsby enables lazy loading, applies cool visual effects on image loads and is virtually everything you need to comfortably work with images.
Instructor: [00:00] We are now in the root folder of default starter generated by Gatsby, which is this webpack in WebQL to build blazing fast websites with React. Today, we will explore how to use Gatsby Image to achieve better performance and cool effects on image loads.
[00:14] As you can see, we import our image component from component/image, and use it here in our JSX. For now, it has just a placeholder of h2. We want to work with this image, which is situated in images/gatsby [inaudible] .png.
[00:33] Here is our actual component that we will be working with. Let's start by importing image from Gatsby image, and static query, together with GraphQL, so we can actually access our image in the component. Before we can proceed with querying our image, we first need to tweak our Gatsby config a little bit.
[00:53] Let's add the following lines. Here, we are using Gatsby source file system, which is Gatsby plugin, and specify the paths to the folder which we want to use in our queries. Give it a name of images, so we can later access it in our GraphQL query.
[01:09] To query any type of content inside of component which is not located in pages folder of Gatsby project, we use static query. Note that ones located in pages are absolutely different when it comes to querying data in them.
[01:22] Let's explore static query component. We have query prop and render prop. Inside query prop, we need to specify our actual GraphQL query, which will return data. Inside render prop, we use these data to display our image, which we imported here.
[01:42] Our GraphQL query should look something like this. Here, we are just specifying that we want to run the query. We want to return placeholder image. This is the name that we want to use. Here, we are using the relative paths equals to Gatsby [inaudible] .png to query a specific image we want.
[02:02] This is where some actual magic happens. Image Sharp is the processing engine that generates thumbnail images of our image, and helps us to achieve that blurry effect when the image is first loaded on the page. You will see it in a minute.
[02:18] Then we want to specify the dimensions of our image. It can be fluid, with a max width. This image will stretch across the container. We can also use something like this, fixed width of hundred, and height of hundred to make it fixed.
[02:43] Let's stick to fluid version of image for the sake of this tutorial, and continue. Here, we want to access all the fields of our returned image. Then we want to use them in our render prop. Let's first explore data returned to us by GraphQL.
[03:02] We pass data here, and just log it into our console. As you can see, GraphQL fragments have generated lots of fields for us, but we will just need fluid to use it with our image. Let's pass it in our component, and see what happens.
[03:20] We have seen that our image got blurry right at the beginning, and then it became a full resolution. This is how Gatsby optimizing images. Apart from that, it achieves maximum performance by lazy loading them in our component.
[03:34] We can also a little bit change our lower image visual. Let's use traced SVG here, and see what happens when we reload the page. Our image should get a new blurry visual. Let's say we changed our minds now, and we want to use fixed image on the page.
[03:53] Now, we would need to change all of fluid ones to fixed ones. This one should be large. We can see that our image became smaller, and got the same lazy load as previous.