gatsby-image: art-directing multiple images might not show the correct image at a breakpoint depending on the ordering of the media key

[kimbaudi]

Description

gatsby-image plugin added a new art direction feature (see #13395 and Art-directing multiple images).
This new feature allows different images to show at different breakpoints (aka art direction).

However, art-directing multiple images might not show the correct image at a given breakpoint depending on the ordering of the media key.

For example, suppose I have an image bust-a-zoo.png that has 1080px width and 810px height.

And suppose I have the following graphql query:

export const pageQuery = graphql`
  query {
    smBustAZoo: file(relativePath: { eq: "projects/bust-a-zoo.png" }) {
      childImageSharp {
        fluid(maxWidth: 480, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    mdBustAZoo: file(relativePath: { eq: "projects/bust-a-zoo.png" }) {
      childImageSharp {
        fluid(maxWidth: 768, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    lgBustAZoo: file(relativePath: { eq: "projects/bust-a-zoo.png" }) {
      childImageSharp {
        fluid(maxWidth: 1024, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

Now, if I define the array of images along with the media key per image like the following, it doesn't work as expected:

// this does not work!
// bust-a-zoo.png image of width 1024px should show when browser screen width is 1025px or greater
// but instead, the image of width 768px is shown instead
const images = {
    bustAZoo: [
        data.smBustAZoo.childImageSharp.fluid,
        {
            ...data.mdBustAZoo.childImageSharp.fluid,
            media: `(min-width: 768px)`,
        },
        {
            ...data.lgBustAZoo.childImageSharp.fluid,
            media: `(min-width: 1024px)`,
        },
    ],
}

return (<Img fluid={images.bustAZoo} alt="Bust A Zoo" />)

But, if I re-order the array like the following, it now works as expected:

// this time, it works! (just by re-ordering the array... a bit strange)
// bust-a-zoo.png image of width 1024px now shows when browser screen width is 1025px or greater
const images = {
    bustAZoo: [
        data.smBustAZoo.childImageSharp.fluid,
        {
            ...data.lgBustAZoo.childImageSharp.fluid,
            media: `(min-width: 1024px)`,
        },
        {
            ...data.mdBustAZoo.childImageSharp.fluid,
            media: `(min-width: 768px)`,
        },
    ],
}

return (<Img fluid={images.bustAZoo} alt="Bust A Zoo" />)

Steps to reproduce

I've created a demo project that reproduces the issue: https://github.com/kimbaudi/gatsby-image-art-directing-issue

1. Clone the repo (git clone https://github.com/kimbaudi/gatsby-image-art-directing-issue.git)
2. Run the demo (npm i && npm start)
3. Open http://localhost:8000/dont-work/ in your browser and make sure to resize your browser so that the width is at least 1025px wide.
4. Right click the bust-a-zoo.png image and open in a new tab.

Expected result

The image should be 1024px wide because I configured gatsby-image art-directing to show the 1024px wide image with media query (min-width: 1024px)

Actual result

The image is actually 768px wide despite configuring gatsby-image art-directing to show the 1024px wide image with media query (min-width: 1024px). Just because of the ordering of the array 😞

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (2) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.9.1 - ~/.nvm/versions/node/v12.9.1/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v12.9.1/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.9.1/bin/npm
  Languages:
    Python: 3.7.3 - /home/paul/.pyenv/shims/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 69.0
  npmPackages:
    gatsby: ^2.15.14 => 2.15.14
    gatsby-image: ^2.2.18 => 2.2.18
    gatsby-plugin-feed: ^2.3.12 => 2.3.12
    gatsby-plugin-google-analytics: ^2.1.16 => 2.1.16
    gatsby-plugin-manifest: ^2.2.16 => 2.2.16
    gatsby-plugin-offline: ^3.0.6 => 3.0.6
    gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
    gatsby-plugin-sass: ^2.1.14 => 2.1.14
    gatsby-plugin-sharp: ^2.2.21 => 2.2.21
    gatsby-plugin-typography: ^2.3.7 => 2.3.7
    gatsby-remark-copy-linked-files: ^2.1.19 => 2.1.19
    gatsby-remark-images: ^3.1.21 => 3.1.21
    gatsby-remark-prismjs: ^3.3.13 => 3.3.13
    gatsby-remark-responsive-iframe: ^2.2.16 => 2.2.16
    gatsby-remark-smartypants: ^2.1.8 => 2.1.8
    gatsby-source-filesystem: ^2.1.22 => 2.1.22
    gatsby-transformer-remark: ^2.6.22 => 2.6.22
    gatsby-transformer-sharp: ^2.2.14 => 2.2.14
  npmGlobalPackages:
    gatsby-dev-cli: 2.5.25

[kimbaudi]

I've updated the title/description regarding this issue. And I also created a demo project that would reproduce this issue https://github.com/kimbaudi/gatsby-image-art-directing-issue.

Please take a look at the following 2 files:

• https://github.com/kimbaudi/gatsby-image-art-directing-issue/blob/master/src/pages/it-works.js
• https://github.com/kimbaudi/gatsby-image-art-directing-issue/blob/master/src/pages/dont-work.js

Both pages are nearly identical except for the ordering of the bustAZoo array.

To understand the bug, you need to build the project and run it on your local machine.
Then, when you go to http://localhost:8000/dont-work/ you will see a bust-a-zoo.png image.

When you resize the browser window so that the width is less than 768px, the 480px wide bust-a-zoo.png should be shown. This works fine.

When you resize the browser window so that the width is between 768px and 1024px (inclusive), the 768px wide bust-a-zoo.png should be shown. This also works fine.

When you resize the browser window so that the width is 1025px or greater, the 1024px wide bust-a-zoo.png should be shown. However, the 768px wide bust-a-zoo.png is shown instead. This is the issue.

Also, notice that when you go to http://localhost:8000/it-works/, everything works as expected.

[brimtown]

👋 @kimbaudi !

I'm curious if this issue persists if you are more explicit about the media queries in your example?

const images = {
    bustAZoo: [
        {
           ...data.smBustAZoo.childImageSharp.fluid,
           media: `(max-width: 767px)`,
        },
        {
            ...data.lgBustAZoo.childImageSharp.fluid,
            media: `(min-width: 1024px)`,
        },
        {
            ...data.mdBustAZoo.childImageSharp.fluid,
            media: `(min-width: 768px) and (max-width: 1023px)`,
        },
    ],
}

return (<Img fluid={images.bustAZoo} alt="Bust A Zoo" />

Without having looked too closely at your specific issue, ordering can play a role in how these <source> elements are eventually rendered and behave, since browsers will read each <source> element from top to bottom until it finds a media attribute that evaluates to true (see <picture> on MDN for more details).

If this does solve your issue, we may want to update the documentation to explicitly call this out. cc @polarathene

[kimbaudi]

@brimtown - I agree that this issue is best resolved by specifying more explicit media query ranges as you have described above. This way, you can put it in any order and the correct image size will be shown at the right breakpoint.

We should update the documentation by replacing the example with another example that provides more explicit media query ranges.