Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Respect Save-Data client hint in gatsby-image #17202

KyleAMathews opened this issue Aug 29, 2019 · 2 comments · May be fixed by #17253


Copy link

commented Aug 29, 2019

Many people on constrained data plans turn on data saving — their smartphone browsers then send a "Save-Data" header to servers.

We can use this in the client as well to choose lower-data rendering options for these people.

For gatsby-image, we can render regular resolution images for these people instead of retina.

if ("connection" in navigator) {
    if (navigator.connection.saveData === true) {
        // Implement data saving operations here.

We can detect in the component if data saving is enabled and then when rendering, only render the src and not srcset thus avoiding making the user download retina (so much bigger) images.

The source code for gatsby-image is at

We can use a similar pattern for this as we do with detecting native lazy loading support

const hasNativeLazyLoadSupport =

For background reading on Save-Data:


This comment has been minimized.

Copy link

commented Aug 29, 2019

Hi Kyle,

I’d like to work on this if that’s ok :)


This comment has been minimized.

Copy link
Contributor Author

commented Aug 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.