9 Images

9.1 Images

If you need to include a heading or caption for the image, include the <figcaption> to hold and style the text.
Add the class .pull--left or .pull--right to the <img> tag to float the image to the left or the right, respectively within the content.

Example image — Figure Heading

This is a placeholder image, with supporting caption.

<figure>
	<img alt="Example image" src="http://placehold.it/800x480/666666/cccccc">
	<figcaption>
		<h4>Figure Heading</h4>
		<p>This is a placeholder image, with supporting caption.</p>
	</figcaption>
</figure>

9.2 Images with content overlays

Only use to help make text more accessible/easier to read
Use a minimum of 85% background tint opacity to ensure readability of text
Use rectangle or circle shapes only
Care should be taken with crafting content to ensure no overflow on smaller screen sizes

<figure class="relative">
	<img alt="Example image" src="http://placehold.it/1500x900/666666/cccccc">
	<figcaption class="panel-img-overlay">
		<h4 class="primary-font mega push--bottom">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
     <p class="beta push--bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
     <a href="#" class="btn btn--primary btn--icon">Example button <span class="icon icon-angle-right"></span></a>
	</figcaption>
</figure>

9.3 Images with icons

<figure>
 <img alt="Example image" src="http://placehold.it/400x240/666666/cccccc">
 <figcaption class="relative block">
   <span class="icon icon--image-overlay icon-resize-full"></span>
 </figcaption>
</figure>

9.4 Caption variations

<div class="row">
<figure class="col medium_4">
	<img alt="Example image" src="http://placehold.it/400x240/666666/cccccc">
	<figcaption class="bg-primary-color soft-half--ends soft--sides">
     <p class="secondary-font white beta">Some example caption copy</p>
	</figcaption>
</figure>
<figure class="col medium_4">
	<img alt="Example image" src="http://placehold.it/400x240/666666/cccccc">
	<figcaption class="bg-beige soft-half--ends soft--sides">
     <p class="secondary-font blue beta">Some example caption copy</p>
	</figcaption>
</figure>
<figure class="col medium_4">
	<img alt="Example image" src="http://placehold.it/400x240/666666/cccccc">
	<figcaption class="bg-dark-grey-3 soft-half--ends soft--sides">
     <p class="secondary-font white beta">Some example caption copy</p>
	</figcaption>
</figure>
</div>

9.5 Image ratios

Care should be taken when choosing image ratios. Images too tall or to thin will potentially have legibility and layout issues on smaller screens. The use of a consistent 5:3 ratio for all article level content and related thumbnails is recommended. This ratio will scale gracefully across a wide variety of screen sizes and devices. The example layout below illustrates the use of a consistent 5:3 image ratio.

9.6 Responsive images

Until browser vendors have a native solution each project and its responsive images solution should be judged on a project by project basis dependent on content requirements.

Choosing a Responsive Image Solution Sherri Alexander, Smashing Magazine. Alexander looks at the high-level requirements for responsive images, and then dissects the variety of solutions currently available in the wild.
Which Responsive Image Solution Should You Use Chris Coyier, CSS-Tricks. Coyer takes us through imaging requirements while suggesting appropriate solutions.
Picturefill
Compressive images When considering a jpeg image's file size, the level of compression makes more of a difference than its physical dimensions.

Patterns