Loading an image based on browser width

This is my code:

<img class="abc" src="abc.jpg"/>
<img class="xyz" src="xyz.jpg"/>
<script>
  if (window.innerWidth > 500)
    {
        $(".abc").remove();
    }
    else 
    {
        $(".xyz").remove();
    }
</script>

But it only hides the image, i guess. Because the network tab shows the page size total to the size of both the images.