Q:

Change img src in response to media query (CSS or Javascript)

I want to change the src of an image in response to a media query where the max-width is 515 px.
Potentially if javascript has an event that does the same thing as a css media query or something like that I could implement javascript or jQuery as well (maybe AngularJS too).
The reason I want 3 (well for now 2) separate images is to reduce the file size for example on mobile devices, where I could be loading a 50 KB photo instead of a 700 KB one.
If any code or other information is needed comment and I will add it in.
Note: This answer to the question How to use a lower resolution image for mobile solves the same type of problem using the html5 picture element (instead of a css or jQuery 'media query' as wanted) which is also a great solution.

A:

One method would be You can check the window width and set the image src using JavaScript
$(document).ready(function() {
     if($(window).width() > 515) {
         $("#img").attr("src", "large.png");
     } else {
         $("#img").attr("src", "small.png");
     }
}); 

For mobile you need to check the width during orientation change as well.
If you don't want the img tag, you can have background images. Background images can be handled within CSS media queries.

