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 (background) images that respond to retina -screens, browser-resizes , DOMContentLoaded-events and DOM-changes

-screens, , and lazy loading of images: scroll down and Rimg will load the almost visible images (offset option).

of images: scroll down and Rimg will load the almost visible images (offset option). pure frontend ( javascript ) solution and no server-side setup/code is necessary.

) solution and no server-side setup/code is necessary. independent library, it is NO plugin for jQuery, you don't need to load any other javascript library.

plugin for jQuery, you don't need to load any other javascript library. no user agent sniffing and no cookies , just JS reacting on the environment it is executed in.

and , just JS reacting on the environment it is executed in. reconfigure after Rimg is loaded/executed by using Rimg.configure({breakpoint:'',...});

after Rimg is loaded/executed by using Rimg.configure({breakpoint:'',...}); art direction support , respect the chosen filenaming strategy and alter your <img> in any way (square?) and save the file used in that breakpoint and everything works!

, respect the chosen filenaming strategy and alter your <img> in any way (square?) and save the file used in that breakpoint and everything works! small package with 6,0 kB (gzip) or 8,8 kB (plain)

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.