Responsive Images

A robust solution for using responsive images on your website. Outputs images in resolution changing according to actual screen size and pixel density. This can significantly improve your website performance before all on smaller devices like smartphones or tablets. While on a smaller device only a smaller image is loaded, a large device loads a large one. And a retina display device loads a double sized image, so it always remains crisp clear. 

Functionality

Based on <picture> element with backwards compatibility ensured by aFarkas/respimage. Each picture uses different source image for 3 different layouts + a retina alternative for each of them. The source image is changing on the fly after each browser resize or device rotation. 

Setup

Just select a large image from your File Manager or a FileSet and that's it. No need to create separate images for each resolution in your graphic editor. Every necessary resolution gets generated automatically. 

For developers there's an option to fully customize all settings like media queries or image resolutions. They can also save these settings as presets for future use. This way you can manage your responsive images globally and change them all at once across the whole site. 

For editors there's an option to simply select a predefined preset option from a drop-down menu. They don't have to worry about the settings at all. 

 

ADD-ON INCLUDES:

Responsive Image Block

Fully responsive block outputting a single image in resolution according to actual screen size and pixel density. Easily customisable alt text and linking to other page or external URL. Each of the three layouts (small, medium, large) can display a different image.  

Responsive Featured Image Block

Same as the block above, but this time, you can define the source image/images in page attributes. Convenient on larger sites when you want to change more of these blocks at once - you can make it in your Dashboard Sitemap. No need to visit each page in edit mode separately. 

Responsive Image Set Block

Outputs all images from a fileset at once. You can define which fileset to use when adding/editing the block or in page properties. 

Presets Manager (Dashboard Pages)

Using the same settings in more blocks? Save them as preset in your Dashboard and you can apply them simply from a drop-down list. Presets are universal for all included blocks. The dashboard page is located at yourdomain/dashboard/responsive_images/search/.

Purchase

$50.00 Buy FiveSave 44%
Approved by PRB

Our 30 Day Support Policy

  • Replies to tickets once a week or so.

Support Hosted

  • On concrete5.org

Also Check Out