GatsbyImage process the image on build & build is slow about gatsby HOT 5 CLOSED

Does Image CDN will only works on Gatsby Cloud? Not like normal hosting platforms.

from gatsby.

Does Image CDN will only works on Gatsby Cloud? Not like normal hosting platforms.

It does work now on Netlify properly using Netlify Image CDN (without extra hacks) and you can "implement" your own as well - https://www.gatsbyjs.com/docs/reference/release-notes/v5.13/#custom-image-and-file-cdn-url-generators

Please note that above thing is just to generate url for images and you (or your image cdn backend) are responsible for handling those requests. The arguments for transformations are pretty much subset of what Imgix handles so in my tests I did try Imgix backend:

const ImgixClient = require("@imgix/js-core");

const client = new ImgixClient({
  domain: "none-9083.imgix.net",
  secureURLToken: "<redacted>",
});

/**
 * @type {import("gatsby").ImageCdnUrlGeneratorFn}
 */
exports.default = (source, args, pathPrefix) => {
  const url = client.buildURL(source.url, args);

  console.log(`image-cdn`, {
    source,
    args,
    url,
  });

  return url;
};

Just I did have imgix account from some time ago with "Web proxy" source setup (it allows any remote urls) - now that source is enterprise-only in imgix, but there is "Web folder" where you specify "base url" (which would include a domain) and would need to adjust url builder to match expected format.

Alternatively any other image cdn provider could be used as long as it supports at least transformations that you are using in your site.

I did try creating a function/lambda to handle those, but in a lot of cases it was quite problematic, with requests often erroring out due to timeouts etc, so trying to support it this way (where users/platforms don't have to configure image cdns themselves) was a problem magnet and issues caused by this were impacting visitors of the site (while slow build times are annoying, but don't impact site once it's deployed - so out of the 2 it's better to have slow builds than problems on deployed sites)

from gatsby.

If you don't want to use ready-made image cdn backends, maybe you could look into https://github.com/unjs/ipx (tho this one out of the box doesn't support remote images - https://github.com/netlify/netlify-ipx is netlify wrapper for it that does support external urls), but this is much more involved and not something you could just "turn on"

In my tests with it I never fully finished proper function with all the functionality - just enough to get something going, but seeing issues I dropped the idea of finishing it up and adding it as part of core gatsby functionality due to issues with that approach (as mentioned in previous comment)

from gatsby.

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

from gatsby.

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

from gatsby.