[gatsby-image] [gatsby-transformer-sharp] Emulate <img srcSet> behavior (restrict 2x images to 1x width)

[dustinhorton]

Summary

Relevant information

Prior to using gatsby-image, most of my high-resolution image work in markup was via the img srcSet atrribute. Check out this Codepen for a quick demo. Basically, given the following markup:

<img
  src="//placehold.it/250x250"
  srcSet="//placehold.it/500x500 2x"
>

The result will be:

• On a 'normal' resolution display, the src image at it's native width & height (250px in my example)
• On a 'high' resolution display, the srcSet image at half native width & height (so still 250px in my example)

I'm basically looking to achieve that same behavior with gatsby-image: generate a 2x image with gatsby-transformer-sharp, but don't display it at that 2x size—rather restrict it's size so it's never shown at less than full resolution.

I think I'm probably over-thinking or missing something—is this not currently possible with gastby-image as-is? (edit: Maybe I'm misunderstanding the fluid/fixed split…).

If not, I imagine most are achieving this with a container markup/component, but that's not feasible because the app I'm working on—the images are coming from WordPress and a range of sizes.

I've created a repo when I've achieved this functionality, but it's going to take quite a bit of work to update my app to use the solution. Here's the relevant file—note the wrapping div and use of childImageSharp.fluid.presentationWidth: https://github.com/dustinhorton/gatsby-issue2/blob/master/src/components/image2.js

[KyleAMathews]

Hey! This is exactly how gatsby-image works! Checkout https://using-gatsby-image.gatsbyjs.org and https://using-wordpress.gatsbyjs.org/sample-post-1 to see how you can do image processing with gatsby and WordPress.

Wp example site link https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress

[dustinhorton]

@KyleAMathews Thanks for weighing in.

I think I must still be missing something. In my repro repo, you'll notice what gatsby-image instance expands until it fills a container:

…thus being shown at lower than full-resolution, as opposed to img srcSet where it would be constrained to 1x width and never shown below full resolution (without CSS forcing it).

Every example I see in the docs has a container to restrict width when using fluid:

• https://github.com/gatsbyjs/gatsby-starter-default/blob/master/src/pages/index.js#L12
• https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/src/layouts/index.js#L8

And the docs mention:

It’s optimized for fixed width/height images and images that stretch the full-width of a container.

So now I'm leaning that my use-case isn't met, but your 'This is exactly how gatsby-image works!' is making me unsure again—ha.

[KyleAMathews]

Oh used "fixed" not fluid :-)

[dustinhorton]

Okay, I'll experiment with that more—currently images are rendering with 0 height upon swapping. Thanks for the tip.

edit: for anyone following along—i was still using the sizes prop from gatsby-image v1 with a fixed image.

[dustinhorton]

Hm, just updated the repo.

Now it is restricted in width, but in querying for a width: 600, I'm looking for a 300px 1x and 600px 2x image—but it just renders a 600px image.