Images for Responsive / Adaptive Web with JS

Question

I'm converting a site for mobile devices. Wondering the best practice to use to deliver a second set of images for users of mobile devices if I my code structured as follows? I am already using media queries to deliver different layouts for smaller devices, and want to deliver a second smaller set of images to mobile users.

            <div class="main_view">
                <div class="window">    
                    <div class="image_reel">
                        <a href=""><img src="pics/1.jpg" alt="" /></a>
                        <a href=""><img src="pics/2.jpg" alt="" /></a>
                    </div>
                </div>
                <div class="paging">
                    <a href="#" rel="1">1</a>
                    <a href="#" rel="2">2</a>
                </div>
            </div>

This html references Javascript that creates an 'image slider' effect kind of like the one suggested Here. The site does not have to deliver very many images. I'd rather not redesign the entire site to use css sprites and background images.

What is the best / most browser efficient way that I can deliver one more set of images to users only of mobile devices? Examples appreciated.

Thank you.

Answer 1

One way to do this is to make put all your image references in CSS and use media queries for a different set of CSS rules that specifies the smaller images. You can put all your images in CSS like this:

<a href=""><img id="img1" src="blank.gif" height="400" width="600"></a>

blank.gif is a 1x1 pixel tranparent gif (completely invisible) that is scaled to the height/width in the image tag. It's minutely small and easily cached by the browser.

Then, in your regular screen CSS, you have this:

#img1 {background: transparent url(pics/1.jpg) no-repeat;}

Then in your small screen CSS specified by a media query, you have this:

#img1 {background: transparent url(pics/1-small.jpg) no-repeat;}

One significant advantage of using this CSS mechanism is that you don't have to load one set of larger images and then after-the-fact change them to smaller images. Since the browser encounters the media query CSS stylesheet for the small device before it parses the HTML, it only ever loads the small images. Any javascript-based solution has to wait for the DOM to load before it can "patch" in the correct images.

Answer 2

You could use a custom attribute in your image tags, specifying the image used for non mobile devices, than you could change the src attribute to this value if the user-agent is a non-mobile device. You could do something like this (pseudo-code):

 $(document).ready(function() {
     if(!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       $('.mobile').each(function() {
          $(this).attr('src',$(this).attr('high-res-img'));
       });
     }
 });

 <img class="mobile" src="images/your-mobile-image.jpg" high-res-img="images/mobile-image.jpg" alt="" />

Answer 3

Another option would be (if javascript is enabled, which probably is if you're using a slider) to test for mobile using js, and then replace the html code for the slider with the mobile-friendly html code, before the slider script runs / initialises.