Welcome to part-6 of the series.
As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga
As told in the earlier post, we need to install some plugins for using one of the main feature of Gatsby, which is image optimization in sites.
We need to install gatsby-source-filesystem first. This plugin is for using data into your Gatsby application, from local filesystem. In our case it will be images. The docs for the same can be found here.
As per the docs we need to npm install the plugin in our project directory.
So, head over to project directory and stop any gatsby develop, if it is running.
Next, we will update our gatsby-config.js file to use this plugin to get our images folder path
Let’s quickly verify, whether our plugin is working properly. So, head over to Graphiql and refresh the browser. After that run the below query. It will give us the number of files in the images folder. As we have 6 files in images folder, so it will give output 6.
The gatsby-source-filesystem also provides us with another query called file, which gives details of any file present in images folder.
Next, we will install the gatsby-image plugin. This is the plugin, which we will use in our project to speed up image loading.
As per the docs, we have to do two npm installs. They are below.
npm install --save gatsby-image npm install --save gatsby-transformer-sharp gatsby-plugin-sharp
After, the installs are complete update the gatsby-config.js file as below.
Next, start the project by running gatsby develop. As per the documentation, we need to use the gatsby-image plugin as below. We can have two type of images — fixed or fluid.
How to use
We can use the below fragments in our code, in place of GatsbyImageSharpFixed
We will use this later in our project. For now we can check query in the GraphiQL.
Let’s also check for the fluid one. We can check this from the same file code, but we need to give aliases as the name is same.
fixed and fluid
As, you can see from above we cannot use the Fragments in our GraphiQL and using src. This is a limitation as of now, but we can use them without any error in our code.
Now, it’s time to use gatsby-image in our About component, which is in the home page. We will again create our GraphQL query in the GraphiQL first. Notice that we have also named the query — aboutImage.
Next, we will move to About component and paste our query from GraphiQL, to a variable getAbout. Also, notice that we had replaced src with a fluid fragment GatsbyImageSharpFluid_tracedSVG
Did some required imports at the top of the file and commented out our earlier import, which was used for displaying the image.
After that we are de-structuring aboutImage and then using the useStaticQuery, which is a hook provided by Gatsby.
Finally using Img from gatsby-image to display our image.
When you see the output on your browser, you can see the About component displaying the same image. But what you see is an optimized image, which loads very fast on all screen with even slow internet speeds.
This completes part-6 of the series. You can find the code for the same in this link.