How to change an image path based on screen width?

Question

I\'m trying to change the folder that my images are read from depending on the window width.

I have two folders that contain the different image sizes and I\'m wonde

Answer 1

If CSS using media queries is an option for you, you could use a CSS only solution.

Add the media queries to your CSS similar to the below:

@media screen and (max-width: 310px) {
  .yourClass {
    content:url("images/310x205/image1.jpg");
  }
}

@media screen and (min-width: 620px) {
  .yourClass {
    content:url("images/620x410/image1.jpg");
  }
}

Add the myClass to your effected image elements similar to the below:

You might need to tweak the values a little for your needs.