EverWeb PhotoKit

PhotoKit Pin Image Grid

Pinterest Style Image Grid

The grid takes a bunch of images with varying aspect ratio and inserts them in a column grid. Since the image files used here are less than 40KB in size - and there is a lazy loading function - up to 480 images can be placed on a page without effecting the download time too much.
The images have alt text and options for a text block with heading, descriptive text and an optional CTA style link.
The grid item spacing can be adjusted as can the grid padding. The number of coluns can be set for each device type.
Shuffle
The grid on this page has the shuffle option turned on so that the order of the images will change every time the pge is reloaded.

Image [1]

Article Heading

This is the optional article with heading, text and optional link.

PhotoKit
Image [2]

HTML <picture>

This element allows use to insert different sizes of image files.

Picture Info
Image 3
Image [4]

Lazy Loading

If more than a few images are inserted the lazy loading option should be used.

Lazy Loading
Image[5]

Links

The links can open internal or external pages and in a new window if required

Link Info
WebP

WebP Format

The WebP image format has been around for 10 years and are only 50% of the size of an equivalent JPEG.

WebP
Download efficiency

Image Grid

The grid is created from pure CSS and doesn't required any external scripts to function.

Slide Scroller
Image Info

Alt Text

The images have an alt text attribute for inserting keywords for the search engines

Lazy Images
Image Info

Image Info

To be properly indexed by the search engines, images require text content to describe them.

Snap hero
HTML5 <figure>

HTML5 <figure>

The figure is used to insert images and a text description so that the search engines know that the text is related to the image.

Show More
HTML5 <article>

HTML5 <article>

The <article> is used fro insert and link.r the optional text content

Filter Gallery
Responsive Sliders

Responsive Sliders

Slideshows for responsive pages need to be specially design with lazy loading and alternative images sizes the most important function.

Pro Slider