Better Preview Experience! WebP Cloud Supports Metadata Requests with Blurhash

In the previous article, “Still manually generating smaller images for different resolution devices? WebP Cloud Services has launched the Adaptive Resize feature,” we introduced a new feature called Adaptive Resize. This feature allows WebP Cloud to identify the visitor’s device and automatically output images in different sizes (e.g., outputting an image with a maximum width of 900px for mobile devices) after configuration in the Dashboard. This helps to speed up loading times and reduce data consumption on the device.

However, even smaller images still face loading speed issues (a physical limit), and since WebP images do not support Baseline/Progressive Loading (unlike JPG, which does—hence, when viewing images on certain websites, some JPG images load from top to bottom gradually rather than appearing suddenly from a blank state), there is still room for optimization.

To summarize the above issues:

1. We need to provide a better user experience before the image fully loads (e.g., blurred thumbnails, reducing initial load bytes).
2. We need to maintain the page structure before the image loads (e.g., Skeleton screens to prevent CLS (Cumulative Layout Shift)).

To further optimize these two issues, we have added a new capability to WebP Cloud—Metadata. By appending ?meta=full to the image URL, you can obtain some information about the original image. Let’s take the following image as an example:

Image source: “Go 1.21 GA’s PGO Optimization That Can’t Be Understood from a Single Article - An Attempt on a WebP Server Go”

The original image is: https://blog.webp.se/go-121-pgo/base.png, a 46KB PNG image. When displayed on our blog, the image URL is: https://p2k7zwb.webp.ee/go-121-pgo/base.png, which becomes a 38KB AVIF image.

By appending ?meta=full to the URL, visiting https://p2k7zwb.webp.ee/go-121-pgo/base.png?meta=full returns a JSON response with the following information:

{
  "width": 640,
  "height": 480,
  "format": "png",
  "size": 46056,
  "num_pages": 1,
  "colorspace": "sRGB",
  "blurhash": "LwRn[?%ztlx]uPrqVsV[%xaLRma|"
}

The width and height information can help applications know the image dimensions in advance and layout correctly. num_pages indicates how many frames the image has (for GIFs, num_pages is greater than 1), and blurhash can help applications quickly create a blurred thumbnail.

Blurhash

Website: https://blurha.sh/

In short, BlurHash takes an image and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service and store the string along with the image. When you send data to your client, you send both the URL to the image and the BlurHash string. Your client then takes the string and decodes it into an image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.

Since the Blurhash algorithm is simple, there are many open-source implementations. Once the application retrieves the Blurhash via ?meta=full, it can quickly display a blurred thumbnail on the front end. For example, using the Blurhash LwRn[?%ztlx]uPrqVsV[%xaLRma| from the above example, the preview looks like this:

Source: https://blurha.sh, the website provides a place to input a Blurhash string and generate a preview image.

With the Metadata interface that includes Blurhash, we believe you can further leverage the platform features of WebP Cloud to provide your visitors with a better preview experience.