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.