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
- lazy loading 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.
- independent library, it is NO 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.
- reconfigure 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!
- 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.