diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
index c7c6998a3170f..90d734bdc6974 100644
--- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -288,6 +288,46 @@ exports[`it transforms images in markdown with query strings 1`] = `
"
`;
+exports[`it transforms images in markdown with the "withWebp" option 1`] = `
+"
+
+
+
+
+
+ ![\\"image\\"](\\"not-a-real-dir/images/my-image.jpeg\\" "\\\"image\\\"")
+
+
+ "
+`;
+
exports[`it uses tracedSVG placeholder when enabled 1`] = `
" {
expect(node.value).not.toMatch(``)
})
+test(`it transforms images in markdown with the "withWebp" option`, async () => {
+ const imagePath = `images/my-image.jpeg`
+ const content = `
+
+
+ `.trim()
+
+ const nodes = await plugin(createPluginOptions(content, imagePath), {
+ withWebp: true,
+ })
+
+ expect(nodes.length).toBe(1)
+
+ const node = nodes.pop()
+ expect(node.type).toBe(`html`)
+ expect(node.value).toMatchSnapshot()
+ expect(node.value).not.toMatch(``)
+})
+
test(`it transforms multiple images in markdown`, async () => {
const imagePaths = [`images/my-image.jpeg`, `images/other-image.jpeg`]
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index 06e097fb49a03..d8e028fb0c824 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -249,6 +249,7 @@ module.exports = (
alt="${alt}"
title="${title}"
loading="${loading}"
+ style="${imageStyle}"
/>
`.trim()