The same img in two sizes in the html

Question

I have an img for a large screen and another for small screens.This is an easy option and if works but I am not sure if there it is a good practice to put the same img in different sizes in the html and hide one with display none? is there any other problem with that option?

CSS:

#small {
    display:none;
}

@media screen and (max-width: 630px) { 
#big { display:none; }
#small { display:block; }
}

HTML:

<img id="big" src="img/1-big.jpg">
<img id="small" src="img/1-small.jpg">

Depending upon your browser compatibility requirements, the picture element could be what you need: https://developer.mozilla.org/en/docs/Web/HTML/Element/picture — LDJ, Mar 23 '16 at 15:26
possible duplicate: http://stackoverflow.com/q/32161026/3597276 — Michael Benjamin, Mar 23 '16 at 15:29

JP. Aulet · Answer 1 · 2016-03-23T15:56:23.550

3

IMUO I think this is not a good practice, because you are loading all the images twice (and hidden then). If you are using bootstrap (or responsive page) you could use the class img-responsive or this:

img {
    width: 100%;
    height: auto;
}

Or if not, you could do this:

/* For width smaller than 400px: */
body {
    background-image: url('1-big.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('1-small.jpg');
    }
}

Doing that way, you only load the image when needed and avoid load twice the images. Another example as background image: https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

edited Mar 23 '16 at 15:56

answered Mar 23 '16 at 15:27

JP. Aulet

4,117
3
21
34

1

I like that code more. But I have read that background img should be for decoration purposes only. If the img is meaningful it should be in the html and with a description in the alt attribute. – segon Mar 23 '16 at 15:38
That's true. But I would recomend (again) the `img-responsive` like style. You load a image once, and it get responsive in all sizes of the browser gently (not only on the breaking points). If you have responsive page, its the best option. – JP. Aulet Mar 23 '16 at 15:54

score 1 · Accepted Answer · edited May 23 '17 at 11:59

I don't see anything wrong with this. In fact, it is a recognised technique to reduce page load times and to keep page sizes down on mobile (providing, of course, that you only load whichever image is required for your device size).

Also note, as the only potential pitfall I can see with this, is that that simply setting the CSS property to display: none does not always prevent an image from loading (see here: Does "display:none" prevent an image from loading?)

An alternative to this would be to have images stored with the same name and a small or no suffix (for larger images) added to them (almost like you have in your example), except only have 1 html element on the screen at any one time and modify the paths using javascript. Example;

// HTML ELEMENT
<img class='thumbnail' src='img/thumb.png'>

// JAVASCRIPT
if(window.innerWidth < 640){
  // This is for users with smaller screens, load the smaller image
  var imgs = document.getElementsByTagName('img');

  for(var i = 0; i < imgs.length; i++){
    var current = imgs[i].getAttribute('src');
    imgs[i].setAttribute('src', current + '-small.png');

    // THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png' 
    // AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT
  }
}

The same img in two sizes in the html

2 Answers2