Image Set
One of the problems with fully responsive pages which are going to be viewed on various devices from computers with large screens right down to mobile phones is the size of the image file. It should be obvious that an image that is 1000px in width is going to be far too large to download to an iPhone over a cellular phone network.
The widget overcomes this problem by using the HTML5 <picture> element to make two images available - one for computers and laptops and the other for tablets and phones.
Images
The images used in this demo are 1200px and 800px wide respectively. The large image should be cropped to the same width as the maximum width setting before importing into EverWeb. If the smaller one has a width of about 800px, it will give good quality on tablets and retina quality on phones.
Links & Styles
The image can be configured as a hyperlink to open an internal or an external page and in a new window if required.
It can have padding added and there is a separate control for bottom padding. The background exposed by adding padding has controls for background color and opacity.
The image can have a border and there are controls for border width, color and radius.
A box shadow can be added by checking a box to reduce the overall width and adding vertical spacing which should be at least equal to the shadow radius.
