Understanding gatsby-image (Part 1): graphql, generated files & markup

  • Generating a bunch of image files into your /public/static folder based on an input image file and a graphql query that describes what kind of images you want (gatsby-plugin-sharp)
  • Produce markup and css to take care of the appearance of these images on the page (full width, cover/contain, etc.) (gatsby-image)
  • Getting a smooth appearance of a newly loaded image, e.g. by first showing a blurred base-64 image and replacing it with a full-resolution one, once it is loaded. This is known as the “blur up” technique popularized by Medium and Facebook (gatsby-image)
  • Prevent image jumping, when the image loads due to the exact image size not known before loading (gatsby-image)
  • Give you lazyloading by using IntersectionObserver in the browser (gatsby-image)

Fluid vs. Fixed

The graphql query

Fixed

query{
file(
relativePath: { eq: "path-to-file/myfile.jpg"}
) {
imageSharp {
fixed(width: 400) {
...GatsbyImageSharpFixed
}
}
}
{
base64
width
height
src
srcSet
}

Fluid

query{
file(
relativePath: { eq: "path-to-file/myfile.jpg"}
) {
imageSharp {
fluid(maxWidth: 1200) {
...GatsbyImageSharpFluid
}
}
}
}
{
base64
aspectRatio
src
srcSet
sizes
}

The generated image files

Fixed

Fluid

The generated markup

Fixed

A peak into the generated markup with Firefox devtools

Fluid

A peak into the generated markup with Firefox devtools

👉 Continue with Part 2 of this series about gatsby-image: “Responsive images 101”

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexa Steinbrück

Alexa Steinbrück

A mix of Frontend Development, Machine Learning, Musings about Creative AI and more