🔮 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
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…
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
sizes
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
Hey
user S
I’m experiencing the exact same problem. It appears that
gatsby-sanity-source
isn’t adding the
auto=format
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
auto=format
flag do?
Mar 25, 2021, 12:10 PM
Mar 25, 2021, 9:55 PM
Set 
auto=format
 to automatically return an image in 
webp
 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?