Images

Responsive image with picture

Code

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

Image with Caption

Placeholder
My Image Caption

Code

<figure><img src="http://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