Day 12: Figure 🖼️

A figure element represents a graphic asset with an optional caption.

The example component is visible below.

A few notes about this picture component:

• CSS Variables are used for colors,
• the srcset attribute is used to define the sizes of the image based on pixel density,
• the source element is used to define the MIME type of the image,
• the loading="lazy" attribute is used to notify the browser to download the image when the user scrolls near the component.

The code:

<figure class="advent-figure">
  <picture>
    <source srcset="https://res.cloudinary.com/starbist/image/upload/w_600,h_600/v1638533826/PSX_20210122_073918_k01l3d.webp 2x, https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.webp 1x" type="image/webp">
    <img srcset="https://res.cloudinary.com/starbist/image/upload/w_600,h_600/v1638533826/PSX_20210122_073918_k01l3d.jpg 2x, https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.jpg 1x" src="https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.jpg" alt="Silvestar's profile image in black and white." width="300" height="300">
  </picture>
  <figcaption>Silvestar</figcaption>
</figure>

.advent-figure {
  --color-xmas-alpha: #f7efef;

  all: unset;
}

.advent-figure img {
  background-color: var(--color-xmas-alpha);
}

.advent-figure figcaption {
  font-size: 70%;
  font-style: italic;
  opacity: 0.7;
}