Rimg

A responsive image solution for browsers that support mediaqueries. Pure javascript and no server-side code.

Download .zip Download .tar.gz View on GitHub

RIMG

"Responsive-image" (RIMG) supports responsive websites to provide a way to optimize images (like CMS-content) in a simple and performant way. Pure Javascript, no server-side code and 2 lines of code (library + definition). The source of this page shows how the image is being changed by pure Javascript.

Features

  • responsive images that respond to retina-screens, browser-resizes, DOMContentLoaded-events and DOM-changes
  • lazy loading of images: scroll down and Rimg will load the almost visible images (offset option).
  • reconfigure after Rimg is loaded/executed by using Rimg.configure({breakpoint:'',...});
  • disable auto introspection, so only manually adjustable by using Rimg.configure(breakpoints); and Rimg.execute(targetElement);
  • only <img> elements with data-src property will be adjusted by Rimg, so implement on one, some or all images.
  • pure frontend ( javascript ) solution and no server-side setup/code is necessary.
  • art direction support, respect the chosen filenaming strategy and alter your <img> in any way (square?) and save the file (square?) used in that breakpoint and everything works!
  • independent library, it is NO plugin for jQuery, you don't need to load any other javascript library.

More information

  • Getting started - how to implement on your website
  • API - how to use the library
  • Breakpoints - more information about the difference with the srcset specification
  • Dependencies - HTML5 / CSS and a clear filenaming strategy
  • Examples - all the options can be tested locally or seen for more code input
  • Changelog - all versions
  • FAQ - some questions answered, if you miss an answer let me know.

Supports: IE8+, Chrome, Safari and Firefox.

An interactive example

Not only on initial load or resizes will RIMG update your images, but also when they are added through code (DOM-append). For example click here to add images below through Javascript.