{"id":18665193,"url":"https://github.com/imgeng/imageengine-gatsby","last_synced_at":"2025-09-07T01:05:50.423Z","repository":{"id":57118268,"uuid":"429417792","full_name":"imgeng/imageengine-gatsby","owner":"imgeng","description":"A plugin for Gatsby to enable ImageEngine","archived":false,"fork":false,"pushed_at":"2025-08-25T14:38:01.000Z","size":1680,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-25T16:29:22.729Z","etag":null,"topics":["gatsby-image","gatsby-plugin","image-processing","imagecdn","imageengine"],"latest_commit_sha":null,"homepage":"https://support.imageengine.io/hc/en-us/articles/4415470516877-Getting-Started-With-ImageEngine-and-GatsbyJS","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imgeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-18T12:16:36.000Z","updated_at":"2024-11-11T06:09:13.000Z","dependencies_parsed_at":"2024-10-23T06:13:59.642Z","dependency_job_id":"ee2f7317-58ad-4d09-b82c-4282dc0113f7","html_url":"https://github.com/imgeng/imageengine-gatsby","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":"0.29032258064516125","last_synced_commit":"9fb23ef8adce096f3e3d55dc3abf231fd9c56eb1"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/imgeng/imageengine-gatsby","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgeng%2Fimageengine-gatsby","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgeng%2Fimageengine-gatsby/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgeng%2Fimageengine-gatsby/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgeng%2Fimageengine-gatsby/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imgeng","download_url":"https://codeload.github.com/imgeng/imageengine-gatsby/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgeng%2Fimageengine-gatsby/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273983118,"owners_count":25202096,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby-image","gatsby-plugin","image-processing","imagecdn","imageengine"],"created_at":"2024-11-07T08:26:39.462Z","updated_at":"2025-09-07T01:05:50.404Z","avatar_url":"https://github.com/imgeng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-imageengine\n\nThis is a plugin for [GatsbyJS](https://www.gatsbyjs.com) that allows you to seamlessly integrate [ImageEngine](https://imageengine.io) into your Gatsby workflow.\n\nIt includes functionality to make it easy to use external CMS (e.g.: `Contentful`, `Sanity.io`, `Storyblok`), static `File` assets created through `gatsby-plugin-filesystem`, and others, allowing them to be used directly with `Gatsby` components such as `GatsbyImage` and `ImageEngine engines`.\n\nHelpers to build your own urls and ImageEngine related functionality along with components are also exposed in order to provide flexibility in how you organise your assets and how you deal with including them in your final web pages/content.\n\n\n## Index:\n[Installation](#installation)\n\u003cbr/\u003e\n[Usage](#usage)\n- [ImageEngineAsset](#imageengineasset)\n- [Contentful](#contentful)\n- [Sanity.IO](#sanity-io)\n- [Storyblok](#storyblok)\n- [File](#file)\n- [Custom](#custom-nodes)\n\n\u003cbr/\u003e\n\n[Directives](#directives)\n- [Global Configuration](#configuring-global-directives)\n- [Query Directives](#query-directives)\n- [Formats](#formats)\n- [Graphql Resolvers](#graphql-imageengine-aware-resolvers)\n- [url Resolver](#url-resolver)\n- [gatsbyImageData Resolver](#gatsbyimagedata-resolver)\n- [responsive_details Resolver](#responsive_details-resolver)\n\n\u003cbr/\u003e\n\n[React Component](#react-component)\n\u003cbr/\u003e\n\n[Plain URLs without Graphql](#plain-urls-without-graphql)\n\n### Installation\n\nKeep your ImageEngine delivery address at hand. If you don’t have one, [get one here](https://control.imageengine.io/register).\n\nYou need to install the package on your npm project.\n\n```bash\nnpm install @imageengine/gatsby-plugin-imageengine\n```\n\n### Usage\n\nTo use the component you define on your `gatsby-config.js` the plugin, under the `plugins` key an object with the `resolve` key pointing to the package name and an `options` key containing at least a `sources` key with an array of sources you want to use.\n\n```javascript\nplugins: [\n  // ... other plugins\n  {\n    resolve: \"@imageengine/gatsby-plugin-imageengine\",\n    options: {\n      sources: [\n        {\n    source: \"contentful\",\n    ie_delivery_address: \"https://some-ie-url.cdn.imgeng.in/\"\n  },\n  {\n    source: \"sanityio\",\n    ie_delivery_address: \"https://another-ie-url.cdn.imgeng.in/\"\n  },\n    {\n    source: \"storyblok\",\n    ie_delivery_address: \"https://another-ie-url.cdn.imgeng.in/\"\n  },\n  {source: \"file\"}\n      ],\n      ie_delivery_address: \"https://yet-another-ie-url.cdn.imgeng.in/\"\n    }\n  }\n]\n```\n\nMost of these plugins on their turn require using additional plugins, including `gatsby-plugin-image`.\n\n\n#### ImageEngineAsset\n\nHow does it work? This plugin automatically creates child `ImageEngineAsset` nodes when using supported sources. This means you can use `graphql` to access these nodes and those contain all you need to use `GatsbyImage` or get an `ImageEngine` url. E.g.:\n\n```javascript\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport { useStaticQuery, graphql } from \"gatsby\";\n\nconst Lightbox = () =\u003e {\n    const data = useStaticQuery(graphql`\n\n      query {\n        allContentfulAsset {\n          nodes {\n            childImageEngineAsset {\n              gatsbyImageData(width: 500, height: 300, compression: 10)\n            }\n          }\n        }\n      }`);\n    \n    return (\n      \u003cdiv class=\"light-box\"\u003e\n        {data.allContentfulAsset.childImageEngineAsset.map(({ gatsbyImageData }, index) =\u003e {\n    return \u003cGatsbyImage key={`image-${index}`} image={gatsbyImageData} /\u003e;\n  })}\n      \u003c/div\u003e\n    );\n}\n```\n\nBuilt-in sources supported by the plugin automatically include `Contentful`, `Sanity.io` and `File` assets. In these cases you just need to define an object inside the `sources` key with the `source` and `ie_delivery_address` (e.g.: `{source: \"contentful\", ie_delivery_address: \"imageengine-delivery-address}`).\n\nYou can also set a global ImageEngine delivery address at the top level of the `options` object, with the key `ie_delivery_address` and in this case, `sources` that don't specify their own will use that. Between both, at least one has always to be set. It might be useful to use a global one if different sources use the same cdn address for some reason.\n\nIn the example above, `contentful` will use the `ie_delivery_address` address of `https://some-ie-url.cdn.imgeng.in/`, `sanityio` in turn will use `https://another-ie-url.cdn.imgeng.in/` and the `File` assets will default to `https://yet-another-ie-url.cdn.imgeng.in/`. This means you can create multiple `engines` in `ImageEngine` and use them easily in the same `Gatsby` project.\n\n#### Contentful\n\nFor `contentful` functionality to work you'll need to use [gatsby-source-contentful](https://www.gatsbyjs.com/plugins/gatsby-source-contentful/).\n\nWith that in place `Gatsby` will create Graphql Nodes for your Contentful elements. When an element is of the type `ContentfulAsset` we'll create a child node of `ImageEngineAsset` under it, that you can access through graphql. \n\nYou need to have an ImageEngine delivery address using `Contentful`'s CDN as origin and use that address as your `ie_delivery_address`.\n\n#### Sanity.IO\n\nFor `sanityio` you'll need to use [gatsby-source-sanity](https://www.gatsbyjs.com/plugins/gatsby-source-sanity/)\n\nThe same as with `contentful`, an `ImageEngineAsset` node is created as a child node.\n\nYou need to have an `ImageEngine` delivery address using `Sanity`'s CDN as origin and use that address as your `ie_delivery_address`.\n\n#### Storyblok\n\nFor `storyblok` functionality to work you'll need to use [gatsby-source-storyblok](https://www.gatsbyjs.com/plugins/gatsby-source-storyblok/).\n\nWith that in place `Gatsby` will create Graphql Nodes for your Storyblok elements. When an element is of the type `StoryblokEntry` we'll create a child node of `ImageEngineAsset` under it, that you can access through graphql. \n\nYou need to have an ImageEngine delivery address using `Storyblok`'s CDN as origin and use that address as your `ie_delivery_address`.\n#### File\n\nFor `File` assets you'll need to use [gatsby-source-filesystem](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/)\n\nIn this particular case, since it relies on static files, it will follow the same logic of using `File` assets with that plugin - you **cannot** use `StaticImage` with this plugin (read below). \n\nIn the `filesystem` plugin a file is only made available in the final build, if somewhere you query for the `publicURL` field of that file node. This plugin mimics that so for the final assets to be copied over to your build `static` folder, somewhere you'll need to query at least once for those `ImageEngineAssets` either the `gatsbyImageData` or `url` fields so that those files are copied over to static. This is important, because if you don't, then these files won't be available on your final build, and as such, when using the `ImageEngine` delivery address address it won't be able to retrieve them. \n\nAn example would be:\n\n```graphql\nallFile {\n  nodes {\n    childImageEngineAsset {\n      url(width: 500, height: 300, compression: 10)\n    }\n  }\n}\n```\n\nEven if you know your image is static at build time, you need to use `GatsbyImage` instead of `StaticImage`. `StaticImage` will try to download the asset at build time to process and create its `sharp` variants, but the `URL` for \"production\" (when building) will be the URL of `ImageEngine`'s CDN, so it won't exist until it's deployed, but because the build will fail to download the image, the CDN will not be able to mirror the file.\n\nIf you use the `gatsby-source-filesystem` plugin with a config of:\n```javascript\n{\n  resolve: `gatsby-source-filesystem`,\n  options: {\n    name: `images`,\n    path: `${__dirname}/src/images/`,\n  },\n}\n```\n\nAnd say you have a `main-page-header.jpg`, you can use it on a `GatsbyImage` by doing:\n\n```javascript\nimport * as React from \"react\";\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport { useStaticQuery, graphql } from \"gatsby\";\n\nconst IndexPage = () =\u003e {\n  const data = useStaticQuery(graphql`\n    query {\n      file(base: {eq: \"main-page-header.jpg\"}) {\n        childImageEngineAsset {\n    gatsbyImageData(width: 500, height: 300, compression: 10)\n  }\n      }\n    }`);\n\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003eSome header\u003c/h1\u003e\n      \u003cGatsbyImage image={data.file.childImageEngineAsset.gatsbyImageData} /\u003e\n    \u003c/main\u003e\n  );\n};\n```\n\nWhile developing the image will be retrieved from your static path, and when building for production the url will be pointing to your `ImageEngine` distribution path with the directives passed on the `gatsbyImageData` field query. In this case `width`, `height` (also used by the `GatsbyImage` component) and `compression` which is unique to `ImageEngine`.\n\n#### Custom Nodes\n\nFor types of sources for which you have no plugin available you can write your own bridge functions that enable creating `ImageEngineAsset` nodes.\n\nIn order to do that your `source` object has to specify both a `checker` function and a `transform` function.\n\n```typescript\nexport type IECheckFunction = (node: any, options?: IEPluginOption, global_options?: IEPluginOptions) =\u003e boolean;\nexport type IETransformFunction = (node: any, options?: IEPluginOption, global_options?: IEPluginOptions) =\u003e void;\n```\n\nSupport for a custom source could then be implemented with:\n\n```javascript\n{\n  resolve: \"@imageengine/gatsby-plugin-imageengine\",\n  options: {\n    sources: [\n      {\n        source: \"my-own-source\",\n  ie_delivery_address: \"https://some-url.cdn.imgeng.in/\",\n  checker: my_own_source_checker,\n        transform: my_own_transform\n      }\n    ]\n  }\n}\n```\n\nAnd then your checker function would be for instance:\n\n```typescript\nimport { IECheckFunction } from \"@imageengine/gatsby-plugin-imageengine\";\nconst checker: IECheckFunction = (node_object) =\u003e {\n    \n    let internal = node_object?.node?.internal;\n    return internal \u0026\u0026 internal.type === \"SomeNodeType\"\n};\n\nexport checker;\n```\n\nAnd your transform:\n\n```typescript\nimport { IETransformFunction, node_create, REPLACEMENT_TOKEN } from \"@imageengine/gatsby-plugin-imageengine\";\n\nconst transformer: IETransformFunction = (node_object, options, global_options) =\u003e {\n    let dist_url = options?.ie_delivery_address || global_options?.ie_delivery_address;\n    let directives = options?.directives || global_options?.directives;\n    let replace_url = \"https://some-cms-address/\";\n    let { url, contentType } = node_object.node.my_node_details;\n    let tokenized_url = url.replace(replace_url, REPLACEMENT_TOKEN);\n\n    return node_create(node_object, url, tokenized_url, dist_url, directives, contentType);\n};\n\nexport transformer;\n}\n```\n\n`node_object` is the parent object for which the `checker` function returns true.\n`options` are the specific options of the `source` object that specify this type of asset.\n`global_options` are the full options passed to the `gatsby-plugin-imageengine` \n\nWhen you're inside your `transformer` function you know this particular node returned true for your `checker` function.\n\nUltimately you need to call `node_create` with this `node` (which will be the parent), the default original url, a tokenized url (which is a url with a specific token for replacement that you need to use), the `ImageEngine Engine` distribution address, any default directives and optionally a mimeType.\n\n```typescript\nfunction node_create(node_object: any, base_url: string, tokenized_url: string, distribution_url: MaybeString,  directives: IEDirectives, mime_type?: string | undefined)\n```\n\nIn this particular case, let's imagine your node is an asset in some CMS and has a `url` field that contains the address to that asset. We replace the portion of the CMS address from the URL with the given token (imported from `gatsby-plugin-imageengine`) and use that as the `tokenized_url` and the original url as the `base_url`.\nThis way the plugin will know how to retrieve the final correct url for your asset in the `ImageEngine Engine` distribution.\n\n### Directives\n\n`ImageEngine` uses what is called `directives` (as query string paramaters) to define specific output details of images you want to optimize. \n\nTo see all possible directives and their values [@imageengine/imageengine-helpers](https://www.npmjs.com/package/@imageengine/imageengine-helpers)\n\n`@imageengine/imageengine-helpers` is a dependency on this package and you might use any of the types or helpers there included as well if needed.\n\nThere's two ways of specifying directives and both can be used together. You can define specific directives as defaults on the configuration, and/or specify them when querying through `graphql`.\n\n#### Configuring Global Directives\n\nFor the configuration you can both set them at a global level for all `sources` and individually for each `source`. On your `gatsby-node.js`, in the `@imageengine/gatsby-plugin-imageengine` configuration options\n\n```javascript\noptions: {\n  sources: [\n    {\n      source: \"contentful\",\n      ie_delivery_address: \"https://some-ie-url.cdn.imgeng.in/\",\n      directives: {\n        format: \"png\",\n  compression: 5,\n  fit: \"box\"\n      }\n    },\n    {\n      source: \"sanityio\",\n      ie_delivery_address: \"https://another-ie-url.cdn.imgeng.in/\"\n    },\n        {\n      source: \"storyblok\",\n      ie_delivery_address: \"https://another-ie-url.cdn.imgeng.in/\"\n    },\n    {source: \"file\"}\n  ],\n  ie_delivery_address: \"https://yet-another-ie-url.cdn.imgeng.in/\",\n  directives: {\n    format: \"jpg\",\n    sharpness: 5,\n    fit: \"cropbox\"\n  }\n}\n```\n\nThis means that assets for `Contentful` would have the default directives applied to each node automatically of `{format: \"png\", compression: 5, sharpness: 5, fit: \"box\"}` and all remaining ones `{format: \"jpg\", sharpness: 5, fit: \"cropbox\"}`.\n\n#### Query Directives\n\nThese are specified when querying for the specific `ImageEngineAsset` fields:\n\n```javascript\nurl(width: 500, height: 300, compression: 10, format: gif, fit: cropbox, sharpness: 30)\n```\n\nThe individual directives are applied on top of any global ones, and, ultimately, query level ones applied over any other. Basically the precedence is `query directives -\u003e source default directives -\u003e global default directives`.\nBesides the normal directives you can \"override\" the distribution address set in the config by using:\n\n```javascript\nurl(width: 500, height: 300, compression: 10, format: gif, fit: cropbox, sharpness: 30, ie_delivery_address: \"https://some-dist.com/\")\n```\n\nNotice that `gatsbyImageData` accepts in addition to the `ImageEngine` directives, the normal `arguments` for it, such as `formats`, `sizes`, `placeholders`, etc. Refer to the [gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/).\n\n#### Formats\n\nThere's 2 ways of specifying formats. `ImageEngine` serves by default the best format and compression level based on the network, browser and device requesting the image can handle, unless explicitly told to use a given format. `GatsbyImage` on the other hand has a tighter integration with `sharp` in order to provide that sort of functionality natively in `Gatsby` by specifying multiple sources by default.\n\nIn order to provide a more natural query and resulting picture/sources for those used to `ImageEngine` capabilities the default `formats` for the `gatsbyImageData` resolver is `[\"\"]`, instead of the usual `[\"\", \"webp\"]`.\n\nOn a `gatsbyImageData` query, you can specify either `format` or `formats`. `format` when specified overrides `formats`. `formats` when specified generates variations on the `sources` when included in a `GatsbyImage` component. Notice that both `format` and `formats` (as well as `fit`) are `Graphql`s `enum`s and not strings.\n\nTo illustrate the differences you can refer to the following examples:\n\n`gatsbyImageData(width: 500, height: 300)`\n\nNo `format`, nor `formats` specified. `GatsbyImage` an `img` tag with a `srcset` and `sizes`. The `ImageEngine` urls won't contain the `format` directive.\n\n`gatsbyImageData(width: 500, height: 300, format: jpg)`\n\n`format` specified. `GatsbyImage` will render an `img` tag with `srcset` and `sizes`. The `ImageEngine` urls will contain the `format` directive for `jpeg`.\n\n`gatsbyImageData(width: 500, height: 300, formats: [JPG])`. \n\n`formats` specified with a single type. `GatsbyImage` will render a single `img` tag, with `srcset` and `sizes`. The `ImageEngine` urls will contain the `format` directive for `jpeg`.\n\n`gatsbyImageData(width: 500, height: 300, formats: [NO_CHANGE, WEBP])`\n\n`formats` specified with  two types, the original (`NO_CHANGE`) and `WEBP`. `GatsbyImage` will render a `picture` element, with an `img` tag, and one `source` for webp, while the \u003cimg\u003e fallback lets ImageEngine decide on the format. The `source` urls for the `NO_CHANGE` format (the original) won't have a `format` directive, while the `WEBP` source will.\n\n`gatsbyImageData(width: 500, height: 300, formats: [JPG, WEBP])`\n\n`formats` specified with  two types, the `JPG` and `WEBP`, `GatsbyImage` will render a `picture` element, with an `img` tag, and one `source`. The `img` tag will have the attributes of the `JPG` version and the `source` for the `webp` version. \nAll urls generated will have the `format` directive applied, respectively `/f_jpeg` and `/f_webp`.\n\n#### Graphql ImageEngine aware resolvers\n\nThe `ImageEngineAsset` nodes created by `gatsby-plugin-imageengine` expose three resolver fields that accept directives.\n\n- url\n- gatsbyImageData\n- responsive_details\n\n\n##### url resolver\n`url` returns a simple url, correctly prefixed for the configured `ImageEngine engine` distribution for the given source. This is useful if you want to place the `url` directly in an `img` tag `src` attribute, pass it as a prop to some component, make a link, or for instance as a `background-image` on a CSS selector. \n\nLet's say you're integrating with `Contentful` and you have an `ImageEngine engine` configured for that `Contentful` source. Now you want to use the `ImageEngine` assets with specific quality and output settings. You can query for your `Contentful` node(s) in the same way as before, and include its `childImageEngineAsset`'s `url` field, for instance:\n\n```javascript\nquery {\n  allContentfulAsset {\n    nodes {\n      childImageEngineAsset {\n        url(width: 500, height: 300, compression: 10, format: gif, fit: cropbox, sharpness: 30)\n      }\n    }\n  }\n}\n```\n\nAssuming you configured your `Contentful` source `ie_delivery_address` with `https://some-ie.cdn.imgeng.in/` your returned `Contentful` assets would have a structure of:\n\n```javascript\n{\n  data: {\n    allContentfulAsset: {\n      nodes: [\n        {\n    childImageEngineAsset: {\n      url: \"https://some-ie.cdn.imgeng.in/skyr7ajehjkl/2BRg1oQsnOfNtA5KeDgRMh/844c4abe68cb56ec157aa906d98fe487/file-name.jpg?imgeng=/w_500/h_300/f_gif/m_cropbox/cmpr_10/s_30\"\n    }\n  },\n  // other nodes\n      ]\n    }\n  }\n}\n```\n\n##### gatsbyImageData resolver\n\nThe `gatsbyImageData` field is in all forms similar to the `url` but it also accepts the additional properties specific to the `GatsbyImage` component. Your query instead would look like:\n\n```javascript\nquery {\n  allContentfulAsset {\n    nodes {\n      title\n      childImageEngineAsset {\n        gatsbyImageData(width: 500, height: 300, compression: 10, format: gif, fit: cropbox, sharpness: 30)\n      }\n    }\n  }\n}\n```\n\nNow you can use the returned value in a `GatsbyImage` element, allowing you to use all the inbuilt functionality of that component, such as having the `srcset`, `sizes` and other useful attributes automatically filled, while having access to the fields in the `Contentful` node itself.\n\n\n```javascript\n{data.allContentfulAsset.nodes.map(({ title, childImageEngineAsset }) =\u003e {\n  return \u003cGatsbyImage key={title} image={childImageEngineAsset.gatsbyImageData} alt={title} /\u003e;\n})}\n```\n\n##### responsive_details resolver\n\n```javascript\nquery {\n  allContentfulAsset {\n    nodes {\n      title\n      childImageEngineAsset {\n        responsive_details(width: 500, height: 300, compression: 10, format: gif, fit: cropbox, sharpness: 30)\n      }\n    }\n  }\n}\n```\n\nThis will return an object:\n```javascript\n{\n  width: 500,\n  height: 300,\n  src: \"https://....some-source-with-ie.url/file.ext?imgeng=/w_500/h_300/f_gif/cmpr_10/m_cropbox/s_30\",\n  srcSet: \"urls_for_different_sizes_if_specified_in_query\",\n  sizes: \"sizes_breakdown_for_sizes_specified_in_query\"\n}\n```\n\nThis can be used directly in an `img` tag, e.g: \n```javascript\n\u003cimg {...data.allContentfulAsset.nodes[0].childImageEngineAsset.responsive_details}\u003e\n```\n\n\n### React Component\n\nIf you just want a component to help in using `ImageEngine` directives without `graphql` you might prefer [@imageengine/react](https://www.npmjs.com/package/@imageengine/react)\n\n### Plain URLs without Graphql\n\nIf for some reason you only need to generate only urls with the right query parameters for `ImageEngine` you might import the helper functions in [@imageengine/imageengine-helpers](https://www.npmjs.com/package/@imageengine/imageengine-helpers)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgeng%2Fimageengine-gatsby","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimgeng%2Fimageengine-gatsby","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgeng%2Fimageengine-gatsby/lists"}