Load images based on screen size

Question

I have the following HTML code which displays an image:

<div>
     <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />
</div>

What I am trying to do is display a different image depending on the screen size. So first I hide the image with CSS:

#wm01 {
    display: none;
}

And then in my BODY, I add the following code:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
if (x<568) {
    //alert(x);
    document.getElementById("wm01").src="theImages/wm01_app.jpg";
    document.getElementById("wm01").style.display = "block";
}
else {
    document.getElementById("wm01").src="theImages/wm01.jpg";
    document.getElementById("wm01").style.display = "block";
}

The image is not showing in any size screen. How can I fix it?

Answer 1

No one has suggested using a <picture> element yet.

<picture> has the nice feature that you can specify different images for different window sizes.

For example:

<picture>
    <source srcset="some-bigger.png" media="(min-width: 500px)">
    <img src="some.png" alt="Some picture">
</picture>

For you it would be:

<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

Which says, use theImages/wm01_app.jpg whenever the device width is, at minimum, 568px . Otherwise use the default <img> source.

Answer 2

This is an interesting, ongoing, problem. There is no one right way but here are some options:

• http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/
• http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 3

I would suggest CSS media query first and then JavaScript if you need to support a browser that doesn't support media query. This example uses 850px as a maximum width before the image is changed.

CSS:

/* media query device layout transformation for 850px width trigger */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS/JQuery:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML:

<div id="wm01" alt="PP" title="PP" u="image" /><!--comment for legacy browser --></div>
<img id="wm01" alt="PP" title="PP" u="image" />

Answer 4

Other have suggested alternatives methods to solve the problem of multiple images, but with your proposed solution, the problem is you're trying to give an image the src before the DOM is ready. Make sure everything is loaded with window.onload, and it'll work. Change your code to:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;

// The onload:
window.onload = function(){
    if (x<568) {
        document.getElementById("wm01").src="theImages/wm01_app.jpg";
        document.getElementById("wm01").style.display = "block";
    }
    else {
        document.getElementById("wm01").src="theImages/wm01.jpg";
        document.getElementById("wm01").style.display = "block";
    }
};

Answer 5

Use a media query to shrink the image and show a background image.

Note: this method requires you know the size/proportions of the replacement image.

Fiddle

<img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}

Answer 6

I do same thing in my website using this code, and works perfect for me.

HTML

<figure class="picture"></figure>

JAVASCRIPT / JQUERY

$(document).ready(function(){
    var w = window.innerWidth;
    if(w <= 650){
      $(".picture").html("<img src='images-min.jpg'/>")
    }
    else if(w>650 && w<=1300){
      $(".picyure").html("<img src='images-med.jpg'/>")
    }
    else{
      $(".picture").html("<img src='images-big.jpg'/>")
    }
});

in this case I use three diferent size of images.

Answer 7

Why not use srcset and sizes attributes of the <img>

<img srcset="tiger-320w.jpg 320w,
             tiger-480w.jpg 480w,
             tiger-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="tiger-800w.jpg" alt="Bengal tiger">

For more reference go though Responsive_images

It supported by all major browsers