Responsive Images
Website images, slideshows, galleries and video players are the main cause of responsive web pages having a poor download performance in the browser.
Images for a responsive website must be properly sized and optimised. Full or content width images need to have a smaller image file to load on mobile devices.
The ThemeKit Expo Image Insert widget inserts the image in two or three sizes. The third option is for an image with a square or portrait aspect ratio for a better user experiemce on phones in portrait mode.
The image can have padding to simulate the mat and the option for a border to define its edges.
Caption
The caption appears below the image and can run to two or more lines. It has controls to add a text shadow to thicken up the Google hosted font.
Artist Name
The artist name can be inserted at the bottom right and has controls for adjusting its position.
It can use a different Google hosted font from the caption - in this case Marck Script.
The caption font size is expressed in viewport units so that it responds to changes in the browser/device window width.
Container
The container is shown here with a 20px wide border to simulate a frame and the optional bottom box shadow to "lift" it off the canvas.
Image Link
The image can be configured as internal or external links. When the link option is used the icon appears at the top right and can appear on hover on computers.
Wrapper
The wrapper can have a solid color or two color gradient background. It has controls for top, horizontal and bottom spacing. The extra bottom spacing is required for the box shadow.
Lazy Loading
If the image is not in the viewport on page load the lazy load function should be turned on to improve the page's download performance in the browser.
