Responsive design and image sizes

[teck@jonatec.com]

Q. What technique is the most efficient in terms of image load times and performance...?

Scenario 1.

Is it to load a different size image by using a media query, as below:

/* Smartphone */
@media screen and (max-width: 320px) {
.img-page-1-img {
background: url('../images/img-page-1-img-117.jpg') no-repeat;
width: 117px;
height: 77px;
}
}
/* Desktop */
@media only screen and (min-width: 769px) {
.img-page-1-img {
background: url('../images/img-page-1-img-234.jpg') no-repeat;
width: 234px;
height: 154px;
}
}

OR...

Scenario 2.

Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?

img {
max-width: 100%;
}


Thanks....