Overview
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.
Responsible Images 2 attempts to solve the responsive images problem by using a little JavaScript that does two things:
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.
Demo
View a demonstration of RI2 in action. Resize your browser to see new images loaded as different breakpoints fire.
Download
Instructions
1) Reference the "ResponsibleImages2.js" or "ResponsibleImages2-min.js" file near the bottom of your markup (within the <body> tag).
<script src="ResponsibleImages2-min.js"></script>
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.
For example:
<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:
lion.jpg
lion_640.jpg
lion_960.jpg
lion_1140.jpg
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!