🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Rendering nested block contentJan 18, 2021
In the tutorial, there is samples of what the API returns as JSON. Is there a way to view these ?Jan 11, 2021
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
GraphQL query resolving references on a _raw field in GatsbyMay 17, 2022
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023
Is there a way to write a groq query that checks if a boolean is true, and if so, returns an array of referenced documents?...Feb 1, 2021
Handling dynamic meta titles and descriptions in SanityFeb 25, 2021

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle