﻿<?xml version="1.0" encoding="utf-8"?>

<snippet name="Responsive Images using picture element" description="Responsive Images using picture element" preview="code" type="block">

<insertText location="beforeSelection">

<![CDATA[<picture alt="description of image">



  <!-- Default low resolution image -->

  <source src="small.jpg">



  <!-- Medium resolution image -->

  <source src="medium.jpg" media="(min-width: 768px)">



  <!--High resolution Image -->

  <source src="large.jpg" media="(min-width: 1200px)">



  <!-- Fallback image incase the custom picture element is not supported -->

  <img src="small.jpg" alt="description of image">



</picture>]]>

</insertText>

<insertText location="afterSelection"><![CDATA[]]>

</insertText>

</snippet>

