ThemeKit Responsive

Responsive Images

ThemeKit Responsive Image Row 1

Hover Effects

The overlay can slide in on hover on computers and laptops using 15 different animation types from a custom stylesheet.

Home
ThemeKit Responsive Image Row 2

Overlay

The overlay uses the HTML5 <figcaption> for superior SEO.
It has a heading, text and an optional link.

Text
ThemeKit Responsive Image Row 3

Breakpoint

On screen widths below the breakpoint the text appears below the image.

Content

Image Row

The row can be set up with two, three or four columns. When three items are present the last one is centered in row 2 below the breakpoint.
Images
The images have an alt text attribute and there is a checkbox to turn on the lazy loading function if the item is not in vie wat page load.
Overlay
When viewed on computers the overlay animates in on hover. It has a heading, text and an optional link with chevron option.
The 15 animation types are created using a custom stylesheet
On mobile devices the info appears below the image.

Website Images

Images are usually the main cause of a web page having a slow download time. Images should be resized and optimised JPGs. Avoid using PNG images and icons and don't insert an extra image@2x (retina) image.
Image Size
The image file should be reduced to the maximum width that the image will appear at in the browser. Use Preview.app to resize images - single or batches.
Lazy Load
On responsive web pages, lazy loading the images should be used to allow the content to appear in the browser faster and reduce the time it takes for the content to become interactive.
Optimising
Optimising image files before impotring into EverWeb can reduce the file size by 10 to 20% and uup to 50% for PNGs.
Follow the link below to get a free app for optimising images - single or in batches.

ImageOptim
ThemeKit Responsive Image
No Link
ThemeKit Responsive Image 2
Image Link

Responsive Images

The widget can insert either one content width image with a smaller version for mobile devices or two images side by side above the breakpoint.
Captions
The captions overlay the center of the image at the bottom and can appear on hover when viewed on computers and laptops.
Linkss
Images can be configured as a link on an individual basis. When the link option is selected the icon appears at the top right to let visitors using touch devices that the image is a link.