@gvrs/gatsby-transformer-image-mask

Refine edges of placeholders with transparent parts

Configuration

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

Usage example

Fetching data

imageSharp {
  gatsbyImageData
  imageMask {
    base64
  }
}

Rendering

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} />
);

Returns

• base64 (string) — base 64 encoded svg mask

Additional documentation

• CHANGELOG

See also

• @gvrs/gatsby-transformer-blurhash — generate BlurHash placeholders for images