Fully responsive block outputting a single image in varying resolutions according to actual screen size and pixel density. This can significantly improve your website performance before all on phones and tablets. On a smaller device only smaller image is downloaded, on large device the large one and on retina display the double sized so it always remains crisp clear. 

Functionality

Based on <picture> element with backwards compatibility ensured by Scott Jehls Picturefill. Each block uses different source images for 3 different layouts + a retina alternative for each of them. The source image is changing on the fly during resizing of the browser or when moving it to a retina display. 

Setup

Just select a large image from your File Manager and that's it. Every other necessary resolution gets generated automatically.

Additional features

Easily customisable width, alt text and linking to other page or external URL. For more advanced developers there's an option to manually specify each picture source and adjust breakpoints in which they change.