The Log Blog

Working with Markdown Images in Gatsby

10 October, 2018

You need to first install some image plugins as option for gatsby plugin gatsby-transformer-remark.

  1. gatsby-plugin-sharp : use the Sharp image processing library to resize and compress our images.
  2. gatsby-transformer-sharp : query the images on GraphQL through special ImageSharp nodes.
  3. gatsby-remark-copy-linked-files : it does the magic of grabbing any files we link in our Markdown, like images or even PDFs, and copies them to the ./public folder.
  4. gatsby-remark-images it makes all the images responsive, giving us access to a component that automatically scales depending on the user's device size.

npm i --save gatsby-remark-images gatsby-plugin-sharp gatsby-remark-copy-linked-files gatsby-transformer-sharp

`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
    resolve: `gatsby-transformer-remark`,
    options: {
        plugins: [
            {
            resolve: `gatsby-remark-images`,
            options: {
                maxWidth: 590,
            },
            },
            'gatsby-remark-copy-linked-files',
        ],
    },
},