How to get a Gatsby site to properly serve images from CDN?

Support
1

I will fully admit I’m not a Gatsby genius; most of my Netlify SSG experience has been with Hugo.

We have things set up for image optimization, which to my understanding, means that Netlify will serve the images from the cloundfront CDN and fingerprint/rename the images, rewrite the HTML/CSS, etc to use them.

However, all the images are coming from the root domain, so they aren’t getting any of that love. This is especially rough with things like social cards, which could change, and then they are cached by Twitter, etc :slight_smile:

For Hugo, the way I did this was to have the build command pass in the BaseURL and I have it pass in different values if it’s a deploy preview or the public site, etc.

Anyway, without hacking the way I did it with Hugo, is there a good practice for Gatsby to get these images to work properly with the asset optimization?

Netlify site name: https://graceful-sage-db0ff.netlify.app/

Netlify configuration: devopspartygames-web/netlify.toml at main · DevOpsPartyGames/devopspartygames-web · GitHub

2

I don’t think I’ve fully understood your question.

From what I understood, you mean that, you’re using relative URLs for images in your Gatsby website (for example /foo.jpg'). From what I can see, Netlify is processing those images too:

image
image1210×282 56.1 KB

Is this not what you’re seeing?

3

That’s so odd…I don’t see that (this is hitting devopspartygames.com, but I get the same result on the netlify URL)

image

I also don’t see any resources coming from cloudfront:

image

4

ok there must be someting weird in Chrome; when I load it in Safari it looks like it’s getting things from cloudfront.

I must have something in my Chrome config that is changing things somehow; it works in an incognito window as well?

5

You’ve got a service worker. so chances are Chrome is just loading the cached webpage.

1 Like
6

I would have thought that too, although it’s funny since the image processing in netlify has been set for months, so you’d think chrome would have cleared it by now (also this is a machine that is brand new). So weird. Anyway, this makes sense now.

I sitll need to figure out how to get the opengraph images to load through the CDN, etc, but now that I know it basically should work this way, I can puzzle that out. Thank you!!