Load images based on screen size

Question

I have the following HTML code which displays an image:

Answer 1

Use a media query to shrink the image and show a background image.

Note: this method requires you know the size/proportions of the replacement image.

Fiddle

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}