gatsby-transformer-sharp exposes several image processing GraphQL functions built on the Sharp image processing library. With it and Gatsby Image you can easily add fast, optimized, responsive images to your site.
Easily resize and intelligently crop images given a
width and optionally a
rotate option exposes Sharp's
resize(width: 125, height: 125, rotate: 180)
We also expose all of Sharp's
crop options with
The default is
ATTENTION, which the Sharp documentation describes as "focus on the region with the highest luminance frequency, colour saturation and presence of skin tones" – which is why we actually see Mr. Gatsby toasting to us in the first thumbnail:
For when you want an image that stretches across a fluid width container but will download the smallest image needed for the device e.g. a smartphone will download a much smaller image than a desktop device.
If the max width of the container for the rendered markdown file is 800px, the fluid sizes would then be: 200, 400, 800, 1200, 1600, 2400 – enough to provide close to the optimal image size for every device size / screen resolution.
On top of that,
fluid returns everything else (namely
aspectRatio and a
base64 image to use as a placeholder) you need to implement the "blur up"technique popularized by Medium and Facebook (and also available as a Gatsby plugin for Markdown content as gatsby-remark-images).
duotone option (see I, II, III), given two hex colors
highlight defining start and end color of the duotone gradient, converts the source image colors to match a gradient color chosen based on each pixels relative luminance.
toFormat option lets you convert the source image to another image format. We use "PNG" here to ensure that the duotoned image does not show any JPG artifacts.
By setting an optional third parameter
duotone, a semi-transparent version of the duotone'd image will be composited over the original allowing the original image and its colors to partially "shine through".
For when you want a fixed sized image but that has different sized thumbnails for screens that support different density of images
Automatically create images for different resolutions — we do 1x, 1.5x, 2x, and 3x.
grayscale option uses Sharp's
greyscale to convert the source image to 8-bit greyscale, 256 shades of grey.