Responsive Image

TIP

• Use the .c-image.-responsive classes to make an image responsive. The image will scale with the width of the parent element.
• Add loading="lazy" to the image tag to enable lazy loading, this will help to improve the page load time.
• The figcaption HTML element represents a caption or legend describing the rest of the contents of its parent figure element, providing the figure an accessible description.
• Add the alt attribute to the image tag with a meaningful description of the image content.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?

This is a caption for the image.

<figure>
  <img class="c-image -responsive" src="/public/resources/images/home/phip.png" alt="meaningful description of the image" loading="lazy" />
  <figcaption>
    This is a caption for the image.
  </figcaption>
</figure>