conditionally load images for responsive designs

Question

I'm retrofitting an adaptive layout to an existing site. Basically at 500px the site changes to a 100% width mobile style layout. Normally I'd use ems, but as I say, I'm retrofitting.

I know how to load js and css conditionally, but how about html and images?

On the homepage of the site there is a large image that fills the screen, I don't need it on my small screen layout, so I want it to load in if the browser is wider than 500px. Trouble is I can't store the <img src="..." /> etc in js because it's dynamically loaded with php. The client controls the images through wordpress admin.

Any thoughts would be appreciated. Thanks

Answer 1

I would suggest, if you can, to use divs and set the background-image property to the image you need. You can target the screen size using media queries. Basically...

HTML
<div id="splash-image"></div>

CSS
#splash-image {
    background-image: url("small-image.png");
}

@media only screen and (min-width: 500px) {
    #splash-image {
        background-image: url("big-image.png");
    }
}

Answer 2

This will work for one or two things. For site-wide image loading preferences, there are other solutions.

See this codepen for an example. I have checked it in dev tools to be sure that the large image doesn't load.

So, you find the window-width with .width() and store that in variable called (whatever you want) I called it wWidth. Then an if statement. if the window-width is larger than 1200px (It sucks you can't use em) --- THEN, load this image - otherwise, load this smaller image. To get it into the DOM, you append the html to an existing div with .appendTo()

$(function () {
    var wWidth = $(window).width();
    if (wWidth > 1200) {
        $('<img alt="larger image" src="http://placehold.it/1200/1200"/>').appendTo('.sidebar');
        $('.sidebar a').hide();

    } else {
        $('<img alt="smaller image" src="http://placehold.it/600/600" />').appendTo('.sidebar');
    }
});

This example was for a map... so If they wanted to load the google map, I had a link there they could press to load the nicer map. (but then, if the the window was large, I wouldn't need that link - so I hid it with .hide()

EDIT 04/2014

As of April 2014, I've been switching the src with attr() so this way, you just have your image for mobile, and then if it's a big screen you can insert the larger image's source... but then you load 2 images... so you could instead, load a 1px x 1px blank gif or something to start... and give it a width and height near the ratio you are going for...

a new CodePen here:

HTML

<div class='image-w thing' id='target01'>
  <!-- standard image for small screens or a blank gif or something -->
  <img src='http://placehold.it/640x640&text=Default-image' alt='' />
</div>

jQuery

var imageSizeThing = function() {

  var windowWidth = $(window).width();

  if ( windowWidth < 501 ) {

    // if you start with a blank gif or something
    $('#target01 img').attr('src','http://placehold.it/640x640&text=Default-image');

  } if ( windowWidth > 500 ) {

    $('#target01 img').attr('src','http://placehold.it/1000x1000');

  } if ( windowWidth > 900 ) {

    $('#target01 img').attr('src','http://placehold.it/1800x1800');

  } if ( windowWidth > 1200 ) {

    $('#target01 img').attr('src','http://placehold.it/2400x2400');

  }

};

// call it on DOM ready, and if it makes sense, when the window resizes
$(document).ready(imageSizeThing);

$(window).resize(imageSizeThing); 

Answer 3

You can set the display of the image based on media query(but it will load anyways)

@media screen and ( min-width: 500px ) {
    #image-id {
        display: block;
    }
}

Or, to not allow the image to load at all for smaller screens, you can wrap the image inside a div(say, with id img-container) and do the following:

if(screen.width>500){
    document.getElementById('img-container').innerHTML = "<img src='image_source_url' />";
}