Load Images Based On Screen Size

September 29, 2022 Post a Comment

I have the following HTML code which displays an image:

What I am tryi

Solution 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.

Solution 2:

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

Solution 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" />

Solution 4:

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

Solution 5:

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";
    }
};

Html5 Tips