gatsby-remark-picture
Features
- Wrap images by a
<picture>
tag. - Make remark images reponsives by generating differents sizes
- Add a
<source>
tag withsrcset
,sizes
andtype
attributes.
gatsby-remark-picture
With Hello Word! ![](image.jpg)
The previous markdown will generate the following DOM:
Hello Word! <!-- With "withWebp: true" option --> <!-- With "withSource: true" option -->
Note: To remove the paragraph tag wrapping the
picture
tag, you can use gatsby-remark-unwrap-images plugin beforegatsby-remark-picture
gatsby-remark-picture
Without Hello Word! ![](image.jpg)
The previous markdown will generate the following DOM:
Hello Word!
Getting started
You can download gatsby-remark-picture
from the NPM registry via the
npm
or yarn
commands
yarn add gatsby-remark-picturenpm install gatsby-remark-picture --save
Usage
Add the plugin in your gatsby-config.js
file:
moduleexports = 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