title: How replace img based on window size
body: <p>I am trying to replace <code>img src</code> based on window size. This is not a <code>background-image</code>. For mobile size my image needs to be different color/image then larger screens. It is easy to change size of image with css but I think I need to use Jquery to replace image src but cant figure it out yet. Any pointers? </p>
  
  <p>here is my html</p>
  
  <pre><code>&lt;a href="" class="logo"&gt;
     &lt;img id="brand" src="assets/img/image.png" alt="Image"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>here is my js</p>
  
  <pre><code>$(document).ready(function(){
  
      var windowSize = $( window ).width();
      if (windowSize  &lt; 400 ) { $('#brand').attr('src', 'assets/img/logo-2.png')};
  
  });
  </code></pre>
  
  <p>ALL this seems to do is change on load img src not change on window size or resize window.</p>
  
  <p>--edit -- form humbolight</p>
  
  <pre><code>$(function(){
    var $window = $(window);
    var toggleImage = function toggleImage($el, src){
      $el.attr('src',src);
    };
  
    $window.on('resize',function(){
      if ($window.width() &lt; 385){
        //mobile
        toggleImage($('#brand'),'assets/img/image.png');
      } else {
        //landscape tablet/desktop
        toggleImage($('#brand'),'assets/img/logo-2.png');
      }
    });
  
  });
  </code></pre>