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.
- The Sharp Node.js module can be used to resize large images of any common file-type to web-friendly images of any dimension. It claims to be multiple times faster than ImageMagick and GraphicsMagick.
- Resizes the current bitmap using the specified resize method. Resize(SKImageInfo, SKFilterQuality) Resizes the current bitmap using the specified quality filter.
Consult thedocumentationor peep thecodeof this example site for more information.
SharpResize is using the Lanczos resampling method while the sharpening tool applies a luminance filter designed to enhance the image contrast. As a result, the resulting image will have a very.
resize
Easily resize and intelligently crop images given awidthand optionally a height.
Sharp Resize Without Crop
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).
Sharp Resize Quality
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'.
Sharp Resize Buffer
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 Keep Aspect Ratio
Thegrayscale optionuses Sharp'sgreyscaleto convert the source image to 8-bit greyscale, 256 shades of grey.