Load images based on screen size

Question

I have the following HTML code which displays an image:

     

        
                      

              相关标签:
       
      

Answer 1

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 2

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 3

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 4

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 5

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 6

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.