How to swap images on mobile/desktop in responsive mode

Question

I have a list of images for desktop and mobiles in the following folder structure:

img:
    img-1.png
    img-2.png
    img-3.png
    img-4.png
    img-5.png
    img-6.png

img/mobile:
        img-1.png
        img-2.png
        img-3.png
        img-4.png
        img-5.png
        img-6.png

I can use the following code to switch desktop img-1.png:

<span id="switcher">
   <img id="houdini" src="img/img-1.jpg" alt="">
</span> 

<span id="switcher2">
   <img id="houdini2" src="img/img-2.jpg" alt="">
</span>

<span id="switcher3">
   <img id="houdini3" src="img/img-3.jpg" alt="">
</span>

<span id="switcher4">
   <img id="houdini4" src="img/img-4.jpg" alt="">
</span>

<span id="switcher5">
   <img id="houdini5" src="img/img-5.jpg" alt="">
</span>

CSS:

@media only screen and (max-device-width: 489px) {
    span[id=switcher] {
        display:block;
        background-image: url(/mobile/img-1.jpg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    img[id=houdini] {display: none !important;}
}

How can I avoid writing the above CSS for every img-1 to 6... Can I pass/access an ID?

Can the use of !important be removed?

(Must work on IE8)

Solution 1

Instead of using background image on desktop, you could place each pair of images for desktop/mobile next to each other and toggle their display type by giving them the following classes:

Example Here

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile">
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}

Solution 2

<picture>

  <source srcset="https://mockuphone.com/static/images/devices/apple-imac2015retina-front.png" media="(min-width: 1000px)">
  <source srcset="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" media="(min-width: 500px)">
  <source srcset="https://mockuphone.com/static/images/devices/apple-iphone6splus-spacegrey-portrait.png" media="(max-width: 500px)"> 

  <img src="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" alt="Apple Product" id="my-image-1" class="my_image" style="max-width: 100vw; max-height: 100vh;">

</picture>

Try this. Use min-device-width and/or max-device-width, if you don't want the image to change on browser resize. Hope this helps!

Comments

[Oam Psy]

Thanks, nice solution. On initial page load, are 2 HTTP requests created?

[Hashem Qolami]

@OamPsy Yes. however even by using background images 2 HTTP requests would be created, first to display the image element in HTML (which would be hidden after) and then to load the background image.

[lemunk]

working on mobile optimization myself looking at things to do for images, this post is super easy. However wont you be loading double the resources now?

[Hashem Qolami]

@StevenSmith This answer is not optimized for mobile, nor for desktop. As I mentioned it before, It creates 2 HTTP requests on initial page load. There are new attributes named srcset/sizes that make UAs ignore the src attribute when the media condition matches; But the browser support is very limited as of now. The other option could be using images as background images within media queries; But still some UAs may create multiple HTTP requests at the same time.

[lemunk]

yeh that's the issue ive been facing, found a server side solution though that works ok, thanks for clarifying that up