The Filament Group has created a technique to send an appropriately-sized image based on screen resolution. The goal is to deliver the optimized images in responsive layouts.

With the responsive images, developers can start with mobile-optimized images in their HTML and specify a larger size for users who are using larger screen resolutions that don’t request both image sizes.

How does this work?

When the rwd-images.js loads, the responsive images test the screen width. If in case it’s large, it inserts BASE element in the head of the page, directing all image, script and stylesheet requests through “/rwd-router/”. As the requests go to the server, the .htaccess file determines whether the request is a responsive image or not. Responsive images redirect to their full size and non-responsive requests go to their proper destination through a URL rewrite that ignores the “/rwd-router/”.

Its supported browsers are Safari, Chrome, IE (8+), Opera, Firefox 4.

Incoming search terms for the article:

• Filament groups Responsive Images JS
• responsive images
• bootstrap rwd images
• rwd-images js
• rwd-router bootstrap