I am looking to create a responsive website. It is my first serious attempt to create a responsive site.

I know that images can be resized with html or css, but what I want to know is it possible to replace images based on screen width with another image but with a smaller file size. The reason for this is I want to create a fast loading webpage for mobile. Using a image designed for a full screen application is much larger than one for the mobile.

I used to program all the time in the old html and css but I have stopped for about 3 years. The new HTML 5 and CSS 3 is a little foreign to me and I do not know it as well.

Doing a google search I found these references but they are dated more than 6-8 months ago and wince the web technology is always changing I am not sure if there is a better option out there yet.

if it's for a client to update this isn't the solution, but if you've got the time and the energy to make the multitude of images and use the picturefill.js this works a treat, tested on a stack of devices...