The same img in two sizes in the html - 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">

Answer 1

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/

Answer 2

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