Technicalities aside, WebP has lots of benefits to give you. This relatively new image format is sure to become commonplace online, within the next couple of years. Now is the perfect time to embrace WebP and start adding it to your websites. Especially if you are keen to reduce page loading times, while at the same time continuing to display images at their absolute, best possible quality.

Our WebP stack makes it easy to add WebP images as resources or warehoused images in Stacks. Within the stack settings, you can provide an image ALT attribute, an optional tooltip title and an optional link. Then for the older web browsers that do not currently support WebP, you can specify a traditional JPG, PNG or GIF image to use instead.

There are a number of different applications that can generate WebP images, including both high-end graphic design applications and free apps like WebPonize. You can check which web browsers support WebP today on the caniuse.com website we've spoken about before.

Example

The image shown below displays as a WebP image in newer web browsers, and seamlessly swaps back to an ordinary JPG image in older web browsers lacking WebP support. Two variants of the image are available; a standard resolution image and an image optimised for retina displays. The name of the image is shown at the bottom left. It is worth testing this example in a couple of different web browsers, like Safari, Chrome and Firefox.
 
The WebPStack makes it easy to add WebP images to your RapidWeaver website.
 
Image file sizes in the above example:
  • JPEG, Standard Resolution, 381 KB
  • JPEG, Retina x2 Resolution, 942 KB
  • WebP, Standard Resolution, 193 KB
  • WebP Retina x2 Resolution, 477 KB
You can see from the above stats how WebP consistently has the smallest file size, versus the JPG formatted image. And yet the WebP image has a greater colour depth and sharpness when viewed on a calibrated monitor.

Setup

To use WebPStack stack, follow these instructions carefully...
  1. Download the .zip file of WebPStack using the link above. Uncompress the download on your computer. Drag and drop the Stacks4Stacks-WebPStack.stack file onto your RapidWeaver dock icon. Confirm you want to install WebPStack. Restart RapidWeaver.
  2. Open a project file in RapidWeaver or create a new one. Add a Stacks page type to your website if it does not already have one.
  3. Open your stacks library and search for the newly installed WebPStack.
  4. Drag and drop a copy of the WebPStack stack into your page.
  5. With the WebPStack stack selected in edit mode, open the Stacks side panel to access the settings for WebPStack.
  6. Specify the links to your WebP images. Then set the links to the JPG, PNG or GIF fallback images. You can use images added as resources in RapidWeaver or images you store online already in a publicly accessible location.
  7. You must provide an ALT attribute. The ALT or 'alternative text' is a short sentence describing what the image is about; used by assistive devices and search engines indexing your website pages.
  8. A tooltip title and enclosing link are optional. Only setup these if you need them.
  9. Preview your webpage to make sure the WebPStack is displaying either your WebP or fallback JPG / PNG / GIF image. Export or publish your website when done.

Like most of our stacks, all settings in WebPStack display informational tooltips, if you hover your mouse over them. These give you more details about what each setting does.

Image resolution and responsiveness

What is the difference between 1x and 2x images? 1x images are standard resolution images. The 2x images you have the option to use are what we would ordinarily class as retina-display optimised images. These images remain 72 dpi, but are double the width and height of your standard images. On high resolution screens, these retina-display optimised images will be used instead of the standard resolution images. Retina-display optimised images will give a sharper and higher quality appearance on high resolution screens. If you are publishing photographic material or artwork that demands the best possible image quality, it is well-worth creating standard and retina resolution copies of your images. Retina versions typically include the @2x flag between the file name and its extension (e.g. summer-flowers@2x.webp).

The WebPStack will scale images responsively all the time. This basically means the image will expand to its maximum width and its height will remain in proportion. On smaller screens (or if you put WebPStack in a small space, like a grid column) the image will reduce in size proportionately. The WebPStack is also compatible for use in theme ExtraContent containers and FreeStyle banners.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.