Both fixed and fluid images?

🆘 Support
,
1

Hey there,
Is there a way to generate a srcSet for gatsby-image that combine both multiple resolutions and multiple widths?

My use case is to load images at specific sizes within smaller break points and use a fluid image over the largest one.

See example below using TailwindCss

<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
      {/* fluid container */}
      <div className="h-56 w-full object-contain sm:h-72 md:h-96 lg:w-full lg:h-full">
        <Img fluid={image.fluid} />
      </div>
    </div>

myImage {
            fluid(maxWidth: 1800, forceBlurhash: true) {
              ...GatsbyDatoCmsFluid
            }
          }

I understand fluid would indeed optimise for the container size; but not the resolution
On the other side does fixed allows me to specify multiple widths to load at once?

Any recommendation to optimise image loading/rendering?

2

You might want to consider querying for both the fluid and fixed variants, and then use two Img elements to render them depending on the breakpoint sizes.

2 Likes