Can we crop square images into 16x9 with Gatsby Image?

Question

Is it possible to crop an image with Gatsby to turn it into 16x9 and start from the center out? My original response it is that it is not but I want to double check before venturing to other options.

I couldn't find information about this process in the documentation either. Anyone knows if this is achievable?

Doesn't look like it, but you can certainly do thing that effectively crop the image in this way and part of the display HTML/CSS. — Ouroborus, Sep 26 '22 at 19:37
Yeah, but the problem is that unnecessary data will be sent with the request. — Helmut Granda, Sep 26 '22 at 20:27

score 0 · Answer 1 · answered Oct 04 '22 at 10:45

You can use Gatsby image with Ratio to do that!

  <StaticImage
    style={{
      gridArea: "1/1",
      // You can set a maximum height for the image, if you wish.
      // maxHeight: 600,
    }}
    layout="fullWidth"
    // You can optionally force an aspect ratio for the generated image
    aspectRatio={3 / 1}
    // This is a presentational image, so the alt should be an empty string
    alt=""
    // Assisi, Perúgia, Itália by Bernardo Ferrari, via Unsplash
    src={
      "https://images.unsplash.com/photo-1604975999044-188783d54fb3?w=2589"
    }
    formats={["auto", "webp", "avif"]}
  />

More info here: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#aspect-ratio

Can we crop square images into 16x9 with Gatsby Image?

1 Answers1