On high resolution screens of: mobile, tablet and monitors – images can look blurred ruining the whole visual impact of the layout. Concept of retina image implementation has been there for sometime now. Basically you display image that is double (2x) the size of image area within the layout.
Retina [CSS] solution for Beaver Builder Photo module
1. Add the following CSS code in your style.css file or on a specific page while in the Beaver Builder mode (Tools > Layout CSS).
2. Add Photo module from “Basic Modules” section to your Beaver layout. Upload photo double the size that you want to display. For example, for 300 X 300 photo display, upload image of size 600 X 600 dimensions.
3. Click on “Advanced Settings” tab and retina-image class.
Using above method you can selectively make few images look crisp on the retina / high resolution screens. This is ideal for logo images, call to action photos and so on.
More: Retina queries & SVG support
1. Retina Display Media Query – You can fine tune your CSS method by better understanding of media queries break points for retina display screens.
2. Using SVG in WordPress – SVGs are fully scale-able and hence look crisp on retina displays. You can also explore this method for retina implementation.