title: load images using the picture tag
body: <p>I currently try to use the picture tag for a website. This is my current code (the picture are at /images/test1.jpg and /images/test2.jpg:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;picture&gt;
    &lt;source srcset="/images/test2.jpg" type="image/jpeg" &gt;
    &lt;img src="/images/test1.jpg"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>The expected result is that when the browser supports it it loads the image from the srcset and otherwise from the img tag. However I tested in Chrome and Firefox, which should both support it and the result is that it shows the image from the srcset with a size of 0x0 and additionally shows the picture from the src tag.
  How to correctly implement this using the picture tag?</p>
  
  <p>Edit:
  this is how I added the class defining the image width earlier, which resulted in a empty field of the width I set in the image class and a field with the image from the src.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;picture&gt;
    &lt;source class="image" srcset="/images/test2.jpg" type="image/jpeg" &gt;
    &lt;img class="image" src="/images/test1.jpg"&gt;
  &lt;/picture&gt;
  </code></pre>