Art Directed Responsive Images
<p>I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.</p>

<p>I am using the <code>&lt;picture&gt;</code> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices. </p>

<p>The code currently reads:</p>

<pre><code>&lt;picture&gt;
  &lt;source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png"&gt;
  &lt;img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”&gt;
&lt;/picture&gt;
</code></pre>

<p>I understand that <code>&lt;picture&gt;</code> is not supported on all platforms, so I also tried <code>srcset</code>, as follows:</p>

<pre><code>&lt;img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w, 
             http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w" 
     sizes="100vw” 
     src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”&gt;
</code></pre>

<p>I want the image to always be 100% width, and to switch to a different image when viewing below 950px.</p>

<p>I am referencing code from here <a href="http://alistapart.com/article/using-responsive-images-now#section3" rel="nofollow">http://alistapart.com/article/using-responsive-images-now#section3</a>, but am I missing something? Can someone point me in the right direction?</p>

<p>My working site is <a href="http://phillipsperfections.com/" rel="nofollow">http://phillipsperfections.com/</a>. You should be able to view source for all of the code.</p>

<p>Thanks so much!</p>