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 wondering if anyone could give me any advice on how to change the path depending on the screens width.

If the screen is regular the <img> would look like

<img src="images/620x410/image1.jpg" alt="">

and If the screen was in the tablet width it would load

<img src="images/310x205/images1.jpg" alt="">

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg

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:

<img class="yourClass">

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