Responsive images are a major implementation hurdle for responsive web design.
As a web developer and designer, you should not be serving large glass images to your small glass pages. On the flip side, your desktop users should not have to suffer with small, blurry, compressed images either.
This is my (second) solution to the responsive images problem.
Fires an event on page load that downloads the appropriately-sized images for your content
Monitors the window resize event and downloads new images when necessary (optional functionality)
RI2 tries to get out of the developer's way as much as possible. All configuration and breakpoints are set inline with IMG tags, giving you granular control of each image's breakpoints. The minified version weighs in at just 2KB with no library dependencies.
View a demonstration of RI2 in action. Resize your browser to see new images loaded as different breakpoints fire.
1) Reference the "ResponsibleImages2.js" or "ResponsibleImages2-min.js" file near the bottom of your markup (within the <body> tag).
2) For images you want to be responsible:
Set the SRC attribute to the mobile version of your image
Add a class of "ri"
Add an attribute called "data-breakpoints" and create a comma-separated list of breakpoints for that image.
<img src="images/lion.jpg" data-breakpoints="640,960,1140" class="ri" />
3) Place scaled/resized versions of your images in each appropriate folder, using the following format: FILENAME_SIZE.JPG. Example:
4) Call the RI2.init() function on your HTML page.
<script> RI2.init(); </script>
From here your images should automatically load based on the breakpoints you defined. Congratulations on being responsible!