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
        }
      }
    }
  }
}

Fixed

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

Resizing

On both resize and fixed 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
        fixed(width: 100, height: 100) {
          width
          height
          src
          srcSet
        }
      }
    }
  }
}

Fluid

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 fluid you specify a maxWidth, the max width the container of the images reaches.

GraphQL query

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

WebP Images

WebP is an image format that provides lossy and lossless compression that may be better than JPEG or PNG. The srcWebp and srcSetWebp fields are available for fixed and fluid queries.

WebP is currently only supported in Chrome and Oprah browsers, and you'll want to fall back to another format for other clients. When this query is used with gatsby-image WebP will be used automatically in browsers that support it.

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        fixed(width: 100) {
          width
          height
          src
          srcSet
          srcWebp
          srcSetWebp
        }
      }
    }
  }
}

Traced SVG previews

You can show a traced SVG preview to your users. This works equivalent to the responsive sizes feature except that you have to use the GatsbyContentfulSizes_tracedSVG fragment

GraphQL query

{
  allContentfulAsset {
    edges {
      node {
        title
        sizes(maxWidth: 614) {
          ...GatsbyContentfulSizes_tracedSVG
        }
      }
    }
  }
}

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