{"componentChunkName":"component---packages-gatsby-theme-docs-src-templates-page-content-js","path":"/components/images","result":{"data":{"contentPage":{"title":"Images","websitePrimaryColor":"#1a1a1a","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Images\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\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\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"770px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"24.870466321243526%\",\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\", _extends({\n    parentName: \"a\"\n  }, {\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/e6e7b/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/fe066/1200x300.jpg 193w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/92269/1200x300.jpg 385w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e6e7b/1200x300.jpg 770w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/86556/1200x300.jpg 1155w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 770px) 100vw, 770px\",\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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\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\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"770px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"24.870466321243526%\",\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\", _extends({\n    parentName: \"a\"\n  }, {\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/e6e7b/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/fe066/1200x300.jpg 193w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/92269/1200x300.jpg 385w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e6e7b/1200x300.jpg 770w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/86556/1200x300.jpg 1155w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 770px) 100vw, 770px\",\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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-svg\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\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/fe066/200.jpg 193w\", \"/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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-big-height\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\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/fe066/300x900.jpg 193w\", \"/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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-transparent-background\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\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,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAABI0lEQVQ4y2NgIAyY0TAjA5mAiUw5vBpYgTgAiKuBuBaIo4CYn1RDYQr1gPgaEP9Hw8+A2J1YQ2HhIwrEz6EG/ALiH0D8HcoGif0FYn1iDGWG0t1QjSCD/qG58AeU3kiKK2Fe/Q2lQRYUQ9kwC94CsSSaz7B6VwqqGOaiL0AsBJV7ABX7A6VN8bkSZqAyEH9CMvAjEMtC5W8hhSuItiXGQCUg/oxmoDRU7vagMFAZi4EwL5NloAwQv0My8BNSpNxBi31zYpIOC5JLYLGZD8RBSHyYRfL4kg1ywp6FloiR8U8ovZ+QYchOV0Uy7Cc0zH4hGQbCzsTmFJgCT2iEoLsQlFPSyC1xQLmmDIgXA/EyIG4AYg1ivErzAhY5KTFDDWBCYuMEAOTCdnJQbFbeAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"section\", {\n    \"id\": \"section-inline-content\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"770px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\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\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"24.870466321243526%\",\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\", _extends({\n    parentName: \"a\"\n  }, {\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/e6e7b/1200x300.jpg\",\n    \"srcSet\": [\"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/fe066/1200x300.jpg 193w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/92269/1200x300.jpg 385w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e6e7b/1200x300.jpg 770w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/86556/1200x300.jpg 1155w\", \"/docs-smoke-test/static/587804a5968509430a052a1d8f11f257/e5166/1200x300.jpg 1200w\"],\n    \"sizes\": \"(max-width: 770px) 100vw, 770px\",\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\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\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\", _extends({\n    parentName: \"section\"\n  }, {\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\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"section\"\n  }, {\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"}]}}},"pageContext":{"slug":"/components/images","shortTitle":"Images","hasReleaseNotes":true}}}