gatsby-remark-picture

    1.0.1 • Public • Published

    gatsby-remark-picture

    npm package

    Features

    • Wrap images by a <picture> tag.
    • Make remark images reponsives by generating differents sizes
    • Add a <source> tag with srcset, sizes and type attributes.

    With gatsby-remark-picture

    Hello Word!
     
    ![](image.jpg)

    The previous markdown will generate the following DOM:

    <div>
      <p>Hello Word!</p>
      <picture>
        <!-- With "withWebp: true" option -->
        <source
          srcset="
            /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.webp 200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.webp 400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.webp 800w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.webp 1200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.webp 1600w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.webp 2400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-64024.webp 4240w
          "
          sizes="(max-width: 800px) 100vw, 800px"
          type="image/jpeg"
        >
        <!-- With "withSource: true" option -->
        <source
          srcset="
            /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.jpg 200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.jpg 400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg 800w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.jpg 1200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.jpg 1600w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.jpg 2400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-64024.jpg 4240w
          "
          sizes="(max-width: 800px) 100vw, 800px"
          type="image/jpeg"
        >
        <img
          srcset="
            /static/image-e5090913465832b3ea4cd5728e0970b2-0a74b.jpg 200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4de56.jpg 400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg 800w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-6c443.jpg 1200w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-4010f.jpg 1600w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-17ee1.jpg 2400w,
            /static/image-e5090913465832b3ea4cd5728e0970b2-64024.jpg 4240w
          "
          src="/static/image-e5090913465832b3ea4cd5728e0970b2-d9af4.jpg"
        >
      </picture>
    </div>

    Note: To remove the paragraph tag wrapping the picture tag, you can use gatsby-remark-unwrap-images plugin before gatsby-remark-picture

    Without gatsby-remark-picture

    Hello Word!
     
    ![](image.jpg)

    The previous markdown will generate the following DOM:

    <div>
      <p>Hello Word!</p>
      <p>
        <img src="image.jpg" />
      </p>
    </div>

    Getting started

    gatsby-remark-picture

    You can download gatsby-remark-picture from the NPM registry via the npm or yarn commands

    yarn add gatsby-remark-picture
    npm install gatsby-remark-picture --save

    Usage

    Add the plugin in your gatsby-config.js file:

    module.exports = {
        plugins: [
            {
                resolve: "gatsby-transformer-remark",
                options: {
                    plugins: [
                        // Optional: Remove the paragraph tag wrapping images
                        "gatsby-remark-unwrap-images",
                        // Wrap images by pictures
                        "gatsby-remark-picture",
                    ],
                },
            },
        ],
    }

    Props

    Name PropType Description Default Example
    className string Add custom className - "myCustomClassName"
    withSource boolean Add a <source> tag with responsives images false true
    withSourceWebp boolean Add a <source> tag with responsives .webp images false true

    Contributing

    • ⇄ Pull/Merge requests and ★ Stars are always welcome.
    • For bugs and feature requests, please create an issue.

    See CONTRIBUTING.md guidelines

    Changelog

    See CHANGELOG.md

    License

    This project is licensed under the MIT License - see the LICENCE.md file for details

    Install

    npm i gatsby-remark-picture

    DownloadsWeekly Downloads

    16

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • cedricdelpoux