High bandwidth usage on Gatsby site with Sanity CDN images

Hi everyone, back again with a bandwidth question. I have a Gatsby site that builds everything at run time but all of the images are served over the sanity CDN (I’m using the

gatsby-sanity-source

plugin with

gatsby-image

for this) and the bandwidth usage is sky high vs what I’d expect:

https://www.dropbox.com/s/h32v7tjo3nt5ncu/Screenshot%202021-03-17%20at%2009.02.34.png?dl=0
In the last 30 days the website has had around 1,200 visitors, so not exactly
huge traffic. My usage on Netlify is in the MB’s so it has a tiny footprint there. It’s just Sanity usage which I assume is coming from the images?
Can anyone help me figure this out? I’ve tried lowering the resolution of the images but can’t go much lower without the quality suffering.

I have a theory that users might be having to re-download images every time a new update/build is made to the site, but I have no understanding of how to prove that…

Watch your local dev activities, if you disable cache during development & work on a site all day everyday it could really add up

Yeah good shout — the faint blue line on the image I linked above shows last months bandwidth usage during dev, so I can see it’s minimal comparatively. The site only went live at the start of March

I see.. have you tried strolling through the site to see how much bandwidth it consumes during a typical visit?

I have a theory that users might be having to re-download images every time a new update/build is made to the site, but I have no understanding of how to prove that…

I think if you hit “clear cache & redeploy” it’ll do this, but if you have something like netlify plugin cache the image should be the same on most builds

how could I test that using Firefox developer edition?

Same as in Chromium, Network tab / disable cache / Images

Thanks — this is definitely the issue, just doing a quick test and clicking around to a few articles, scrolling through the homepage and “reading” the content, I’ve hit 7mb

just from images alone

whoops, do you have lots of images?

Yeah it’s an editorial website, I just realised I didn’t share the link in my original post: https://dscvrd.co/

Might be a quick one to set a max-height on the images being fetched, but generally I’m not sure what else I can do here

hhhm maybe you can look into optimizing

sizes

attributes? If the projected cost is an issue for you, imgix is a lot cheaper bandwidth wise vs. sanity 🤫

I was just looking to see if another image handling service might be better actually

You can offload sanity images to something like imgix fairly easily?

maybe try using web proxy for a simple integration https://docs.imgix.com/setup/creating-sources/web-proxy

I just remembered this: https://images.weserv.nl/

Might solve the problem and for free too from what I can tell

what the heck? That’s so cool. Thanks for sharing!

Right?! 😂

I remembered I used it on an instagram hook I set up and I just cached all the images through that

Seems like it has something to do w the fact that the service is powered by cloudflare? How is cloudflare bandwidth always unlimited, I could never understand

Yeah and they’re using it to test out image manip features so I guess you’re handing over your data in that respect

mmhmm, good point

But all the image data is public anyway in my case

Hey I’m experiencing the exact same problem. It appears that

gatsby-sanity-source

isn’t adding the

auto=format

to the source image

This can be helped by using https://www.sanity.io/plugins/gatsby-plugin-sanity-image , which does add this flag by default

What does that

auto=format

flag do?

Some good reading here: https://www.sanity.io/docs/image-urls