Image API examples

Gatsby offers rich integration with Contentful's Image API

Open GraphiQL on your own site to experiment with the following options

Resize

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        resize(width: 100) {
          src
          width
          height
          aspectRatio
        }
      }
    }
  }
}

Responsive Resolution

If you make queries with responsiveResolution then Gatsby automatically generates images with 1x, 1.5x, 2x, and 3x versions so your images look great on whatever screen resolution of device they're on.

If you're on a retina class screen, notice how much sharper these images are than the above "resized" images.

You should prefer this operator over resize.

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        responsiveResolution(width: 100) {
          width
          height
          src
          srcSet
        }
      }
    }
  }
}

Resizing

On both resize and responsiveResolution you can also add a height argument to the GraphQL argument to crop the image to a certain size.

You can also set the resizing behavior and resizing focus area

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        responsiveResolution(width: 100, height: 100) {
          width
          height
          src
          srcSet
        }
      }
    }
  }
}

Responsive Sizes

This GraphQL option allows you to generate responsive images that automatically respond to different device screen resolution and widths. E.g. a smartphone browser will download a much smaller image than a desktop device.

Instead of specifying a width and height, with responsiveSizes you specify a maxWidth, the max width the container of the images reaches.

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        responsiveSizes(maxWidth: 613) {
          sizes
          src
          srcSet
        }
      }
    }
  }
}