how to load differ image depending on screen width

<script>
if (document.documentElement.clientWidth > 940)
{
   document.write('<img class="<?php echo "ligncenter size-full ".$imgInfo[$randno][id];?>" src="<?php echo $imgInfo[$randno][src];?>" title="<?php echo $imgInfo[$randno][title];?>" alt="<?php echo $imgInfo[$randno][alt];?>" />');
}
</script>