<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"
       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>
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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.