{"componentChunkName":"component---src-templates-term-jsx","path":"/responsive-design-glossary/responsive-images/","result":{"data":{"mdx":{"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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Responsive images\",\n  \"plural\": true\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `For a sharp picture on a desktop you need a much larger image than on a mobile phone. If you just add images for the desktop size, your mobile users will end up downloading large images, wasting their bandwidth and slowing your site down. With responsive images, you can offer a set of images at different sizes and quality (and even content), and the browser will decide which is the best to show to the user.`), mdx(\"p\", null, `You can do this by using the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `srcset`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `sizes`), ` attribute on an `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `<img>`), ` element, or by using the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `<picture>`), ` element and adding `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `<source>`), ` elements to it. With this, you can vary the size of images you send, the pixel density (so mobile phones with sharper screens get sharper images), the type of image (you can send a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `webp`), ` to browsers that support it, and a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `jpg`), ` to browsers that don't) or even do art direction, where on smaller screens you zoom in to a specific part of the image.`), mdx(\"p\", null, `A really good overview of how to apply these techniques can be found on MDN: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\"\n  }), `responsive images on MDN`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"For a sharp picture on a desktop you need a much larger image than on a mobile phone. If you just add images for the…","frontmatter":{"title":"Responsive images","plural":true,"determiner":null},"fields":{"slug":"/responsive-design-glossary/responsive-images/","ogFileName":"responsive-images"}}},"pageContext":{"slug":"/responsive-design-glossary/responsive-images/"}},"staticQueryHashes":["4164364741","425175329"]}