title: Picture Tag Not Showing Image, Reads "Source 0x0"
body: <p>My client has stressed that the images in their website are blurry so I am trying to fix this issue. Per my research one way is to create different sized images per device (small, med, large) using the <code>&lt;picture&gt;</code> tag. However, when using the developer tools, my images does not show up at all, in says <code>"Source 0x0."</code> What is also happening is when on mobile or on tablet devices the default image is always selected rather than the appropriate image. I have researched this problem and could not find an adequate answer for my case. I even tried to change my path, nothing. I am only using HTML for this part. Any help is appreciated. </p>
  
  <p>Also, if anyone can recommend a more efficient way of making images more crisp and less blurry please point me in the right direction. I have heard of using SVG but I can't find solid advice on this method. </p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="view3"&gt;
          &lt;div class="content5_items"&gt;
              &lt;h1 class="text-center"&gt;Sign Up&lt;/h1&gt;
              &lt;br&gt;
              &lt;p class="text-center"&gt;Join Wanzeru Now&lt;/p&gt;
              &lt;br&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6 col-sm-6 d-flex justify-content-end"&gt;
                          &lt;picture&gt;
                               &lt;source media="(max-width: 480px)" srcset="img/sign_upSmall.png"&gt;
                               &lt;source media="(max-width: 768px)" srcset="img/sign_upMed.png"&gt;
                              &lt;img src="img/sign_up.png" alt="pic"&gt; &lt;!--this image is only being applied --&gt;
                          &lt;/picture&gt;
  
                      &lt;/div&gt;
                      &lt;div class="col-md-6 justify-content-md-start justify-content-center d-flex text-center" style="margin-top: 50px;"&gt;
                          &lt;form&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input type="name" class="form-control" id="exampleInputName" aria-describedby="emailHelp" placeholder="Name"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input type="email" class="form-control" id="exampleInputEmail" placeholder="Email"&gt;
                              &lt;/div&gt;
                              &lt;button type="submit" class="btn" style="background-color: #D34ED5; color:#fff; margin-bottom: 70px; width: 190px;"&gt;Sign up&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nAYaJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAYaJ.png" alt="enter image description here"></a></p>