feat(remark-images): Added support for WebP versions in addition to fallbacks.

[Mike-Dax]

Hey there,

This PR adds an option to gatsby-remark-images to allow for adding webp images alongside the regular formats as fallbacks.

Usage

If a previous config was:

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 900,
    quality: 90,
  },
},

Adding the following will generate WebP files alongside the fallbacks.

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 900,
    quality: 90,
    withWebp: true,
  },
},

Additionally, you can pass an options object in order to have different options for the WebP files, such as a higher quality (for the same file size cost).

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 900,
    quality: 60,
    withWebp: {
      quality: 80,
    },
  },
},

Implementation Details

gatsby-plugin-sharp has an additional key returned from the fluid function: srcSetType. It returns essentially image/jpeg or image/webp, etc, depending on what the end mimetype is. It has support for png, jpeg, webp - the ones in the documentation. I'm not sure if tiff is supported by these other plugins? It's not in the documentation as an option so I didn't add it here.

---

gatsby-remark-images checks for the presence of the withWebp option. If it's not set, it renders the image as usual:

<img
  class="${imageClass}"
  style="${imageStyle}"
  alt="${node.alt ? node.alt : defaultAlt}"
  title="${node.title ? node.title : ``}"
  src="${fallbackSrc}"
  srcset="${srcSet}"
  sizes="${fluidResult.sizes}"
/>

If it is set, it will render out WebP versions with either the options previously provided for the fallbacks, or custom options if they are set.

The html will then resemble this:

<picture>
  <source
    srcset="${webpFluidResult.srcSet}"
    sizes="${webpFluidResult.sizes}"
    type="${webpFluidResult.srcSetType}"
  />
  <source
    srcset="${srcSet}"
    sizes="${fluidResult.sizes}"
    type="${fluidResult.srcSetType}"
  />
  <img
    class="${imageClass}"
    style="${imageStyle}"
    src="${fallbackSrc}" 
    alt="${node.alt ? node.alt : defaultAlt}"
    title="${node.title ? node.title : ``}"
    src="${fallbackSrc}"
  />
</picture>

This has the advantage of not requiring javascript in order for the optimum image set to be used. Old browsers use the img tag as usual, modern browsers will utilise the <source/> srcsets. Chrome and other WebP supporting browsers will utilise the WebP version of the images.

I also added minor doc changes to gatsby-remark-images, there was a missing period in a couple lines. I've also added explicit notation that the quality option is available since I had trouble finding out it existed when I started this journey. The withWebp option usage has also been added to the docs.

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit ac1083d

https://deploy-preview-6495--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for using-drupal ready!

Built with commit ac1083d

https://deploy-preview-6495--using-drupal.netlify.com

[m-allanson]

Thanks @Mike-Dax. This is a really nice first PR, more of these please :)

[gatsbot]

Holy buckets, @Mike-Dax — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[m-allanson]

I've just published new beta releases with these changes.

[KyleAMathews]

Nifty!