Example of using Contentful as a data source for a Gatsby site

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

Normann CopenhagenLemnosToysHudson Wall Cup Home and KitchenPlaysam StreamlinerPlaysamSoSo Wall ClockChive logoWhisk beatersHouse icon

GraphQL query

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

Responsive Resolution

If you make queries with resolutions 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
        resolutions(width: 100) {
          width
          height
          src
          srcSet
        }
      }
    }
  }
}

Resizing

On both resize and resolutions 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
        resolutions(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 sizes you specify a maxWidth, the max width the container of the images reaches.

GraphQL query

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

The src for this website is at https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful

The Contentful site that is providing the data for this site is at https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1