Responsive images with javascript document.write

Question

I want to use a responsive image on my site, load a different resolution based on screen size, and have come up with a simple javascript approach, see below.

Would there be any reason why NOT to use this solution?

Thanks!

<script language="Javascript"> 
var w=window.innerWidth;

if (w<=480){
    document.write('<img src="files/design/logo_480.jpg" ');        
}else if(w<=768){
    document.write('<img src="files/design/logo_768.jpg" ');   
}else{
    document.write('<img src="files/design/logo_960.jpg" >');
}

</script>

score 1 · Answer 1 · edited Mar 02 '16 at 00:02

1

You can use the picture element that is browser built-in. See here: http://googlechrome.github.io/samples/picture-element/

More info here on htmlrocks

edited Mar 02 '16 at 00:02

Sevle

3,109
2
19
31

answered Mar 24 '15 at 09:34

namelivia

2,657
1
21
24

great! but currently only supported in chrome. http://caniuse.com/#search=picture – CodeBrauer Mar 24 '15 at 09:35

score 1 · Answer 2 · answered Mar 24 '15 at 13:01

Go with the standard and use picture or srcset with sizes (depends on your use case).

About browser support, there are two polyfills, which you can simply use:

There is really no excuse to use a partial custom solution.

Here is an article series.

phts · Answer 3 · 2015-03-24T09:52:16.707

I don't know you browser support specification but there is HTML5 approach: <picture> element. But there are few browsers that it support - http://caniuse.com/#feat=picture

UPDATE

Another approach - use CSS and @media rules. But here you will deal with background images instead of <img> elements that may not fit with semantics (When to use IMG vs. CSS background-image?):

@media screen and (max-width: 480px) {
    div.my-image {
        background-image: url(files/design/logo_480.jpg);
    }
}

@media screen and (max-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_768.jpg);
    }
}

@media screen and (min-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_960.jpg);
    }
}

Browser support - IE9+, Chrome 21+, FF 3.5+ (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

UPDATE #2

Another approach - instead of write content you can simply change src of existing <img>.

var w=window.innerWidth;
var img = document.getElementById("logo");

if (w<=480){
    img.src = "files/design/logo_480.jpg"
}else if(w<=768){
    img.src = "files/design/logo_768.jpg"
}else{
    img.src = "files/design/logo_960.jpg"
}

From what I understand, the tag is only partially supported, which means I need to create multi-browser solutions... — Job Kooi, Mar 24 '15 at 09:43
UPDATE #2 - works as multibrowser solution and plus it can be placed in a "resize browser" event handler to make the logo responsive — phts, Mar 24 '15 at 09:50

score 0 · Answer 4 · edited May 23 '17 at 12:30

Just take a look here why you should not use document.write https://stackoverflow.com/a/802943/2767886

You should NOT use this JS because:

you have to add a resize-event (if the window width changes you need to update the logo size)
on resize the new logo-url -> will be a new request to load
it's document.write ...
people that have javascript off won't see a logo

A pure CSS solution would be easier:

@media screen and (max-width: 480px) {
    .logo {
        background-image: url(files/design/logo_480.jpg);
        width: 480px; height: 75px;
    }
}

@media screen and (max-width: 768px) {
    .logo {
        background-image: url(files/design/logo_768.jpg);
        width: 768px; height: 100px;
    }
}

@media screen and (min-width: 768px) {
    .logo {
        background-image: url(files/design/logo_960.jpg);
        width: 960px; height: 150px;
    }
}

Thanks for your link to the why-not-use-DW article. I need to think a bit about the need for a resize-event. With this script I can serve an image for smaller resolution devices, and how likely is a resize on a large desktop screen? — Job Kooi, Mar 24 '15 at 09:48

Responsive images with javascript document.write

4 Answers4