
This is one of the benefits of using gatsby-image in the first place: it does all the resizing and compressing automatically while doing the job of setting up srcset attributes in an tag. You can read up more on how this works in the Mozilla docs. Additionally, it holds the image position which prevents page jumps as they load and you can even create blur-up previews for each image.įor responsive images you’d generally use an tag with a bunch of appropriately sized images in a srcset attribute, along with a sizes attribute that informs the layout situation the image will be used in. It is the React component that Gatsby uses to process and place responsive, lazy-loaded images. If you haven’t done it already, you should go through the gatsby-image docs. Medium uses the blur-up technique for images. Adding to the friction is that gatsby-image works quite differently from a regular tag and implementing general use cases for sites could end up complex as you configure the whole system. I found the combination of gatsby-source-filesystem, GraphQL, Sharp plugins and gatsby-image quite tedious to organize and un-intuitive, especially considering it is fairly common functionality. This helps with a smoother user experience that is faster and more appealing. With plugins and some configuration, you can even setup image preloading and a technique called blur-up for your images using Gatsby.

For example, it helps you save time with image optimization because you don’t have to manually optimize each image on your own. GatsbyImageSharpFluid_tracedSVG for a different effect and experiment with fixed images.Gatsby does a great job processing and handling images. We'll now have all three images on our homepage! You can play around with the different Gatsby fragments for different loading effects.GatsbyImageSharpFluid will give the "blur up" effect, try. I'll add them right before the existing plugins. Open up your gatsby-config.js and add the plugins to it. The two sharp plugins are what processes the images before you display them. The gatsby-source-filesystem package allows Gatsby to use GraphQL on the images in a certain directory and make queries out of them. yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem If you are not using the default starter and already have these packages installed, you can skip this step. We'll also need three other packages, gatsby-transformer-sharp, gatsby-plugin-sharp, and gatsby-source-filesystem.
#GATSBY FLUID IMAGE INSTALL#
Install Gatsby Image yarn add gatsby-image I'll be using yarn for the rest of this demo. If you cloned the repo and used npm install, then continue to use npm so you don't mix the package installers. If you used the CLI, you'll need to continue with yarn since the initial packages were installed with yarn and there will be a yarn.lock file. You can clone the repo or use the Gatsby CLI to install the starter. We'll start off by installing the default Gatsby Starter. Here's a demo of the final product: Gatsby Image Demo ( view source ) Installing & Configuring Gatsby Image Test that you can query for your images using GraphQL.Ĭhoose which image type you will need, fixed or fluid, and add the query to your page.

Install the required npm packages and configure your gatsby-config.js settings. If you're new to Gatsby, I highly recommend going through their official tutorial first and familiarize yourself with how Gatsby works.Īdding Gatsby Image to your static website can be a bit tricky, especially since Gatsby uses GraphQL to query and load your images before they can be used. It will resize images for you, so you don't load huge images on a mobile device, and it will also lazy load your images with a cool "blur-up" effect so that your initial page loads are blazing fast. Gatsby Image is a React component that makes it easy to optimize all the images on your website.

Gatsby.js V2 was recently launched and there have been a few small changes to how Gatsby Image is implemented. ** NEW Video tutorial on Gatsby Image available on YouTube! **
