🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

High bandwidth usage on Gatsby site with Sanity CDN images

29 replies
Last updated: Mar 25, 2021
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
plugin with
for this) and the bandwidth usage is sky high vs what I’d expect:

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…
Mar 17, 2021, 9:18 AM
Watch your local dev activities, if you disable cache during development & work on a site all day everyday it could really add up
Mar 17, 2021, 10:30 AM
Yeah good shout
user G
— 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
Mar 17, 2021, 10:31 AM
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
Mar 17, 2021, 10:33 AM
user G
how could I test that using Firefox developer edition?
Mar 17, 2021, 1:46 PM
Same as in Chromium, Network tab / disable cache / Images
Mar 17, 2021, 1:48 PM
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
Mar 17, 2021, 1:50 PM
just from images alone
Mar 17, 2021, 1:51 PM
whoops, do you have lots of images?
Mar 17, 2021, 1:51 PM
Yeah it’s an editorial website, I just realised I didn’t share the link in my original post: https://dscvrd.co/
Mar 17, 2021, 1:52 PM
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
Mar 17, 2021, 1:54 PM
hhhm maybe you can look into optimizing
attributes? If the projected cost is an issue for you, imgix is a lot cheaper bandwidth wise vs. sanity 🤫
Mar 17, 2021, 1:59 PM
I was just looking to see if another image handling service might be better actually
Mar 17, 2021, 1:59 PM
You can offload sanity images to something like imgix fairly easily?
Mar 17, 2021, 2:00 PM
maybe try using web proxy for a simple integration https://docs.imgix.com/setup/creating-sources/web-proxy
Mar 17, 2021, 2:02 PM
I just remembered this: https://images.weserv.nl/
Mar 17, 2021, 2:03 PM
Might solve the problem and for free too from what I can tell
Mar 17, 2021, 2:05 PM
what the heck? That’s so cool. Thanks for sharing!
Mar 17, 2021, 2:05 PM
Right?! 😂
Mar 17, 2021, 2:05 PM
I remembered I used it on an instagram hook I set up and I just cached all the images through that
Mar 17, 2021, 2:06 PM
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
Mar 17, 2021, 2:09 PM
Yeah and they’re using it to test out image manip features so I guess you’re handing over your data in that respect
Mar 17, 2021, 2:10 PM
mmhmm, good point
Mar 17, 2021, 2:11 PM
But all the image data is public anyway in my case
Mar 17, 2021, 2:11 PM
user S
I’m experiencing the exact same problem. It appears that
isn’t adding the
to the source image
Mar 24, 2021, 7:28 AM
This can be helped by using https://www.sanity.io/plugins/gatsby-plugin-sanity-image , which does add this flag by default
Mar 24, 2021, 7:29 AM
user S
What does that
flag do?
Mar 25, 2021, 12:10 PM
Mar 25, 2021, 9:55 PM
 to automatically return an image in 
 formatting if the browser supports it.
Mar 25, 2021, 9:56 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?