Responsive images means images that can be scaled to fit the content blocks they are displayed in. One core concept of responsive web design is that content blocks can be resized to fit the width of the browser window. While some HTML is naturally scalable, images typically have a fixed width and height and thus represents a challenge to a scalable layout. In this post i have collected 15 Javascript libraries that will help you gracefully handle images when building a responsive website.

Picturefill

Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!

Imager.js

Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News.

FocusPoint

FocusPoint makes sure your image looks great in any container, by ensuring the ‘spare’ parts of your image (negative space) are cropped out before the important parts.

Dense.js

Dense is a jQuery plugin that offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website. Clear the blurry, images be crisp.

Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

Slimmage

Your wait for a sane, easily managed path to responsive images has now ended.

Responsive-content

Responsive Content is a coarse-grained content loader, designed to pull an entire block of HTML into the “content” area of a page. The idea is to have “header” and “footer” HTML areas that are common across all devices (styled appropriately using CSS media queries), and to dynamically replace the “content” area of the page with HTML tailored to the requesting-device’s width or capabilities.

Breakpoint

Breakpoint is a column based media query generator and responsive image framework.

imgLiquid

A jQuery Plugin to resize images to fit in a container.

RWD Image Maps

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize

retina.js

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays

lazysizes

High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Rimg

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

Riloadr

A cross-browser framework-independent responsive images loader written in Javascript.

HiSRC

The simple jQuery plugin for adaptive images in responsive web design.