Responsive Image Demos

Our core demos showcase some of the responsive image functionality possible when combining ReSRC with our JavaScript Library.

Note: Resizing an image will dynamically create a new optimized version. As our website has a fluid design try, changing your browser window width rotating your device to demonstrate the effect.

1. Preferred Approach

Deliver a perfectly sized and optimized image in a single request that you control, not the browser. For those serious about HTTP requests!

2. Preview Approach (aka: Mobile First)

Let the browser download a bandwidth-efficient preview image before replacing it with a perfectly sized and optimized version.

3. HiDPI (Retina) Support

Automatically deliver a perfect resolution image without the need to specify individual sizes. Our approach is completely future proof.

4. CSS Background Image Support

We are not limited to <img> tags to be responsive. We support any HTML element that a background image can be applied to via CSS.

5. Image Control & Effects

Control your images in real-time using the ReSRC Engine API. Resize, crop, zoom, flip, rotate or even apply basic effects.

6. Full Screen Images

Enhance your site's user experience with amazing high resolution full screen images that really show off your products and services.

ReSRC plays nice with lots of open-source projects. Below are a few of our favourites:

7. Modal Window

FancyBox offers an elegant way to view your images via popup modal windows.

View Demo
8. Responsive Slideshow

ResponsiveSlides is a tiny jQuery plugin that creates a responsive slideshow.

View Demo
9. Lazy Load Images

ReVIEW is an ultra lightweight plugin for loading elements once visible in the viewport.

View Demo
10. <Picture> Polyfill

Picturefill mimics the proposed <picture> element using divs for safety.

View Demo