EverWeb PhotoKit

WebP Image Insert

Introduction To WebP Images

WebP is an image format developed and first released by Google in 2010. It supports encoding images in both lossless and lossy formats, making it a versatile format for any type of visual media, and a great alternative format to both PNG or JPEG. WebP's visual quality is often comparable to JPEG but the file is a fraction of the size.
The above image has been inserted as a 1200px wide JPEG along with an 800px wide JPEG for mobile devices for Safari which doesn't support the WebP format. A 1200px wide and an 800px wide WEBP have been inserted for all other browsers.
As you can see below, the WEBP file is about half the size of the equivalent JPEG. A substantial saving in download time and data usage for mobile users.
File Size Comparison
JPEG Image - 401KB
Mobile JPEG - 204KB
WebP - 212KB
Mobile WebP - 110KB
Browser
WebP is supported by Chrome, Firefox and IE Edge. At the time of writing it is not being supported by Safari but this is supposed to be in the works.
In the meantime, even if you don't care about Safari users, images must be inserted with a JPEG fallback because EverWeb doesn't display WebP images when viewed on the design canvas.
To compare image quality open this page in both Chrome and Safari. Chrome will display the WEBP file and Safari the JPEG.
File Conversion
XnConvert is a batch image processor which will convert images fro JPEG to WEBP. It is available for free download in the App Store.
Pixillion is a very quick and simple app to use and is available with the essentail features free for personal use.
Use the links below to download or click either of the images to get the apps.

XnConvert Pixillion

Widget Settings

The widget settings allow for a full size and a mobile version of both JPEG and WebP images with alt text and an optional caption.
The images are lazy loading and the caption can be either below the image or overlay the bottom.
The images are inserted in an HTML5 <figure> element for better search engine indexing and can have a border and/or a box shadow.
The wrapper has controls for the background color and opacity and for setting vertical and horizontal spacing.
Image Prep
The full size JPEG should be opened in Preview to reduce its size. Both files can then be dragged into the convertor app of choice and converted to WebP.
NOTE: EverWeb will place the WebP files in the External Files section of the Assets.
Caption
The caption can be inserted below the image or overlay it at the bottom. It can use a non web safe or Google hosted font with web safe fallback if required.
Link
The image can be configured as an internal or external link and there is an option to add an SVG link icon at the top right so that mobile device users wil know that it's a link.