@gvrs/gatsby-transformer-image-mask

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `@gvrs/gatsby-transformer-image-mask`,
  ],
};

imageSharp {
  gatsbyImageData
  imageMask {
    base64
  }
}

import { GatsbyImage } from "gatsby-plugin-image";
import styled from "@emotion/styled";

const GatsbyImageWithMask = styled(GatsbyImage)`
  & [data-placeholder-image] {
    mask-image: url("${(props) => props.mask}");
    mask-size: "contain";
    mask-position: "center center";
    mask-repeat: "no-repeat";
  }
`;

const Image = ({ gatsbyImageData, imageMask }) => (
  <GatsbyImageWithMask image={gatsbyImageData} mask={imageMask.base64} />
);