[gatsby-plugin-image] mixing layout types with art direction

[ardiewen]

Hi all,

I'm running a wordpress backend that allows my content editors to upload a mobile and desktop variant for most components that require images.

For background images specifically, this is a requirement as it allows our designers to control aspect ratio + crop focus to pixel perfect precision.

We've currently been using a single image fragment to facilitate this, using the following options:

fragment ImageFields on WpMediaItem {
    altText
    mediaItemUrl
    mediaDetails {
      height
      width
    }
    localFile {
      publicURL
      childImageSharp {
        gatsbyImageData(
          backgroundColor: "#dedede"
          layout: FULL_WIDTH
          breakpoints: [360, 720, 1080, 1366, 1920]
          placeholder: NONE
          quality: 90
        )
      }
    }
  }

However, I've noticed that the performance for LCP is significantly better when using the CONSTRAINED layout on mobile. We're talking in the magnitude of 15-20 points on Lighthouse (5s LCP down to 2s) so obviously I'd love to use this for my mobile image source. The new mobile fragment has options like so:

fragment MobileImageFields on WpMediaItem {
    altText
    mediaItemUrl
    mediaDetails {
      height
      width
    }
    localFile {
      publicURL
      childImageSharp {
        gatsbyImageData(
          backgroundColor: "#dedede"
          layout: CONSTRAINED
          width: 800
          placeholder: NONE
          outputPixelDensities: [0.25, 0.5, 1, 2, 3]
          quality: 90
        )
      }
    }
  }

It appears however, that these two layouts don't play well when using withArtDirection. Some of the things I've noticed:

• .gatsby-image-wrapper-constrained css class is added that adds display: inline-block. No problem, this one can be easily overwritten with a media query for larger images.

• the way placeholders are handled between CONSTRAINED vs FULL_WIDTH layouts appear to be different and doesn't automatically swap over at the defined breakpoint. Specifically this function. Not sure how to solve with overrides?

• the old gatsby-image seemed to handle this pretty seamlessly (albeit did not have LAYOUT options). Based on past discussions in the gatsby-plugin-image beta discussion thread, it seems like this is a purposeful design decision to not handle this natively (e.g. advised to solve with css overrides).

• we've also lost some props in the new plugin such as placeholderStyle that may be useful in implementing a solution with style overrides.

Any thoughts / ideas on how to proceed?

[edmeehan]

Having a similar issue related to Constrained, and controlling art direction ratio because of the SVG used to control ratio. Curious why the switch from the padding ratio as used by full-width layout.

All the documentation states using simple width and height control, but that fits better for fixed control but does not match the use cases for contained.