title: Fallback Image in Picture Tag not working
body: <p>I tried to use the <code>&lt;picture&gt;</code> Tag in html to load "webp" images for faster loading times.
  This works and loads the webp image:</p>
  
  <pre><code>&lt;picture&gt;
  &lt;source srcset="img/imageXYZ.webp" type="image/webp"&gt;
  &lt;img src="img/imageXYZ.png"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>This works and loads the png image:</p>
  
  <pre><code>&lt;img src="img/imageXYZ.png"&gt;
  </code></pre>
  
  <p>But Firefox, Chrome and Edge aren't able to load the fallback image. I tested that by changing the name of the webp image to a wrong one like in the example below:</p>
  
  <pre><code>&lt;picture&gt;
  &lt;source srcset="img/imageXYZZZ.webp" type="image/webp"&gt;
  &lt;img src="img/imageXYZ.png"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>It just shows the "missing image symbol" like you see in the screenshot here:
  <a href="https://i.stack.imgur.com/WYq6A.jpg" rel="nofollow noreferrer">Screenshot</a></p>
  
  <p>EDIT: To get the test to work, Rodrigo Faria pointed out the right answer. For a more specific answer to my problem, see my answer.</p>