npmpackage.info

Gathering detailed insights and metrics for gatsby-remark-images

Other packages similar to gatsby-remark-images

gatsby-remark-relative-images

2.0.5

Convert image src(s) in markdown to be relative to their node's parent directory. This will help gatsby-remark-images match images outside the node folder. For example, use with NetlifyCMS.

gatsby-remark-images-contentful

6.14.0

Process Images in Contentful markdown so they can use the images API.

gatsby-remark-images-anywhere

1.3.1

Handle images with relative, absolute, remote path for gatsby-transformer-remark

gatsby-remark-images-remote

3.0.0

Processes local and remote images in markdown so they can be used in the production build.

Gathering detailed insights and metrics for gatsby-remark-images

gatsby-remark-images - 7.14.0 | npmpackage.info

gatsby-remark-images

The best React-based framework with performance, scalability and security built in.

7.14.0

55,905

MIT

JavaScript

112.82 kB

6.7

Installations

npm install gatsby-remark-images

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=18.0.0

Node Version

20.11.1

NPM Version

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Pull Requests

Open

213

Total

22,353

Closed

3,970

Merged

18,170

Issues

Open

216

Total

14,114

Closed

13,898

Releases

149

gatsby-source-shopify@9.0.0

Updated on Jan 07, 2025

gatsby-link@5.14.1

Updated on Jan 07, 2025

gatsby-source-contentful@8.15.0

Updated on Jan 07, 2025

v5.14.0

gatsby@5.14.0

Updated on Nov 06, 2024

gatsby-source-shopify@8.13.2

Updated on Oct 28, 2024

gatsby-source-wordpress@7.13.5 and 6 more...

gatsby-source-wordpress@7.13.5

Updated on Oct 28, 2024

View All 149 releases

Languages

JavaScript

TypeScript

CSS

HTML

MDX

Shell

Dockerfile

PHP

EJS

Python

Less

SCSS

Stylus

JavaScript (58.91%)

TypeScript (38.71%)

CSS (1.05%)

HTML (0.69%)

MDX (0.45%)

Shell (0.13%)

Dockerfile (0.03%)

PHP (0.02%)

EJS (0.01%)

Developer

gatsbyjs

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

55,905 Stars

21,738 Commits

10,289 Forks

719 Watchers

316 Branches

3,966 Contributors

Updated on Jul 14, 2025

Maintainers

View All 3,966 Contributors

Package Meta Information

Latest Version

7.14.0

Package Id

gatsby-remark-images@7.14.0

Unpacked Size

112.82 kB

Size

22.03 kB

File Count

NPM Version

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Node Version

20.11.1

Published on

Nov 06, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

gatsby-remark-images

Processes images in markdown so they can be used in the production build.

In the processing, it makes images responsive by:

Adding an elastic container to hold the size of the image while it loads to avoid layout jumps.
Generating multiple versions of images at different widths and sets the srcset and sizes of the img element so regardless of the width of the device, the correct image is downloaded.
Using the "blur up" technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.

Install

1npm install gatsby-remark-images gatsby-plugin-sharp

How to use

1// In your gatsby-config.js
2plugins: [
3  `gatsby-plugin-sharp`,
4  {
5    resolve: `gatsby-transformer-remark`,
6    options: {
7      plugins: [
8        {
9          resolve: `gatsby-remark-images`,
10          options: {
11            // It's important to specify the maxWidth (in pixels) of
12            // the content container as this plugin uses this as the
13            // base for generating different widths of each image.
14            maxWidth: 590,
15          },
16        },
17      ],
18    },
19  },
20]

Usage in Markdown

You can reference an image using the relative path, where that path is relative to the location of the Markdown file you're typing in.

1![Alt text here](./image.jpg)

By default, the text Alt text here will be used as the alt attribute of the generated img tag. If an empty alt attribute like alt="" is wished, a reserved keyword GATSBY_EMPTY_ALT can be used.

1![GATSBY_EMPTY_ALT](./image.png)

Options

Name	Default	Description
`maxWidth`	`650`	The `maxWidth` in pixels of the div where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be.
`linkImagesToOriginal`	`true`	Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to `false` to disable this behavior.
`showCaptions`	`false`	Add a caption to each image with the contents of the title attribute, when this is not empty. If the title attribute is empty but the alt attribute is not, it will be used instead. Set this option to true to enable this behavior. You can also pass an array instead to specify which value should be used for the caption — for example, passing `['alt', 'title']` would use the alt attribute first, and then the title. When this is set to `true` it is the same as passing `['title', 'alt']`. If you just want to use the title (and omit captions for images that have alt attributes but no title), pass `['title']`.
`markdownCaptions`	`false`	Parse the caption as markdown instead of raw text. Ignored if `showCaptions` is `false`.
`wrapperStyle`		Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` or a function returning a style string which receives the information about the image you can use to dynamically set styles based on the `aspectRatio` for example.
`backgroundColor`	`white`	Set the background color of the image to match the background image of your design. Note: - set this option to `transparent` for a transparent image background. - set this option to `none` to completely remove the image background.
`quality`	`50`	The quality level of the generated files.
`withWebp`	`false`	Additionally generate WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass `true` for default support, or an object of options to specifically override those for the WebP files. For example, pass `{ quality: 80 }` to have the WebP images be at quality level 80.
`withAvif`	`false`	Additionally generate AVIF versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass `true` for default support, or an object of options to specifically override those for the AVIF files. For example, pass `{ quality: 80 }` to have the AVIF images be at quality level 80.
`tracedSVG`	`false`	Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen here), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to `TURNPOLICY_MAJORITY`. See `node-potrace` parameter documentation for a full listing and explanation of the available options.
`loading`	`lazy`	Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`.
`decoding`	`async`	Set the browser's native decoding attribute. One of `async`, `sync` or `auto`.
`disableBgImageOnAlpha`	`false`	Images containing transparent pixels around the edges results in images with blurry edges. As a result, these images do not work well with the "blur up" technique used in this plugin. As a workaround to disable background images with blurry edges on images containing transparent pixels, enable this setting.
`disableBgImage`	`false`	Remove background image and its' inline style. Useful to prevent `Stylesheet too long` error on AMP.
`srcSetBreakpoints`		By default gatsby generates 0.25x, 0.5x, 1x, 1.5x, 2x, and 3x sizes of thumbnails. 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 650 by default), so you will actually get `[ 200, 340, 520, 650, 890 ]` as breakpoints.

dynamic wrapperStyle example

1{
2  resolve: `gatsby-remark-images`,
3  options: {
4    maxWidth: 800,
5    wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
6  },
7}

Supported Formats

This plugin will support the following formats:

JPEG
PNG
WEBP
TIFF
AVIF

Since Sharp is used for image processing, this plugin will not support GIFs or SVGs. If you would like to render these file types with the image markdown syntax, use the gatsby-remark-copy-linked-files plugin. Do note with this it will load in the images, but won't use the features of Sharp such as the elastic container or the blur-up enhancements.

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

8

Maintained

Determines if the project is "actively maintained".

8

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: containerImage not pinned by hash: .github/actions/gatsby-site-showcase-validator/Dockerfile:1: pin your Docker image by updating node:10-slim to node:10-slim@sha256:88932859e3d022d79161b99628c4c2c50e836437455e2d1b1a008d98367b10d6
Warn: containerImage not pinned by hash: .github/actions/high-priority-prs/Dockerfile:1: pin your Docker image by updating node:10-slim to node:10-slim@sha256:88932859e3d022d79161b99628c4c2c50e836437455e2d1b1a008d98367b10d6
Warn: containerImage not pinned by hash: .gitpod.Dockerfile:1: pin your Docker image by updating gitpod/workspace-full to gitpod/workspace-full@sha256:b1195dfae7ee9a12a89d195247c3e1357cc6a18360a41473dbec67525ef434e2
Warn: containerImage not pinned by hash: benchmarks/docker-runner/Dockerfile:1: pin your Docker image by updating node:14-buster to node:14-buster@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
Warn: containerImage not pinned by hash: integration-tests/gatsby-source-wordpress/docker/wordpress/Dockerfile:1: pin your Docker image by updating wordpress:6.1 to wordpress:6.1@sha256:6991d7aea34c9746ab76ab22bcccdedc3594d37a148e08161c29b128bd50294c
Warn: containerImage not pinned by hash: integration-tests/gatsby-source-wordpress/docker/wp-cli/Dockerfile:1: pin your Docker image by updating wordpress:cli-php7.4 to wordpress:cli-php7.4@sha256:946a8b7f237f6cf90d8f04aff952544a0332d43374d598925dcf0180e4441c6c
Warn: npmCommand not pinned by hash: .gitpod.Dockerfile:8
Warn: npmCommand not pinned by hash: benchmarks/docker-runner/Dockerfile:6
Warn: npmCommand not pinned by hash: examples/build-all-examples.sh:34
Warn: npmCommand not pinned by hash: scripts/e2e-test.sh:17
Warn: npmCommand not pinned by hash: scripts/e2e-test.sh:17
Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 6 containerImage dependencies pinned
Info: 1 out of 6 npmCommand dependencies pinned

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

100 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
Warn: Project is vulnerable to: GHSA-4pg4-qvpc-4q3h
Warn: Project is vulnerable to: GHSA-g5hg-p3ph-g8qg
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-8gh8-hqwg-xf34
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33
Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959
Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6
Warn: Project is vulnerable to: GHSA-3wc5-fcw2-2329
Warn: Project is vulnerable to: GHSA-64fm-8hw2-v72w
Warn: Project is vulnerable to: GHSA-f98w-7cxr-ff2h
Warn: Project is vulnerable to: GHSA-cg87-wmx4-v546
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-4r6h-8v6p-xvw6
Warn: Project is vulnerable to: GHSA-5pgg-2g8v-p4x9
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

6.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to gatsby-remark-images

Other packages similar to gatsby-remark-images

gatsby-remark-images

Installations

Developer Guide

No

CommonJS

>=18.0.0

20.11.1

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Pull Requests

213

22,353

3,970

18,170

Issues

216

14,114

13,898

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

gatsby-remark-images

Install

How to use

Usage in Markdown

Options

dynamic wrapperStyle example

Supported Formats

10

10

10

10

10

8

8

8

0

0

0

0

6.7

/10