Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@lgenzelis/gatsby-plugin-sharp
Advanced tools
Wrapper of the Sharp image manipulation library for Gatsby plugins
Exposes several image processing functions built on the Sharp image processing library. This is a low-level helper plugin generally used by other Gatsby plugins. You generally shouldn't be using this directly but might find it helpful if doing very custom image processing.
It aims to provide excellent out-of-the box settings for processing common web image formats.
For JPEGs it generates progressive images with a default quality level of 50.
For PNGs it uses pngquant to compress
images. By default it uses a quality setting of [50-75]. The pngCompressionSpeed
value is a speed/quality trade-off from 1 (brute-force) to 10 (fastest). Speed
10 has 5% lower quality, but is 8 times faster than the default (4). In most
cases you should stick with the default, but if you have very large numbers
of PNGs then it can significantly reduce build times.
npm install --save gatsby-plugin-sharp
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-sharp`,
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
]
width
(int, default: 400)height
(int)quality
(int, default: 50)jpegProgressive
(bool, default: true)pngCompressionLevel
(int, default: 9)base64
(bool, default: false)src
(string)width
(int)height
(int)aspectRatio
(float)Automatically create sizes for different resolutions — we do 1x, 1.5x, and 2x.
width
(int, default: 400)height
(int)quality
(int, default: 50)base64
(string)aspectRatio
(float)width
(float)height
(float)src
(string)srcSet
(string)Create fluid sizes (in width) for the image. If the max width of the container for the rendered markdown file is 800px, the sizes would then be: 200px, 400px, 800px, 1200px, 1600px – enough to provide close to the optimal image size for every device size / screen resolution.
If you want more control over which sizes are output you can use the srcSetBreakpoints
parameter. For example, if you want images that are 200, 340, 520, and 890 wide you
can add srcSetBreakpoints: [ 200, 340, 520, 890 ]
as a parameter. You will also get
maxWidth
as a breakpoint (which is 800 by default), so you will actually get
[ 200, 340, 520, 800, 890 ]
as breakpoints.
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).
When both a maxWidth
and maxHeight
are provided, sharp will use COVER
as a fit strategy by default. This might not be ideal so you can now choose between COVER
, CONTAIN
and FILL
as a fit strategy. To see them in action the CSS property object-fit comes close to its implementation.
fit strategies CONTAIN
and FILL
will not work when cropFocus
is assigned to sharp.strategy. The cropFocus
option cannot be ENTROPY
or ATTENTION
maxWidth
(int, default: 800)maxHeight
(int)quality
(int, default: 50)srcSetBreakpoints
(array of int, default: [])fit
(string, default: 'sharp.fit.cover')background
(string, default: 'rgba(0,0,0,1)')sizeByPixelDensity
(bool, default: false)
base64
(string)aspectRatio
(float)src
(string)srcSet
(string)srcSetType
(string)sizes
(string)originalImg
(string)In addition to their individual parameters, all methods above share the following:
grayscale
(bool, default: false)duotone
(bool|obj, default: false)toFormat
(string, default: '')cropFocus
(string, default: 'sharp.strategy.attention')pngCompressionSpeed
(int, default: 4)Convert the source image to one of the following available options: NO_CHANGE
,
JPG
, PNG
, WEBP
.
Change the cropping focus. Available options: CENTER
, NORTH
, NORTHEAST
,
EAST
, SOUTHEAST
, SOUTH
, SOUTHWEST
, WEST
, NORTHWEST
, ENTROPY
,
ATTENTION
. See Sharp's crop.
Rotate the image (after cropping). See Sharp's rotate.
Uses Sharp's greyscale to convert the source image to 8-bit greyscale, 256 shades of grey, e.g.
allImageSharp {
edges {
node {
... on ImageSharp {
resize(width: 150, height: 150, grayscale: true) {
src
}
}
}
}
}
Applys a "duotone" effect (see I, II, III) to the source image if
given two hex colors shadow
and highlight
defining start and end color of
the duotone gradient, e.g.
fixed(
width: 800,
duotone: {
highlight: "#f00e2e",
shadow: "#192550"
}
) {
src
srcSet
base64
}
the source image colors will be converted to match a gradient color chosen based
on each pixel's relative luminance.
Logic is borrowed from react-duotone.
You can pass a third optional parameter, opacity
:
fluid(
width: 800,
duotone: {
highlight: "#f00e2e",
shadow: "#192550",
opacity: 50
}
) {
src
srcSet
base64
}
If set, a semi-transparent version of duotone'd image will be composited over the original image, allowing the original image and its colors to partially "shine through". Heads up: If the original image contains an alpha channel it will be flattened before creating the composite.
This works by adding an alpha channel to the duotone'd image - then we let Sharp
do its magic via
overlayWith
;
quoting the Sharp documentation:
If the overlay image contains an alpha channel then composition with premultiplication will occur.
Generates a traced SVG of the image (see the original GitHub issue) and
returns the SVG as "optimized URL-encoded" data:
URI. It it used in
gatsby-image to provide an
alternative to the default inline base64 placeholder image.
Uses node-potrace and SVGO under the hood. Default settings for node-potrace:
{
color: `lightgray`,
optTolerance: 0.4,
turdSize: 100,
turnPolicy: TURNPOLICY_MAJORITY,
}
All node-potrace Potrace
parameters are exposed and can be set via the
traceSVG
argument:
fixed(
traceSVG: {
color: "#f00e2e"
turnPolicy: TURNPOLICY_MINORITY
blackOnWhite: false
}
) {
src
srcSet
tracedSVG
}
You can pass a default image quality to sharp
by setting the defaultQuality
option.
You can opt-in to use MozJPEG for jpeg-encoding. MozJPEG provides even
better image compression than the default encoder used in gatsby-plugin-sharp
.
However, when using MozJPEG the build time of your Gatsby project will increase
significantly.
To enable MozJPEG, you can set the useMozJpeg
plugin option to true
in
gatsby-config.js
.
For backwards compatible reasons, if useMozJpeg
is not defined in the plugin
options, the environment variable
GATSBY_JPEG_ENCODER
acts as a fallback if set to MOZJPEG
:
GATSBY_JPEG_ENCODER=MOZJPEG
By default, gatsby-plugin-sharp
strips all EXIF, ICC and other metadata
present in your source file. This is the recommended default as it leads to
smaller file sizes.
However, in situations where you wish to preserve EXIF metadata or ICC profiles
(example: you are building a photography portfolio and wish to conserve
the color profile or the copyright information of the photos you've exported
from Adobe Lightroom or Phase One's Capture One), you can set the stripMetadata
plugin option to false
in gatsby-config.js
.
It is important to note that if stripMetadata
is set to false
, all
metadata information will be preserved from the source image, including but not
limited to the latitude/longitude information of where the picture was taken
(if present). If you wish to strip this information from the source file, you
can either leave stripMetadata
to its default of true
, or manually
pre-process your images with a tool such as ExifTool.
This means that there are multiple incompatible versions of the sharp
package installed in node_modules
. The complete error typically looks like this:
Something went wrong installing the "sharp" module
dlopen(/Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node, 1): Library not loaded: @rpath/libglib-2.0.dylib
Referenced from: /Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node
Reason: Incompatible library version: sharp.node requires version 6001.0.0 or later, but libglib-2.0.dylib provides version 5801.0.0
To fix this, you'll need to update all Gatsby plugins in the current project that depend on the sharp
package. Here's a list of official plugins that you might need to update in case your projects uses them:
gatsby-plugin-sharp
gatsby-plugin-manifest
gatsby-remark-images-contentful
gatsby-source-contentful
gatsby-transformer-sharp
gatsby-transformer-sqip
To update these packages, run:
npm install gatsby-plugin-sharp gatsby-plugin-manifest gatsby-remark-images-contentful gatsby-source-contentful gatsby-transformer-sharp gatsby-transformer-sqip
If updating these doesn't fix the issue, your project probably uses other plugins from the community that depend on a different version of sharp
. Try running npm list sharp
or yarn why sharp
to see all packages in the current project that use sharp
and try updating them as well.
FAQs
Wrapper of the Sharp image manipulation library for Gatsby plugins
We found that @lgenzelis/gatsby-plugin-sharp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.