Using Gatsby Image with Picture tag?

[deadcoder0904]

Summary

I want to use gatsby-image with the picture tag. I need to use picture tag because I have different images for mobile, tablet & desktop resolutions.

Relevant information

This is the current way I do it. Is this the right approach?

<picture>
        <source
          media="(max-width: 560px)"
          srcSet={data.mobile.childImageSharp.fluid.src}
        />
        <source
          media="(max-width: 875px)"
          srcSet={data.tablet.childImageSharp.fluid.src}
        />
        <Img src={data.desktop.childImageSharp.fluid.src} />
</picture>

Because its used like this in the docs & I don't know if the method above is right

<Img resolutions={data.file.childImageSharp.resolutions} />

I need 2 things from what I'm doing:

1. Optimized Images with Traced SVG in Pages
2. Different Images for Mobile, Tablet & Desktop

Is it right what I'm doing or is there another approach?

[KyleAMathews]

gatsby-image doesn't support "art direction" images like this as it seemed like it might overly complicate the API so I left it out.

If you can come up with a nice API, I'd love to explore adding it. Otherwise, your approach looks great! Except, make sure to query srcSet in addition to src and pass it to the source srcSet.

[deadcoder0904]

Hey @KyleAMathews the current way I showed above is wrong as I was not using Img from gatsby-image but a styled-component lol 😂

And AFAIK Img from gatsby-image is not a replacement for img from DOM. So I don't know how to get this thing work?

Currently, I am doing:

<picture>
        <source
          media="(max-width: 560px)"
          src={data.mobile.childImageSharp.fluid.src}
          srcSet={data.mobile.childImageSharp.fluid.srcSet}
        />
        <source
          media="(max-width: 875px)"
          src={data.tablet.childImageSharp.fluid.src}
          srcSet={data.tablet.childImageSharp.fluid.srcSet}
        />
        <CustomImg fluid={data.desktop.childImageSharp.fluid} />
</picture>

where my CustomImg is a styled-component around Img from gatsby-image like:

const CustomImg = styled(Img)`
  width: 5rem;
`;

The issue is I cannot show Mobile or Tablet images because of that. Only Desktop Image shows up even when screen is reduced. What's the workaround?

I can only see 1 workaround like having 3 tags CustomImgMobile, CustomImgTablet & CustomImgDesktop & show only 1 & hide other 2 like:

const DesktopImg = styled(Img)`
  width: 90rem;
  height: 70rem;
  @media screen and (max-width: 875px) {
    display: none;
  }
`;

const TabletImg = styled(Img)`
  @media screen and (max-width: 875px) {
    width: 70rem;
    height: 80rem;
  }
  @media screen and (max-width: 560px) {
    display: none;
  }
`;

const MobileImg = styled(Img)`
  @media screen and (max-width: 560px) {
    width: 50rem;
    height: 75rem;
  }
`;

<MobileImg fluid={data.mobile.childImageSharp.fluid} />
<TabletImg fluid={data.tablet.childImageSharp.fluid} />
<DesktopImg fluid={data.desktop.childImageSharp.fluid} />

And this works. But this defeats the purpose of Gatsby by downloading images that are not needed at all. Like I don't need Desktop images while visiting from Mobile.

I think this should be really implemented into Gatsby because picture is the future. I don't know how the API would be but it would be great to have this one. And for site like mine, this is a must as scaled down images won't look nice.