While we are waiting on a solution to the responsive images problem (current proposal), we still have to take care of the issue in our websites.
This may sound difficult, but in reality, thanks to the work of Scott Jehl, we can emulate responsive images with a simple to use polyfill today. Many other solutions have been created to solve this problem, but I recommend picturefill at the current time because it is similar in syntax to what is currently being proposed and very simple for a novice to install.
First thing is to grab a copy of the picturefill project from GitHub.
$ git clone https://github.com/scottjehl/picturefill.git
This will create a copy of the GitHub repo on your local machine.
Next you need to assemble the images that you will need. You can have as many as you want based on the breakpoints you need. Personally I like to work with a small, medium and large version of my files, but again, do what works best for your environment.
Add the HTML
<pre> <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div> </pre>
You do have other options. Take a look at the documentation for more.