gatsby-transformer-sharpexposes several image processing GraphQL functions built on theSharp image processing library. With it andGatsby Imageyou can easily add fast, optimized, responsive images to your site.
Download source (no EXE) - 50 KB; Download source - 108.8 KB; Introduction. This is my second post which tackles auto form resizing. My previous tip can be found here.I am fascinated with how the controls resize themselves to their containers at runtime. Resize image to width, height or width x height. When both a width and height are provided, the possible methods by which the image should fit these are: cover: (default) Preserving aspect ratio.
Consult thedocumentationor peep thecodeof this example site for more information.
resize
Easily resize and intelligently crop images given awidthand optionally a height.
Therotate optionexposes Sharp'srotate.
resize(width: 125, height: 125, rotate: 180)
We also expose all of Sharp'scropoptions with cropFocus.
The default isATTENTION, 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:
cropFocus: SOUTHWESTcropFocus: ENTROPYcropFocus: CENTER
fluid
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, fluidreturns everything else (namelyaspectRatioand abase64image to use as a placeholder) you need to implement the 'blur up'technique popularized byMediumandFacebook(and also available as a Gatsby plugin for Markdown content asgatsby-remark-images).
The duotone option (seeI,II,III), given two hex colorsshadowand 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.
The 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.
fluid(duotone:{ highlight: '#f00e2e', shadow: '#192550'}, toFormat: PNG)
fluid(duotone:{ highlight: '#0ec4f1', shadow: '#192550', opacity: 50 })
By setting an optional third parameteropacity for 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'.
fixed
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, and 2x.
Sharp Resize
Thegrayscale optionuses Sharp'sgreyscaleto convert the source image to 8-bit greyscale, 256 shades of grey.