EverWeb Widgets
Responsive Photo Album
Responsive Website Images
Images make up over 60% of the average web page content and are the leading cause of poor performance in the browser. Every image added to a page increases the page download time so the number of images and their file size needs to be kept low enough that the page will download in under 2 seconds.
Image Size
If an image is displayed with a maximum width of 1200px whn viewed on a computer, the image file needs to be imported at that width. If several images of that size are inserted , the page download time will siffere and the performance on mobile phones will be unacceptable.
Options
Using a lazy loading slideshow or an image grid gallery with separate thumbnails is a reasonable option when displaying up to a dozen images on a web page.
If more than about 12 images need to be displayed - or two or more sliders are being considered - then albums become the better option.
Image Albums
In this context, an album is taken to mean a lightbox image slideshow which is launched from a single thumbnail image. Since the thumbnail image has a small file size, several can be placed on the page without effecting download speed noticeably.
Since the large image files are not downloaded until the vistor opens the slideshow, an album is a much better otpion for web pages that will be viewed on mobile devices using wireless cell phone networks.
Albums can be used to display images for different products or services in a small space.
Album Features
The widget creates a container with an image, an optional heading and text. The image is floated left so that the text wraps around it when viewed on a computer or a tablet device. On mobile phones, the image becomes full width.
The image has a fixed width on computers and tablets and has an optional lightbox icon to indicate that it should be clicked or tapped.
The lightbox can have a single image or several which create a slideshow.
The slides have a caption and arrows for navigation. On touch devices, the arrows disappear and the visitor can then swipe through the images.
Captions
The image and its caption are inserted in an HTML5 figure element so that the search engines know that they are related.
The overlay caption has a background with adjustable opacity. It can be set to appear on page load or only on hover when viewed on computers. On touch devices, the caption appears on page load.
Container
All the elements are in an HTML5 section container which can have a border and/or a box shadow. When these are added, the percentage width is reduced slightly for a better appearance on mobile devices.
Lightbox Image
The Photo Album widget can also be used to display a single large image - rather than a slideshow - and is a better option than inserting several large images to display products.