From 8b398f4630d994aa31bfb7d4253b07d5c29d212c Mon Sep 17 00:00:00 2001
From: AJ Schmidt <ajschmidt8@users.noreply.github.com>
Date: Mon, 24 Jun 2019 10:52:29 -0400
Subject: [PATCH] fix(gatsby-remark-images): remove clickable whitespace around
 image when linking (#11528)

* update remark-images links

* Fix snapshots
---
 .../src/__tests__/__snapshots__/index.js.snap | 316 +++++++++---------
 packages/gatsby-remark-images/src/index.js    |  26 +-
 2 files changed, 173 insertions(+), 169 deletions(-)

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 8d475ede9cff4..b9e98d952adff 100644
--- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -2,14 +2,14 @@
 
 exports[`it handles goofy nesting properly 1`] = `
 "<span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <span
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"test\\"
@@ -18,19 +18,19 @@ exports[`it handles goofy nesting properly 1`] = `
         srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>"
+    </span>"
 `;
 
 exports[`it leaves images that are already linked alone 1`] = `
 "<span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <span
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"img\\"
@@ -39,45 +39,49 @@ exports[`it leaves images that are already linked alone 1`] = `
         srcset=\\"not-a-real-dir/image/my-image.jpg, not-a-real-dir/image/my-image.jpg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>"
+    </span>"
 `;
 
 exports[`it leaves linked HTML img tags alone 1`] = `
 "<a href=\\"https://example.org\\">
   <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
-    <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
-    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
-  </span>
+      <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
+  <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+    </span>
 </a>"
 `;
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
 "<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
-    <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
-    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
-  </span>"
+      <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
+  <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+    </span>"
 `;
 
 exports[`it transforms HTML img tags 1`] = `
-"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
-    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+      <a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
-    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
-  </span>
-  </a>"
+  <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+  </a>
+    </span>"
 `;
 
 exports[`it transforms HTML img tags with query strings 1`] = `
-"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
-    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+      <a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
-    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
-  </span>
-  </a>"
+  <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+  </a>
+    </span>"
 `;
 
 exports[`it transforms image references in markdown 1`] = `
-"<a
+"<span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -85,14 +89,10 @@ exports[`it transforms image references in markdown 1`] = `
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"alt text\\"
@@ -101,12 +101,16 @@ exports[`it transforms image references in markdown 1`] = `
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
-  </a>"
+  </a>
+    </span>"
 `;
 
 exports[`it transforms images in markdown 1`] = `
-"<a
+"<span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -114,14 +118,10 @@ exports[`it transforms images in markdown 1`] = `
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"image\\"
@@ -130,12 +130,16 @@ exports[`it transforms images in markdown 1`] = `
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
-  </a>"
+  </a>
+    </span>"
 `;
 
 exports[`it transforms images in markdown with query strings 1`] = `
-"<a
+"<span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -143,14 +147,10 @@ exports[`it transforms images in markdown with query strings 1`] = `
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"image\\"
@@ -159,12 +159,16 @@ exports[`it transforms images in markdown with query strings 1`] = `
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
-  </a>"
+  </a>
+    </span>"
 `;
 
 exports[`it uses tracedSVG placeholder when enabled 1`] = `
-"<a
+"<span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -172,14 +176,10 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg /'MOCK SVG/'%3c/svg%3e'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg /'MOCK SVG/'%3c/svg%3e'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"image\\"
@@ -188,13 +188,17 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
-  </a>"
+  </a>
+    </span>"
 `;
 
 exports[`showCaptions display alt as caption if specified first in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -202,14 +206,10 @@ exports[`showCaptions display alt as caption if specified first in showCaptions
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -218,15 +218,19 @@ exports[`showCaptions display alt as caption if specified first in showCaptions
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some alt</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions display alt as caption if specified in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -234,14 +238,10 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -250,15 +250,19 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some alt</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions display alt as caption if title was not found and showCaptions === true 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -266,14 +270,10 @@ exports[`showCaptions display alt as caption if title was not found and showCapt
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -282,15 +282,19 @@ exports[`showCaptions display alt as caption if title was not found and showCapt
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some alt</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions display title as caption if specified first in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -298,14 +302,10 @@ exports[`showCaptions display title as caption if specified first in showCaption
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -314,15 +314,19 @@ exports[`showCaptions display title as caption if specified first in showCaption
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some title</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions display title as caption if specified in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -330,14 +334,10 @@ exports[`showCaptions display title as caption if specified in showCaptions arra
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -346,15 +346,19 @@ exports[`showCaptions display title as caption if specified in showCaptions arra
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some title</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions display title as caption when showCaptions === true 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -362,14 +366,10 @@ exports[`showCaptions display title as caption when showCaptions === true 1`] =
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -378,15 +378,19 @@ exports[`showCaptions display title as caption when showCaptions === true 1`] =
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some title</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions fallback to alt as caption if specified second in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -394,14 +398,10 @@ exports[`showCaptions fallback to alt as caption if specified second in showCapt
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"some alt\\"
@@ -410,15 +410,19 @@ exports[`showCaptions fallback to alt as caption if specified second in showCapt
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some alt</figcaption>
   </figure>"
 `;
 
 exports[`showCaptions fallback to title as caption if specified second in showCaptions array 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
-    <a
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
     class=\\"gatsby-resp-image-link\\"
     href=\\"not-a-real-dir/images/my-image.jpeg\\"
     style=\\"display: block\\"
@@ -426,14 +430,10 @@ exports[`showCaptions fallback to title as caption if specified second in showCa
     rel=\\"noopener\\"
   >
     <span
-    class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
-  >
-    <span
-      class=\\"gatsby-resp-image-background-image\\"
-      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
-    ></span>
-    <img
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
         class=\\"gatsby-resp-image-image\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
         alt=\\"my image\\"
@@ -442,8 +442,8 @@ exports[`showCaptions fallback to title as caption if specified second in showCa
         srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
       />
-  </span>
   </a>
+    </span>
     <figcaption class=\\"gatsby-resp-image-figcaption\\">some title</figcaption>
   </figure>"
 `;
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index 15cb2537fd6cd..037f95a88fc0d 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -274,17 +274,10 @@ module.exports = (
 
     let rawHTML = `
   <span
-    class="${imageWrapperClass}"
-    style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
-      imageCaption ? `` : wrapperStyle
-    } max-width: ${presentationWidth}px;"
-  >
-    <span
-      class="${imageBackgroundClass}"
-      style="padding-bottom: ${ratio}; position: relative; bottom: 0; left: 0; background-image: url('${placeholderImageData}'); background-size: cover; display: block;"
-    ></span>
-    ${imageTag}
-  </span>
+    class="${imageBackgroundClass}"
+    style="padding-bottom: ${ratio}; position: relative; bottom: 0; left: 0; background-image: url('${placeholderImageData}'); background-size: cover; display: block;"
+  ></span>
+  ${imageTag}
   `.trim()
 
     // Make linking to original image optional.
@@ -302,6 +295,17 @@ module.exports = (
     `.trim()
     }
 
+    rawHTML = `
+    <span
+      class="${imageWrapperClass}"
+      style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
+        imageCaption ? `` : wrapperStyle
+      } max-width: ${presentationWidth}px;"
+    >
+      ${rawHTML}
+    </span>
+    `.trim()
+
     // Wrap in figure and use title as caption
     if (imageCaption) {
       rawHTML = `