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