[gatsby-source-contentful] Add support to prefer WebP images

examples/using-contentful/src/pages/image-api.js

@@ -69,17 +69,20 @@ export default props => {
  You should prefer this operator over <code>resize</code>.
  </p>
  {assets.map(({ node: { title, resolutions } }) => (
- <Img
- key={resolutions.src}
- alt={title}
- resolutions={resolutions}
- backgroundColor
- style={{
- marginRight: rhythm(1 / 2),
- marginBottom: rhythm(1 / 2),
- border: `1px solid tomato`,
- }}
- />
+ <div key={resolutions.src} style={{ display: "inline-block" }}>
+ <Img
+ key={resolutions.src}
+ alt={title}
+ resolutions={resolutions}
+ backgroundColor
+ style={{
+ marginRight: rhythm(1 / 2),
+ marginBottom: rhythm(1 / 2),
+ border: `1px solid tomato`,
+ display: "inline-block",
+ }}
+ />
+ </div>
  ))}
  <h4>GraphQL query</h4>
  <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
@@ -123,16 +126,17 @@ export default props => {
  </a>
  </p>
  {assets.map(({ node: { title, resizing } }) => (
- <Img
- key={resizing.src}
- alt={title}
- resolutions={resizing}
- style={{
- marginRight: rhythm(1 / 2),
- marginBottom: rhythm(1 / 2),
- border: `1px solid tomato`,
- }}
- />
+ <div key={resizing.src} style={{ display: "inline-block" }}>
+ <Img
+ alt={title}
+ resolutions={resizing}
+ style={{
+ marginRight: rhythm(1 / 2),
+ marginBottom: rhythm(1 / 2),
+ border: `1px solid tomato`,
+ }}
+ />
+ </div>
  ))}
  <h4>GraphQL query</h4>
  <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
@@ -198,6 +202,61 @@ export default props => {
  }
  }
  }
+}`,
+ }}
+ />
+ </pre>
+ <h2>WebP Images</h2>
+ <p>
+ WebP is an image format that provides lossy and lossless compression
+ that may be better than JPEG or PNG. The <code>srcWebp</code> and{" "}
+ <code>srcSetWebp</code> fields are available for{" "}
+ <code>resolutions</code> and <code>sizes</code> queries.
+ </p>
+ <p>
+ WebP is currently only supported in{" "}
+ <a href="https://caniuse.com/#feat=webp">Chrome and Oprah browsers</a>,
+ and you'll want to fall back to another format for other clients. When
+ this query is used with{" "}
+ <a href="https://www.gatsbyjs.org/packages/gatsby-image/">
+ <code>gatsby-image</code>
+ </a>{" "}
+ WebP will be used automatically in browsers that support it.
+ </p>
+ {assets.map(({ node: { title, webp } }) => (
+ <div key={webp.src} style={{ display: "inline-block" }}>
+ <Img
+ key={webp.src}
+ alt={title}
+ resolutions={webp}
+ style={{
+ marginRight: rhythm(1 / 2),
+ marginBottom: rhythm(1 / 2),
+ border: `1px solid tomato`,
+ }}
+ />
+ </div>
+ ))}
+ <h4>GraphQL query</h4>
+ <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
+ <code
+ dangerouslySetInnerHTML={{
+ __html: `{
+ allContentfulAsset {
+ edges {
+ node {
+ title
+ resolutions(width: 100) {
+ width
+ height
+ src
+ srcSet
+ srcWebp
+ srcSetWebp
+ }
+ }
+ }
+ }
 }`,
  }}
  />
@@ -223,6 +282,9 @@ export const pageQuery = graphql`
  resizing: resolutions(width: 100, height: 100) {
  ...GatsbyContentfulResolutions_noBase64
  }
+ webp: resolutions(width: 100) {
+ ...GatsbyContentfulResolutions_withWebp_noBase64
+ }
  sizes(maxWidth: 613) {
  ...GatsbyContentfulSizes_noBase64
  }

packages/gatsby-image/README.md

@@ -166,8 +166,12 @@ Their fragments are:
 
 * `GatsbyContentfulResolutions`
 * `GatsbyContentfulResolutions_noBase64`
+* `GatsbyContentfulResolutions_withWebp`
+* `GatsbyContentfulResolutions_withWebp_noBase64`
 * `GatsbyContentfulSizes`
 * `GatsbyContentfulSizes_noBase64`
+* `GatsbyContentfulSizes_withWebp`
+* `GatsbyContentfulSizes_withWebp_noBase64`
 
 ### gatsby-source-datocms
 

packages/gatsby-source-contentful/src/extend-node-type.js

@@ -330,6 +330,40 @@ exports.extendNodeType = ({ type }) => {
  height: { type: GraphQLFloat },
  src: { type: GraphQLString },
  srcSet: { type: GraphQLString },
+ srcWebp: {
+ type: GraphQLString,
+ resolve({ image, options, context }) {
+ if (
+ _.get(image, `file.contentType`) === `image/webp` ||
+ options.toFormat === `webp`
+ ) {
+ return null
+ }
+
+ const resolutions = resolveResponsiveResolution(image, {
+ ...options,
+ toFormat: `webp`,
+ })
+ return _.get(resolutions, `src`)
+ },
+ },
+ srcSetWebp: {
+ type: GraphQLString,
+ resolve({ image, options, context }) {
+ if (
+ _.get(image, `file.contentType`) === `image/webp` ||
+ options.toFormat === `webp`
+ ) {
+ return null
+ }
+
+ const resolutions = resolveResponsiveResolution(image, {
+ ...options,
+ toFormat: `webp`,
+ })
+ return _.get(resolutions, `srcSet`)
+ },
+ },
  },
  }),
  args: {
@@ -356,9 +390,17 @@ exports.extendNodeType = ({ type }) => {
  defaultValue: null,
  },
  },
- resolve(image, options, context) {
- return resolveResponsiveResolution(image, options)
- },
+ resolve: (image, options, context) =>
+ Promise.resolve(resolveResponsiveResolution(image, options)).then(
+ node => {
+ return {
+ ...node,
+ image,
+ options,
+ context,
+ }
+ }
+ ),
  },
  sizes: {
  type: new GraphQLObjectType({
@@ -373,6 +415,40 @@ exports.extendNodeType = ({ type }) => {
  aspectRatio: { type: GraphQLFloat },
  src: { type: GraphQLString },
  srcSet: { type: GraphQLString },
+ srcWebp: {
+ type: GraphQLString,
+ resolve({ image, options, context }) {
+ if (
+ _.get(image, `file.contentType`) === `image/webp` ||
+ options.toFormat === `webp`
+ ) {
+ return null
+ }
+
+ const sizes = resolveResponsiveSizes(image, {
+ ...options,
+ toFormat: `webp`,
+ })
+ return _.get(sizes, `src`)
+ },
+ },
+ srcSetWebp: {
+ type: GraphQLString,
+ resolve({ image, options, context }) {
+ if (
+ _.get(image, `file.contentType`) === `image/webp` ||
+ options.toFormat === `webp`
+ ) {
+ return null
+ }
+
+ const sizes = resolveResponsiveSizes(image, {
+ ...options,
+ toFormat: `webp`,
+ })
+ return _.get(sizes, `srcSet`)
+ },
+ },
  sizes: { type: GraphQLString },
  },
  }),
@@ -403,9 +479,15 @@ exports.extendNodeType = ({ type }) => {
  type: GraphQLString,
  },
  },
- resolve(image, options, context) {
- return resolveResponsiveSizes(image, options)
- },
+ resolve: (image, options, context) =>
+ Promise.resolve(resolveResponsiveSizes(image, options)).then(node => {
+ return {
+ ...node,
+ image,
+ options,
+ context,
+ }
+ }),
  },
  responsiveResolution: {
  deprecationReason: `We dropped the "responsive" part of the name to make it shorter https://github.com/gatsbyjs/gatsby/pull/2320/`,

packages/gatsby-source-contentful/src/fragments.js

@@ -18,6 +18,29 @@ export const contentfulAssetResolutionsNoBase64 = graphql`
  }
 `
 
+export const contentfulAssetResolutionsPreferWebp = graphql`
+ fragment GatsbyContentfulResolutions_withWebp on ContentfulResolutions {
+ base64
+ width
+ height
+ src
+ srcSet
+ srcWebp
+ srcSetWebp
+ }
+`
+
+export const contentfulAssetResolutionsPreferWebpNoBase64 = graphql`
+ fragment GatsbyContentfulResolutions_withWebp_noBase64 on ContentfulResolutions {
+ width
+ height
+ src
+ srcSet
+ srcWebp
+ srcSetWebp
+ }
+`
+
 export const contentfulAssetSizes = graphql`
  fragment GatsbyContentfulSizes on ContentfulSizes {
  base64
@@ -36,3 +59,26 @@ export const contentfulAssetSizesNoBase64 = graphql`
  sizes
  }
 `
+
+export const contentfulAssetSizesPreferWebp = graphql`
+ fragment GatsbyContentfulSizes_withWebp on ContentfulSizes {
+ base64
+ aspectRatio
+ src
+ srcSet
+ srcWebp
+ srcSetWebp
+ sizes
+ }
+`
+
+export const contentfulAssetSizesPreferWebpNoBase64 = graphql`
+ fragment GatsbyContentfulSizes_withWebp_noBase64 on ContentfulSizes {
+ aspectRatio
+ src
+ srcSet
+ srcWebp
+ srcSetWebp
+ sizes
+ }
+`