<main>
  <h2>Responsive Images Using <code>srcset</code> and <code>sizes</code></h2>
  
  <p>Load this page on different devices and the browser will request one of three images, depending on the size of the viewport. However, resizing the window won't change the image that's initially loaded and a desktop browser with a small window will likely still load the larger image.</p>
  
  <img srcset="https://www.codeinwp.com/wp-content/uploads/2021/09/leopard-480.png 480w,
             https://www.codeinwp.com/wp-content/uploads/2021/09/leopard-800.png 800w,
             https://www.codeinwp.com/wp-content/uploads/2021/09/leopard.png 2000w"
       sizes="(max-width: 600px) 480px,
              (max-width: 1000px) 800px,
              1000px"
       src="https://www.codeinwp.com/wp-content/uploads/2021/09/leopard.png"
       alt="Leopard on a tree branch"
       width="1000" height="666.5"       >
  <p class="footer">Photo by <a href="https://unsplash.com/@aboeka">Gwen Weustink</a>.</p>
</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 1000px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

img {
  border: solid 2px black;
  max-width: 100%;
  height: auto;
}

.footer {
  text-align: center;
  font-size: 15px;
}

.footer a {
  color: firebrick;
}