{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/components/images",
    "result": {"data":{"contentPage":{"title":"Images","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":false,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Images\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", {\n    \"id\": \"section-with-caption\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"with-caption\"\n  }, \"With caption\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images can have a caption. It's authored by setting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" using the markdown notation.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"754px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.066312997347477%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGKAD//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAE/IX//2gAMAwEAAgADAAAAEPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPxB//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"The image title goes here and should be rendered as the caption\",\n    \"src\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg 754w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 754px) 100vw, 754px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"The image title goes here and should be rendered as the caption\"), \"\\n  \"))), mdx(\"section\", {\n    \"id\": \"section-without-caption\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"without-caption\"\n  }, \"Without caption\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images without a title do not have a caption.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"754px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.066312997347477%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGKAD//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAE/IX//2gAMAwEAAgADAAAAEPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPxB//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"the image alt text goes here\",\n    \"src\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg 754w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 754px) 100vw, 754px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-svg\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"svg\"\n  }, \"SVG\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"SVG Images are not handled by Gatsby but should still be properly rendered.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/docs-smoke-test/files/dc3cff6e4e2358a040d84b1754154a5e/svg-with-transparent-background.svg\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"this is the title\"\n  }))), mdx(\"section\", {\n    \"id\": \"section-small-size\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"small-size\"\n  }, \"Small size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images with a small size are \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"not recommended\"), \" to be used.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"200px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/03fedb3125cfc6d36d3de3a46a7434bf/e07e9/200.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGKAAAD/8QAFBABAAAAAAAAAAAAAAAAAAAAMP/aAAgBAQABBQIf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAFBABAAAAAAAAAAAAAAAAAAAAMP/aAAgBAQAGPwIf/8QAFBABAAAAAAAAAAAAAAAAAAAAMP/aAAgBAQABPyEf/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAUEAEAAAAAAAAAAAAAAAAAAAAw/9oACAEBAAE/EB//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"the image alt text goes here\",\n    \"src\": \"/docs-smoke-test/static/03fedb3125cfc6d36d3de3a46a7434bf/e07e9/200.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/03fedb3125cfc6d36d3de3a46a7434bf/e07e9/200.jpg 200w\"],\n    \"sizes\": \"(max-width: 200px) 100vw, 200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-big-height\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"big-height\"\n  }, \"Big height\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images with a big height are \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"not recommended\"), \" to be used.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"300px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/e514e1cbdd6c783cb61bc3a27ab5fca2/f93b5/300x900.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"300%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAA8ABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGKAAAAAAAD/8QAFBABAAAAAAAAAAAAAAAAAAAAQP/aAAgBAQABBQJH/8QAFBEBAAAAAAAAAAAAAAAAAAAAMP/aAAgBAwEBPwEP/8QAFBEBAAAAAAAAAAAAAAAAAAAAMP/aAAgBAgEBPwEP/8QAFBABAAAAAAAAAAAAAAAAAAAAQP/aAAgBAQAGPwJH/8QAFBABAAAAAAAAAAAAAAAAAAAAQP/aAAgBAQABPyFH/9oADAMBAAIAAwAAABDzzzzzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAw/9oACAEDAQE/EA//xAAUEQEAAAAAAAAAAAAAAAAAAAAw/9oACAECAQE/EA//xAAUEAEAAAAAAAAAAAAAAAAAAABA/9oACAEBAAE/EEf/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"the image alt text goes here\",\n    \"src\": \"/docs-smoke-test/static/e514e1cbdd6c783cb61bc3a27ab5fca2/f93b5/300x900.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/e514e1cbdd6c783cb61bc3a27ab5fca2/f93b5/300x900.jpg 300w\"],\n    \"sizes\": \"(max-width: 300px) 100vw, 300px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-transparent-background\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"transparent-background\"\n  }, \"Transparent background\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Images without a transparent background (.png) should get a white background.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"190px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/29b5057b12f2e61e010113a49551d5e0/a2d4f/transparent-bkg.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVQ4y62UvUpDQRCFP2+0NEUQf0AQJS+Q2iaNik06n8JSENTGOi/gI1jY+hAW6ZJAGks7C1E0N1GiBM7AsNzs/TEDw+ydu3P2zO7MQFwSYFXW1itUlKTiv0wxFi2gCzwA98ANsFsW1DZeAL8Z+g6cFgWtyXYcwASYyk7kGwPNIJuoPClwmsHQQO8CEgvv7cAFGZsj4Fzf37JDYK3I3bUV8CPbl38TSN1Bb8BGLG2jfhIwGci/D3w5wPl6OwaY5ADuKX0D/Fw2YC7DRSn3/5vyYfAoI/m33CFzfQUaMUBz7gAfCppJr1R3nnmvTA8/KigNinrmfLd5he3TbinYuiVVsRu7Z6BetPUM9Bh4yWi9nuvj0hNnHTgDroFLVUDlmbjUAesfqeY0F+gPxRN2hZz9LPkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"the image alt text goes here\",\n    \"src\": \"/docs-smoke-test/static/29b5057b12f2e61e010113a49551d5e0/a2d4f/transparent-bkg.png\",\n    \"srcSet\": [\"/docs-smoke-test/static/29b5057b12f2e61e010113a49551d5e0/a2d4f/transparent-bkg.png 190w\"],\n    \"sizes\": \"(max-width: 190px) 100vw, 190px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-inline-content\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"inline-content\"\n  }, \"Inline content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The following image is embedded into a body text paragraph.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The Image is after this text \", mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"754px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.066312997347477%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGKAD//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAE/IX//2gAMAwEAAgADAAAAEPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPxB//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"the image alt text goes here\",\n    \"title\": \"The image title goes here and should be rendered as the caption\",\n    \"src\": \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/cbfa4/1200x300.jpg 754w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 754px) 100vw, 754px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"The image title goes here and should be rendered as the caption\"), \"\\n  \"), \" and before this text.\")), mdx(\"section\", {\n    \"id\": \"section-external-image\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"external-image\"\n  }, \"External image\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"External images are \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"not recommended\"), \" to be used but they should work as well and somehow do not look ugly.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://octodex.github.com/images/minion.png\",\n    \"alt\": \"Minion\"\n  }))), mdx(\"section\", {\n    \"id\": \"section-last-section\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"last-section\"\n  }, \"Last section\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This section is only useful as an anchor link target.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"With caption","url":"#with-caption"},{"title":"Without caption","url":"#without-caption"},{"title":"SVG","url":"#svg"},{"title":"Small size","url":"#small-size"},{"title":"Big height","url":"#big-height"},{"title":"Transparent background","url":"#transparent-background"},{"title":"Inline content","url":"#inline-content"},{"title":"External image","url":"#external-image"},{"title":"Last section","url":"#last-section"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":1}},"pageContext":{"slug":"/components/images","shortTitle":"Images","hasReleaseNotes":true}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989","801034918"]}