gatsby-image

If you're using TakeShape with Gatsby, you'll most likely want to use Gatsby's famous gatsby-image. Out of the box, the Gatsby GraphQL source plugin doesn't support gatsby image fragments  but you can use the @takeshape/routing module to generate all the correct sizes.

import {getImageUrl} from 'takeshape-routing';
const sizes = `
(min-width: 900px) 1000px,
(max-width: 900px) and (min-width: 400px) 50em,
( not (orientation: portrait) ) 300px,
( (orientation: landscape) or (min-width: 1000px) ) 50vw,
100vw`;

const widths = [100, 500, 1000];

export function fluidImage(path, aspectRatio) {
    return {
        src: getImageUrl(path),
        srcSet: widths.map(w =>`${getImageUrl(path,{w})} ${w}w`).join(','),
        sizes
    }
}

Then use:

import Img from "gatsby-image"
...
<Img fluid={fluidImage(path,  4/3)} />

With this approach you can tune the image params to your exact needs.