Different Image Files Based on Browser Width

By Forrest Smith - Drempd.com

.ipad,.mobile{display:none;}



@media(max-width: 768px){

  .desktop,.mobile{

    display:none;

  }

  .ipad{

    display:block;

  }

}

@media(max-width: 500px){

  .desktop,.ipad{

    display:none;

  }

  .mobile{

    display:block;

  }

}




<img src="image-file-desktop" class="desktop">

<img src="image-file-ipad" class="ipad">

<img src="image-file-mobile" class="mobile">