EverWeb Widgets

PhotoKit

Responsive Images

EverWeb users who have attempted to create responsive sites have probably realised bt now that none of the default EverWeb features and widgets - and a large proportion of the thirf party widget - sre suitable for insertig images, galleries and slideshows. An image with a file width of 1200px - or a hero image a lot wider -are far to big for downloadimg on a mobile phone. Bot only will it take a long tome to download but it will also eat up the visitor's data allowance.
Mobile Devices
Even mobile users expect a page to download in less than 2 seconds, Any longer and the majority of them will leave the site.
Since mobile device users account for over 60% of the potential visitors it is essential to find a better way to insert images.
Tools
Fortunately there are a few methods of catering for mobile device users such as lazy loading and dowmloading a smaller image for mobile devices like the iPad and iPhone.
For those interesting in cutting their image file download size by half the WebP page will show how to implement the future now!
PhotoKit
The PhotoKit widgets provide the professional web designer with the means to insert images in responsive pages efficiently and without compromising page download time.

Preparing Images

All the images used in a website should be resized before importing into EverWeb. There is no point in using an image with a 2000px width and a huge file file size if it going to be displayed at 800px wide on the page.
* Oversized images are the main reason why web pages don't download fast enough.
Images
Images to be displayed in a lightbox slideshow only need to be about 1200px wide and certainly no more than 1600px. For responsive pages that will be displayed on mobile phones, smaller is better.
* Make sure the image file names have no spaces or special characters in them. *
Thumbnail Images
Obviously it is far better to create separate thumbnail images. The only exception is the Auto Gallery where the thumbnails are created in a separate folder on the server.
It is possible to load the full size images in the widget's Assets List for use as thumbnails and then reselect each one again as the large image. This should only be done by really lazy people where the full size images have been optimised and the total number of images is kept to 12 or less.
Resizing Images
The full size images should be assembled in a Finder folder and checked to make sure the file names have no spaces or special charactrs in them. They can then be batch resized in Preview.app to the required maximum width.
Resizing Thumbnails
Create a new folder for the thumbnail images, select all the large images (command + a), copy them (command + c) and then paste them (command +v) into the new folder.
Now they can be resized all at once use Preview.app …
Select all the images (command + a)
Double click them to open them all together in Preview
Select all the images in the Preview window (command + a)
Select "Adjust Size …" from the Tools drop down menu
Make sure the unit dropdown selector is set to "pixels"
Enter the required grid row height into the "Height" box
Click "OK"
Save the resized image (command + s)
Now select all the images in the thumbnails folder and drag then onto the Assets List in the gallery widget settings panel to load then all at once.
Rearranged the images by holding down the mouse on an image file name and drag it up or down the list to its new position.