gatsby-image

Speedy, optimized images without the work.

gatsby-image is a React component specially designed to work seamlessly with Gatsby's GraphQL queries. It combines Gatsby's native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.

Warning: gatsby-image is not a drop-in replacement for <img/>. It's optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img/> won't work with gatsby-image.

Demo

Problem

Large, unoptimized images dramatically slow down your site.

But creating optimized images for websites has long been a thorny problem. Ideally you would:

Resize large images to the size needed by your design
Generate multiple smaller images so smartphones and tablets don't download desktop-sized images
Strip all unnecessary metadata and optimize JPEG and PNG compression
Efficiently lazy load images to speed initial page load and save bandwidth
Use the "blur-up" technique or a "traced placeholder" SVG to show a preview of the image while it loads
Hold the image position so your page doesn't jump while images load

Doing this consistently across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.

Most solutions involve a lot of manual labor and bookkeeping to ensure every image is optimized.

This isn't ideal. Optimized images should be easy and the default.

Solution

With Gatsby, we can make images way way better.

gatsby-image is designed to work seamlessly with Gatsby's native image processing capabilities powered by GraphQL and Sharp. To produce perfect images, you need only:

Import gatsby-image and use it in place of the built-in img
Write a GraphQL query using one of the included GraphQL "fragments" which specify the fields needed by gatsby-image.

The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The gatsby-image component automatically sets up the "blur-up" effect as well as lazy loading of images further down the screen.

Install

npm install --save gatsby-image

Depending on the gatsby starter you used, you may need to include gatsby-transformer-sharp and gatsby-plugin-sharp as well, and make sure they are installed and included in your gatsby-config.

npm install --save gatsby-transformer-sharp
npm install --save gatsby-plugin-sharp

Then in your gatsby-config.js:

plugins: [
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`
];

How to use

This is what a component using gatsby-image looks like:

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill Image Optimization Made Easy with Gatsby.js

Two types of responsive images

There are two types of responsive images supported by gatsby-image.

Images that have a fixed width and height
Images that stretch across a fluid container

In the first scenario, you want to vary the image's size for different screen resolutions -- in other words, create retina images.

For the second scenario, you want to create multiple sizes of thumbnails for devices with widths stretching from smartphone to wide desktop monitors.

To decide between the two, ask yourself: "do I know the exact size this image will be?" If yes, it's the first type. If no and its width and/or height need to vary depending on the size of the screen, then it's the second type.

In Gatsby's GraphQL implementation, you query for the first type by querying a child object of an image called fixed — which you can see in the sample component above. For the second type, you do a similar query but for a child object called fluid.

Fragments

GraphQL includes a concept called "query fragments". Which, as the name suggests, are a part of a query that can be used in multiple queries. To ease building with gatsby-image, Gatsby image processing plugins which support gatsby-image ship with fragments which you can easily include in your queries.

Note, due to a limitation of GraphiQL, you can not currently use these fragments in the GraphiQL IDE.

Plugins supporting gatsby-image currently include gatsby-transformer-sharp, gatsby-source-contentful and gatsby-source-datocms.

Their fragments are:

gatsby-transformer-sharp

GatsbyImageSharpFixed
GatsbyImageSharpFixed_noBase64
GatsbyImageSharpFixed_tracedSVG
GatsbyImageSharpFixed_withWebp
GatsbyImageSharpFixed_withWebp_noBase64
GatsbyImageSharpFixed_withWebp_tracedSVG
GatsbyImageSharpFluid
GatsbyImageSharpFluid_noBase64
GatsbyImageSharpFluid_tracedSVG
GatsbyImageSharpFluid_withWebp
GatsbyImageSharpFluid_withWebp_noBase64
GatsbyImageSharpFluid_withWebp_tracedSVG

gatsby-source-contentful

GatsbyContentfulFixed
GatsbyContentfulFixed_noBase64
GatsbyContentfulFixed_tracedSVG
GatsbyContentfulFixed_withWebp
GatsbyContentfulFixed_withWebp_noBase64
GatsbyContentfulFluid
GatsbyContentfulFluid_noBase64
GatsbyContentfulFluid_tracedSVG
GatsbyContentfulFluid_withWebp
GatsbyContentfulFluid_withWebp_noBase64

gatsby-source-datocms

GatsbyDatoCmsFixed
GatsbyDatoCmsFixed_noBase64
GatsbyDatoCmsFluid
GatsbyDatoCmsFluid_noBase64

If you don't want to use the blur-up effect, choose the fragment with noBase64 at the end. If you want to use the traced placeholder SVGs, choose the fragment with tracedSVG at the end.

If you want to automatically use WebP images when the browser supports the file format, use the withWebp fragments. If the browser doesn't support WebP, gatsby-image will fall back to the default image format.

Please see the gatsby-plugin-sharp documentation for more information on tracedSVG and its configuration options.

"Fixed" queries

Component

Pass in the data returned from the fixed object in your query via the fixed prop. e.g. <Img fixed={fixed} />

Query

{
  imageSharp {
    # Other options include height (set both width and height to crop),
    # grayscale, duotone, rotate, etc.
    fixed(width: 400) {
      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
      ...GatsbyImageSharpFixed
    }
  }
}

"Fluid" queries

Component

Pass in the data returned from the fluid object in your query via the fluid prop. e.g. <Img fluid={fluid} />

Query

{
  imageSharp {
    # i.e. the max width of your container is 700 pixels.
    #
    # Other options include maxHeight (set both maxWidth and maxHeight to crop),
    # grayscale, duotone, rotate, etc.
    fluid(maxWidth: 700) {
      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
      ...GatsbyImageSharpFluid_noBase64
    }
  }
}

`gatsby-image` props

Name	Type	Description
`fixed`	`object`	Data returned from the `fixed` query
`fluid`	`object`	Data returned from the `fluid` query
`fadeIn`	`bool`	Defaults to fading in the image on load
`title`	`string`	Passed to the `img` element
`alt`	`string`	Passed to the `img` element
`className`	`string` / `object`	Passed to the wrapper element. Object is needed to support Glamor's css prop
`outerWrapperClassName`	`string` / `object`	Passed to the outer wrapper element. Object is needed to support Glamor's css prop
`style`	`object`	Spread into the default styles in the wrapper element
`imgStyle`	`object`	Spread into the default styles for the actual `img` element
`position`	`string`	Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned
`backgroundColor`	`string` / `bool`	Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string.
`onLoad`	`func`	A callback that is called when the full-size image has loaded.
`Tag`	`string`	Which HTML tag to use for wrapping elements. Defaults to `div`.

Image processing arguments

gatsby-plugin-sharp supports many additional arguments for transforming your images like quality, sizeByPixelDensity, pngCompressionLevel, cropFocus, greyscale and many more. See its documentation for more.

Some other stuff to be aware of

If you want to set display: none; on a component using a fixed prop, you need to also pass in to the style prop { display: 'inherit' }.
Images don't load until JavaScript is loaded. Gatsby's automatic code splitting generally makes this fine but if images seem slow coming in on a page, check how much JavaScript is being loaded there.

Current Tags

2.6.0-image-helpers.58 ... image-helpers (4 years ago)
3.11.0 ... latest (3 years ago)
2.1.0-loading-attribute.3 ... loading-attribute (6 years ago)
3.12.0-next.0 ... next (3 years ago)
2.2.15-otp-test.31 ... otp-test (5 years ago)
2.2.40-pr-20741.212 ... pr-20741 (5 years ago)
3.0.0-reach-router.13 ... reach-router (4 years ago)
2.2.46-state-machine.75 ... state-machine (5 years ago)
2.3.4-unifiedroutes.76 ... unifiedroutes (5 years ago)
2.3.4-unifiedroutes-v2.135 ... unifiedroutes-v2 (4 years ago)
3.0.0-v3rc.0 ... v3rc (4 years ago)

310 Versions

3.11.0 [deprecated] ... 3 years ago
3.12.0-next.0 [deprecated] ... 3 years ago
3.10.0 [deprecated] ... 3 years ago
3.11.0-next.0 [deprecated] ... 3 years ago
3.10.0-next.1 [deprecated] ... 3 years ago
3.9.0 [deprecated] ... 3 years ago
3.10.0-next.0 [deprecated] ... 3 years ago
3.8.0 [deprecated] ... 4 years ago
3.9.0-next.0 [deprecated] ... 4 years ago
3.7.1 [deprecated] ... 4 years ago
3.8.0-next.1 [deprecated] ... 4 years ago
3.7.0 [deprecated] ... 4 years ago
3.8.0-next.0 [deprecated] ... 4 years ago
3.7.0-next.2 [deprecated] ... 4 years ago
3.7.0-next.1 [deprecated] ... 4 years ago
3.6.0 [deprecated] ... 4 years ago
3.7.0-next.0 [deprecated] ... 4 years ago
3.5.0 [deprecated] ... 4 years ago
3.6.0-next.0 [deprecated] ... 4 years ago
3.4.0 [deprecated] ... 4 years ago
3.5.0-next.0 [deprecated] ... 4 years ago
3.3.0 [deprecated] ... 4 years ago
3.4.0-next.0 [deprecated] ... 4 years ago
3.3.0-next.1 [deprecated] ... 4 years ago
3.2.0 [deprecated] ... 4 years ago
3.3.0-next.0 [deprecated] ... 4 years ago
3.1.0 [deprecated] ... 4 years ago
3.2.0-next.0 [deprecated] ... 4 years ago
3.1.0-next.2 [deprecated] ... 4 years ago
3.0.0 [deprecated] ... 4 years ago
3.0.0-v3rc.0 [deprecated] ... 4 years ago
3.1.0-next.1 [deprecated] ... 4 years ago
3.0.0-reach-router.13 [deprecated] ... 4 years ago
3.1.0-next.0 [deprecated] ... 4 years ago
3.0.0-next.1 [deprecated] ... 4 years ago
3.0.0-next.0 [deprecated] ... 4 years ago
2.11.0 [deprecated] ... 4 years ago
2.12.0-next.0 [deprecated] ... 4 years ago
2.10.0 [deprecated] ... 4 years ago
2.11.0-next.0 [deprecated] ... 4 years ago
2.10.0-next.1 [deprecated] ... 4 years ago
2.9.0 [deprecated] ... 4 years ago
2.10.0-next.0 [deprecated] ... 4 years ago
2.8.0 [deprecated] ... 4 years ago
2.9.0-next.0 [deprecated] ... 4 years ago
2.7.0 [deprecated] ... 4 years ago
2.8.0-next.0 [deprecated] ... 4 years ago
2.6.0-image-helpers.58 [deprecated] ... 4 years ago
2.6.0 [deprecated] ... 4 years ago
2.7.0-next.0 [deprecated] ... 4 years ago
2.5.0 [deprecated] ... 4 years ago
2.6.0-next.0 [deprecated] ... 4 years ago
2.5.0-next.1 [deprecated] ... 4 years ago
2.5.0-next.0 [deprecated] ... 4 years ago
2.4.21 [deprecated] ... 4 years ago
2.4.20 [deprecated] ... 4 years ago
2.4.19 [deprecated] ... 4 years ago
2.4.18 [deprecated] ... 4 years ago
2.4.17 [deprecated] ... 4 years ago
2.4.16 [deprecated] ... 4 years ago
2.4.15 [deprecated] ... 4 years ago
2.3.4-unifiedroutes-v2.135 [deprecated] ... 4 years ago
2.4.14 [deprecated] ... 4 years ago
2.4.13 [deprecated] ... 4 years ago
2.4.12 [deprecated] ... 4 years ago
2.4.11 [deprecated] ... 4 years ago
2.3.4-unifiedroutes.76 [deprecated] ... 5 years ago
2.4.9 [deprecated] ... 5 years ago
2.4.8 [deprecated] ... 5 years ago
2.4.7 [deprecated] ... 5 years ago
2.4.6 [deprecated] ... 5 years ago
2.4.5 [deprecated] ... 5 years ago
2.4.4 [deprecated] ... 5 years ago
2.4.3 [deprecated] ... 5 years ago
2.2.46-state-machine.75 [deprecated] ... 5 years ago
2.4.2 [deprecated] ... 5 years ago
2.4.1 [deprecated] ... 5 years ago
2.4.0 [deprecated] ... 5 years ago
2.3.5 [deprecated] ... 5 years ago
2.3.4 [deprecated] ... 5 years ago
2.3.3 [deprecated] ... 5 years ago
2.3.2 [deprecated] ... 5 years ago
2.3.1 [deprecated] ... 5 years ago
2.3.0 [deprecated] ... 5 years ago
2.2.45 [deprecated] ... 5 years ago
2.2.44 [deprecated] ... 5 years ago
2.2.43 [deprecated] ... 5 years ago
2.2.42 [deprecated] ... 5 years ago
2.2.41 [deprecated] ... 5 years ago
2.2.40-pr-20741.212 [deprecated] ... 5 years ago
2.2.40 [deprecated] ... 5 years ago
2.2.39 [deprecated] ... 5 years ago
2.2.38 [deprecated] ... 5 years ago
2.2.37 [deprecated] ... 5 years ago
2.2.36 [deprecated] ... 5 years ago
2.2.34 [deprecated] ... 5 years ago
2.2.33 [deprecated] ... 5 years ago
2.2.32 [deprecated] ... 5 years ago
2.2.31 [deprecated] ... 5 years ago
2.2.30 [deprecated] ... 5 years ago
2.2.29 [deprecated] ... 5 years ago
2.2.28 [deprecated] ... 5 years ago
2.2.27 [deprecated] ... 5 years ago
2.2.26 [deprecated] ... 5 years ago
2.2.25 [deprecated] ... 5 years ago
2.2.24 [deprecated] ... 5 years ago
2.2.23 [deprecated] ... 5 years ago
2.2.21 [deprecated] ... 5 years ago
2.2.20 [deprecated] ... 5 years ago
2.2.19 [deprecated] ... 5 years ago
2.2.18 [deprecated] ... 5 years ago
2.2.17 [deprecated] ... 5 years ago
2.2.16 [deprecated] ... 5 years ago
2.2.15 [deprecated] ... 5 years ago
2.2.15-otp-test.31 [deprecated] ... 5 years ago
2.2.15-otp-test.30 [deprecated] ... 5 years ago
2.2.14 [deprecated] ... 5 years ago
2.2.13 [deprecated] ... 5 years ago
2.2.12 [deprecated] ... 5 years ago
2.2.11 [deprecated] ... 5 years ago
2.2.10 [deprecated] ... 5 years ago
2.2.9 [deprecated] ... 5 years ago
2.2.8 [deprecated] ... 5 years ago
2.2.7 [deprecated] ... 5 years ago
2.2.6 [deprecated] ... 5 years ago
2.2.5 [deprecated] ... 5 years ago
2.2.4 [deprecated] ... 5 years ago
2.2.3 [deprecated] ... 6 years ago
2.2.2 [deprecated] ... 6 years ago
2.2.1 [deprecated] ... 6 years ago
2.2.0 [deprecated] ... 6 years ago
2.1.4 [deprecated] ... 6 years ago
2.1.3 [deprecated] ... 6 years ago
2.1.2 [deprecated] ... 6 years ago
2.1.1 [deprecated] ... 6 years ago
2.1.0 [deprecated] ... 6 years ago
2.0.41 [deprecated] ... 6 years ago
2.0.40 [deprecated] ... 6 years ago
2.0.39 [deprecated] ... 6 years ago
2.0.38 [deprecated] ... 6 years ago
2.1.0-loading-attribute.3 [deprecated] ... 6 years ago
2.1.0-loading-attribute.2 [deprecated] ... 6 years ago
2.1.0-loading-attribute.1 [deprecated] ... 6 years ago
2.0.37 [deprecated] ... 6 years ago
2.0.36 [deprecated] ... 6 years ago
2.0.35 [deprecated] ... 6 years ago
2.0.34 [deprecated] ... 6 years ago
2.0.33 [deprecated] ... 6 years ago
2.0.32 [deprecated] ... 6 years ago
2.0.31 [deprecated] ... 6 years ago
2.0.31-alpha.0 [deprecated] ... 6 years ago
2.0.30 [deprecated] ... 6 years ago
2.0.29 [deprecated] ... 6 years ago
2.0.28 [deprecated] ... 6 years ago
2.0.27 [deprecated] ... 6 years ago
2.0.26 [deprecated] ... 6 years ago
2.0.25 [deprecated] ... 6 years ago
2.0.24 [deprecated] ... 6 years ago
2.0.23 [deprecated] ... 6 years ago
2.0.22 [deprecated] ... 6 years ago
2.0.21 [deprecated] ... 6 years ago
2.0.20 [deprecated] ... 6 years ago
2.0.19 [deprecated] ... 6 years ago
2.0.18 [deprecated] ... 6 years ago
2.0.17 [deprecated] ... 6 years ago
2.0.16 [deprecated] ... 6 years ago
2.0.15 [deprecated] ... 6 years ago
2.0.14 [deprecated] ... 6 years ago
2.0.13 [deprecated] ... 6 years ago
2.0.12 [deprecated] ... 6 years ago
2.0.11 [deprecated] ... 6 years ago
2.0.10 [deprecated] ... 6 years ago
2.0.9 [deprecated] ... 6 years ago
2.0.8 [deprecated] ... 6 years ago
2.0.7 [deprecated] ... 6 years ago
2.0.6 [deprecated] ... 6 years ago
2.0.5 [deprecated] ... 6 years ago
2.0.0 [deprecated] ... 6 years ago
2.0.0-rc.4 [deprecated] ... 6 years ago
2.0.0-rc.3 [deprecated] ... 6 years ago
2.0.0-rc.2 [deprecated] ... 6 years ago
2.0.0-rc.1 [deprecated] ... 6 years ago
2.0.0-rc.0 [deprecated] ... 6 years ago
2.0.0-beta.9 [deprecated] ... 6 years ago
2.0.0-beta.8 [deprecated] ... 6 years ago
2.0.0-beta.7 [deprecated] ... 6 years ago
1.0.55 [deprecated] ... 6 years ago
2.0.0-beta.6 [deprecated] ... 6 years ago
2.0.0-beta.5 [deprecated] ... 6 years ago
2.0.0-beta.4 [deprecated] ... 6 years ago
2.0.0-beta.3 [deprecated] ... 6 years ago
2.0.0-beta.2 [deprecated] ... 7 years ago
2.0.0-beta.1 [deprecated] ... 7 years ago
2.0.0-beta.0 [deprecated] ... 7 years ago
1.0.54 [deprecated] ... 7 years ago
2.0.0-alpha.9 [deprecated] ... 7 years ago
2.0.0-alpha.80a21f04 [deprecated] ... 7 years ago
2.0.0-alpha.e328d33f [deprecated] ... 7 years ago
2.0.0-alpha.8ac171a1 [deprecated] ... 7 years ago
2.0.0-alpha.8 [deprecated] ... 7 years ago
1.0.53 [deprecated] ... 7 years ago
2.0.0-alpha.7 [deprecated] ... 7 years ago
2.0.0-alpha.6 [deprecated] ... 7 years ago
1.0.52 [deprecated] ... 7 years ago
2.0.0-alpha.5 [deprecated] ... 7 years ago
2.0.0-alpha.4 [deprecated] ... 7 years ago
2.0.0-alpha.3 [deprecated] ... 7 years ago
2.0.0-alpha.2 [deprecated] ... 7 years ago
1.0.42-9 [deprecated] ... 7 years ago
1.0.42-8 [deprecated] ... 7 years ago
1.0.42-7 [deprecated] ... 7 years ago
1.0.42-6 [deprecated] ... 7 years ago
1.0.42-5 [deprecated] ... 7 years ago
1.0.51 [deprecated] ... 7 years ago
1.0.48 [deprecated] ... 7 years ago
1.0.42-4 [deprecated] ... 7 years ago
1.0.42-3 [deprecated] ... 7 years ago
1.0.42-2 [deprecated] ... 7 years ago
1.1.0-alpha.e9c3027b [deprecated] ... 7 years ago
1.1.0-alpha.5421f383 [deprecated] ... 7 years ago
1.1.0-alpha.523a4286 [deprecated] ... 7 years ago
1.1.0-alpha.5c9569c0 [deprecated] ... 7 years ago
1.0.47 [deprecated] ... 7 years ago
1.0.46 [deprecated] ... 7 years ago
1.0.45 [deprecated] ... 7 years ago
1.1.0-alpha.76793cd8 [deprecated] ... 7 years ago
1.1.0-alpha.4a09f745 [deprecated] ... 7 years ago
1.0.43 [deprecated] ... 7 years ago
1.1.0-alpha.20252dc3 [deprecated] ... 7 years ago
1.1.0-alpha.95fcd4af [deprecated] ... 7 years ago
1.0.42-1 [deprecated] ... 7 years ago
1.1.0-alpha.5f47082e [deprecated] ... 7 years ago
1.1.0-alpha.6ad61a13 [deprecated] ... 7 years ago
1.1.0-alpha.84bd71b4 [deprecated] ... 7 years ago
1.1.0-alpha.12622d64 [deprecated] ... 7 years ago
1.1.0-alpha.34eda94b [deprecated] ... 7 years ago
1.0.42 [deprecated] ... 7 years ago
1.1.0-alpha.9fe50b00 [deprecated] ... 7 years ago
1.1.0-alpha.f98688ee [deprecated] ... 7 years ago
1.0.42-0 [deprecated] ... 7 years ago
1.1.0-alpha.2cbec6d6 [deprecated] ... 7 years ago
1.0.41 [deprecated] ... 7 years ago
1.0.40 [deprecated] ... 7 years ago
1.1.0-alpha.e66c6c9c [deprecated] ... 7 years ago
1.0.39 [deprecated] ... 7 years ago
1.0.38 [deprecated] ... 7 years ago
1.0.38-0 [deprecated] ... 7 years ago
1.1.0-alpha.d0b8dd9e [deprecated] ... 7 years ago
1.1.0-alpha.067e672c [deprecated] ... 7 years ago
1.1.0-alpha.e28a1c8e [deprecated] ... 7 years ago
1.1.0-alpha.bb258cb5 [deprecated] ... 7 years ago
1.1.0-alpha.b68b7f5c [deprecated] ... 7 years ago
1.1.0-alpha.dd504153 [deprecated] ... 7 years ago
1.1.0-alpha.9e381f74 [deprecated] ... 7 years ago
1.1.0-alpha.1a8f691e [deprecated] ... 7 years ago
1.1.0-alpha.9d4de2a6 [deprecated] ... 7 years ago
1.1.0-alpha.6ab84875 [deprecated] ... 7 years ago
1.0.37 [deprecated] ... 7 years ago
1.0.36 [deprecated] ... 7 years ago
1.1.0-alpha.5182142b [deprecated] ... 7 years ago
1.1.0-alpha.32ef58da [deprecated] ... 7 years ago
1.1.0-alpha.2b695217 [deprecated] ... 7 years ago
1.1.0-alpha.53bbd4cd [deprecated] ... 7 years ago
1.0.35 [deprecated] ... 7 years ago
1.1.0-alpha.d1544e1b [deprecated] ... 7 years ago
1.1.0-alpha.3f307d61 [deprecated] ... 7 years ago
1.1.0-alpha.926cb6da [deprecated] ... 7 years ago
1.0.34 [deprecated] ... 7 years ago
1.1.0-alpha.f5c1df61 [deprecated] ... 7 years ago
1.1.0-alpha.7b47e00d [deprecated] ... 7 years ago
1.1.0-alpha.aeb05561 [deprecated] ... 7 years ago
1.0.33 [deprecated] ... 7 years ago
1.0.32 [deprecated] ... 7 years ago
1.1.0-alpha.9da1bca1 [deprecated] ... 7 years ago
1.1.0-alpha.e5586916 [deprecated] ... 7 years ago
1.1.0-alpha.8c822451 [deprecated] ... 7 years ago
1.1.0-alpha.e9df8e57 [deprecated] ... 7 years ago
1.1.0-alpha.03b9df85 [deprecated] ... 7 years ago
1.1.0-alpha.b50f2063 [deprecated] ... 7 years ago
1.1.0-alpha.a0a09c94 [deprecated] ... 7 years ago
1.1.0-alpha.f20ac0ed [deprecated] ... 7 years ago
1.0.31 [deprecated] ... 7 years ago
1.0.30 [deprecated] ... 7 years ago
1.0.29 [deprecated] ... 7 years ago
1.0.28 [deprecated] ... 7 years ago
1.0.27 [deprecated] ... 7 years ago
1.0.26 [deprecated] ... 7 years ago
1.0.25 [deprecated] ... 7 years ago
1.0.24 [deprecated] ... 7 years ago
1.0.23 [deprecated] ... 7 years ago
1.0.21 [deprecated] ... 7 years ago
1.0.20 [deprecated] ... 7 years ago
1.0.19 [deprecated] ... 7 years ago
1.0.18 [deprecated] ... 7 years ago
1.0.16 [deprecated] ... 7 years ago
1.0.15 [deprecated] ... 7 years ago
1.0.14 [deprecated] ... 7 years ago
1.0.13 [deprecated] ... 7 years ago
1.0.12 [deprecated] ... 7 years ago
1.0.11 [deprecated] ... 7 years ago
1.0.10 [deprecated] ... 7 years ago
1.0.9 [deprecated] ... 7 years ago
1.0.8 [deprecated] ... 7 years ago
1.0.7 [deprecated] ... 7 years ago
1.0.6 [deprecated] ... 7 years ago
1.0.5 [deprecated] ... 7 years ago
1.0.4 [deprecated] ... 7 years ago
1.0.3 [deprecated] ... 7 years ago
1.0.2 [deprecated] ... 7 years ago
1.0.1 [deprecated] ... 7 years ago

gatsby-image

Problem

Solution

Install

How to use

Two types of responsive images

Fragments

gatsby-transformer-sharp

gatsby-source-contentful

gatsby-source-datocms

"Fixed" queries

Component

Query

"Fluid" queries

Component

Query

gatsby-image props

Image processing arguments

Some other stuff to be aware of

Current Tags

310 Versions

`gatsby-image` props