Responsive Images Example

Use the picture tag to provide multiple images for a client to choose from. Each picture tag requires one or more source tags and its last child must be an img.

Advantages

• send lower bandwidth images for smaller clients
• re-frame images suitably for different sized devices

Attributes for the source tag:

• srcset the path to the image
• media a media query that determines if the image is used
• type define the MIME type of the image. if a client does not support the type, the image will not be used

<picture>
	
  <-- source tags provide options for client -->		  
  <source srcset="images/medium_res.jpg"
	  media="(min-width: 400px) AND (max-width:800px)">
  <source srcset="images/low_res.jpg"
	  media="(min-width: 0px) AND (max-width:399px)">
		  
  <-- img tag defines default -->		  
  <img src="images/high_res_default.jpeg" alt="" >
  
</picture>

Scalable Images

Images will show actual size by default. To scale images according to the parent container and maintain the aspect ratio, use max-width:100%; and height:auto;

img{
	/* apply to scale images with the parent */
	max-width: 100%;
	height:auto;
}

Change the width of the viewport to see how the images below behave. Check the source code for the CSS for details.

The following images are full size by default, but will scale smaller if the containing element is reduced in size.