Load images based on screen size

Question

I have the following HTML code which displays an image:

Answer 1

I would suggest CSS media query first and then JavaScript if you need to support a browser that doesn't support media query. This example uses 850px as a maximum width before the image is changed.

CSS:

/* media query device layout transformation for 850px width trigger */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS/JQuery:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML: