<main>
  <h2>Using <code>srcset</code> with Pixel Density Descriptors</code></h2>
  
  <p>Load this page on different devices and the browser will request one of three images, depending on resolution of the device.</p>
  
  <img srcset="https://www.codeinwp.com/wp-content/uploads/2021/09/leopard-480.png,
             https://www.codeinwp.com/wp-content/uploads/2021/09/leopard-800.png 1.5x,
             https://www.codeinwp.com/wp-content/uploads/2021/09/leopard.png 2x"
       src="https://www.codeinwp.com/wp-content/uploads/2021/09/leopard-480.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;
}