Image Resizing Media Queries

Hello, I’m just now joining the party for mobilizing websites … I’m late to the party I know!

I’m now familiar with how to apply styles based on the max and min width of the user’s screen:

[CODE]
@media screen and (min-width: 400px) and (max-width: 700px) { … }
[/CODE]

Let’s say I want to thin view something like this:

[CODE]
@media screen and (min-width: 960px){
#wrap {width: 960px; margin: 0 auto;}
}
@media screen and (max-width: 320px) {
#wrap {width: 100%;}
}
[/CODE]

I believe that would give me nice 960 layout for large screens, the it will fit the screen if the max width becomes under 320px. Now I want to get to my question ?. Let’s say I have a large image like this:

[CODE]
<div id=”wrap”>
<img src=”image.jpg” alt=”Image” width=”940″ height=”600″ />
</div>
[/CODE]

In my 960 layout, I wouldn’t need to do anything. In my smaller layout, would I modify the CSS to something like this?

[CODE]
@media screen and (max-width: 320px) {
#wrap {width: 100%;}
img {width: 100%;}
}
[/CODE]

This would make the image 100% of the viewport, which would be perfect (around 320px). Is this the best practice? I was always under the assumption that images should not be resized with CSS, you should create new images instead. If that’s the case, I would need to use javascript right? Something like this in jQuery?

[CODE]
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 320){
$(‘img’).attr(‘src’, ‘image-small.jpg’).removeAttr(‘height’).removeAttr(‘width’);
}
});
[/CODE]

Basically replacing the image url with the path to the small one, and removing the height and width (because we’re using the CSS to set it to 100% wide.

Which is the route to go? Maybe even a different route? I’m looking for the best practice. Here are some examples of sites doing what I want:

[url]http://mediaqueri.es/[/url]

Thanks for any comments!

Also in #CSS _↴