Creates gatsby-image compatible field based on any string field (with image url) of the node, leveraging imgix CDN. Pretty similar to what gatsby-plugin-remote-images does, except images are not processed locally (during the build time), but in the request time.



First, install the plugin.

npm install --save gatsby-source-imgix


Second, set up the gatsby-config.js with the plugin. The most common config would be this:

module.exports = {
  plugins: [
      resolve: `gatsby-source-imgix`,
      options: {
        imgixDomain: 'your_imgix_domain',
        imgixToken: 'your_imgix_token',
        imageOptions: [
            nodeType: 'myNode',
            sourcePath: 'url_to_original_image',
            fieldName: 'image_field_name',

Where sourcePath field should contain an image url.