2021 seems to be flying by quickly. March is off to a great start with the coming and going of GatsbyConf 2021 and the big announcement of Gatsby v3.0! There are many reasons to love Gatsby and v3.0 brings with it many new features and changes:
Wow! There are many things to digest here, but perhaps the most exciting for me is the newly revamped Gatsby Plugin Image that shipped with Gatsby v3.0!
Images are a key component to building beautiful user interfaces, but optimizing them in a performant manner can prove to be anything but easy. Performant user interfaces (specifically when it comes to images) require a lot of thought. After all, we don’t want to load large images to be displayed for mobile users and likewise, we don’t want to serve small images for larger devices. Luckily, Gatsby provides an official plugin that not only optimizes our images but also produces the images at multiple sizes so our app can choose the best size for the screen that’s viewing the webpage.
Before v3.0, Gatsby Image required you to make a query and pass the image source to a single generic
<Img />
component provided from the plugin. While not difficult to work with, the plugin required some tinkering to get working properly.Rebuilt from the ground-up, Gatsby Plugin Image provides two new components for static and dynamic images, along with a few properties for how the image should be displayed before it fully loads.
For static images that will always be the same, the new
<StaticImage />
component should be utilized. Here's an example taken from official documentation.import { StaticImage } from "gatsby-plugin-image"
export function Dino() {
return <StaticImage src="../images/dino.png"
alt="A dinosaur" />
}
As applications become more complex, it’s not uncommon for images to be dynamically sourced. In situations like this, the revamped plugin provides a component called
<GatsbyImage />
. This component works very similarly to the old plugin. Here's an example.import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function BlogPost({ data }) {
const image = getImage(data.blogPost.avatar)
return (
<section>
<h2>{data.blogPost.title}</h2>
<GatsbyImage image={image} alt={data.blogPost.author} />
<p>{data.blogPost.body}</p>
</section>
)
}
export const pageQuery = graphql`
query {
blogPost(id: { eq: $Id }) {
title
body
author
avatar {
childImageSharp {
gatsbyImageData(
width: 200
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}
`
As you’d expect from an official plugin, the new Gatsby Plugin Image provides several options for customization. Options are passed to the
<StaticImage />
component as props, or through the GraphQL resolver for the <GatsbyImage />
component.I’d like to focus on the
placeholder
option, which determines how the image is displayed until fully loaded. According to the documentation,To ensure that the layout does not jump around, a placeholder is displayed before the image loads.
You’ve probably seen this before (it’s very common on blog sites) — you load a page and see a temporary blurred block that eventually clears up and displays the crisp image.
The Gatsby Plugin Image provides three types of placeholders for the component:
For a full list of options and integration steps, refer to the official documentation.
Migrating to the new system is easy thanks to a codemod released by the Gatsby team. I updated my personal website to use the new Gatsby Plugin Image within 5 minutes thanks to the direct documentation!
The new Gatsby Plugin Image has been rebuilt from the ground-up and provides several new features and enhancements that make working the plugin much easier. If you’re coming from a past Gatsby project, it’s easy to migrate to the new system. If you’re new, the Gatsby team has done a wonderful job of producing easy-to-understand documentation.
Did you attend GatsbyConf this year? What was your favorite announcement?
Previously published at https://braydoncoyer.dev/blog/gatsbyconf-2021-gatsby-v3-and-the-new-gatsby-image/