Version 2

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.


View a demonstration of RI2 in action. Resize your browser to see new images loaded as different breakpoints fire.

View the Demo




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:

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:

4) Call the RI2.init() function on your HTML page.


From here your images should automatically load based on the breakpoints you defined. Congratulations on being responsible!