How to get images from contentful using the natural width (resolution)?

Question

I have images of various sizes in Contentful i.e. widths of 200px, 600px, 800px, 1000px etc.

If I use responsiveresolution per the gatsby.js docs, it will up-res my small images:

allContentfulProduct {
    edges {
      node {
        id
        productName
        image {
          responsiveResolution(width: 600) {
            width
            height
            src
            srcSet
          }
        }
      }
    }
  }
}

How can I get the natural resolution for images from Contentful? responsiveresolution in gatsby.js could use better documentation!

Answer 1

You can get the natural resolution by running this query.

allContentfulProduct {
    edges {
      node {
        id
        productName
        image {
          file{
            url
          }
        }
      }
    }
  }
}

responsiveResolution is just a helper, and you can totally query the image without it as you would any other entry.