Images

Responsive image with picture

Code

<picture class="banner__picture">
  <source media="(min-width: 1200px)" srcset="https://placehold.it/1200x400/777 1200w" sizes="100vw" />
  <source media="(min-width: 960px)" srcset="https://placehold.it/960x400/777 960w" sizes="100vw" />
  <source media="(min-width: 600px)" srcset="https://placehold.it/600x400/777 600w" sizes="100vw" />
  <source srcset="https://placehold.it/320x200/777 320w" sizes="100vw" />
  <img alt="" src="https://placehold.it/320x200/777" class="banner__image"/>
</picture>

Image with Caption

Placeholder
My Image Caption

Code

<figure>
  <img src="https://placehold.it/750x400/777" alt="Placeholder" >
  <figcaption>My Image Caption</figcaption>
</figure>

WordPress gallery markup (rendered code)

Gallery with 6 columns

Gallery with 4 columns