Srcery

Responsive images done right

Ever want to have multiple resolutions of one image on a webpage?

This image loading plugin makes it easy to create HTML images that are responsive, lazy loading, so you can use images that look great at any size or resolution while reducing load time and saving bandwidth.

Features

• Responsive image loading using HTML5 srcset attribute. This allows listing several different versions of an image, then loading one automatically based on the browser's current width.
• Lazy loading - Images are not loaded until they are scrolled into view, to efficiently save bandwidth
• Eager loading - To reduce delay from lazy loading, this plugin "looks ahead" and loads images right before they enter view.
• Supports retina displays - target browser sizes are adjusted automatically to support high resolution displays
• Images are updated automatically on orientation change and while scrolling
• Supports regular HTML image tags
• No dependencies - just one small Javascript file implements features in all browsers

Minified Code (878 bytes gzipped)

Examples:

simple image (nothing special)

lazy load image

large image, or small image

HD image, that scales down

HD image, lazy loading, with fallback for no JavaScript

<noscript><img src='images/800x400.gif'></noscript>

To use Srcery

1. Start with regular HTML image tags
2. Add a srcset, like in the examples above
3. Then add one tiny script before the end body tag, like this

back top ⬆︎