2x (Retina) Image

This module is exactly like the built-in Beaver Builder “Photo” module, except that it also allows you to specify a “2x” version of your image to use on high-density displays (e.g., Retina displays). This helps keep your images crisp and clean on such devices, while avoiding unnecessarily large image files on all others.

Screenshot:

image-2x

Technical Details

This module uses the HTML5 ‘srcset’ attribute, which is generally the best way to handle responsive/2x images. Any browsers that do not support srcset (typically older browsers and IE) will display the regular (1x) image as a fallback.

There are polyfills available that will enable unsupported browsers to use srcset, if you feel so inclined. However, since the feature degrades gracefully (and browser support for srcset is actually already pretty good), such a polyfill has not been included with this module (to keep it light).

Dependencies

Installation

Installing Beaver Brewer modules is easy! If this is your first time, check out the Beaver Brewer Module Installation Guide for instructions.