WebP Cloud Services now supports AVIF

Let’s talk about the recent direction of WebP Cloud Services - what is WebP Cloud all about?

WebP Cloud Services is a SaaS (Software-as-a-Service) version of our open-source component called WebP Server Go. With WebP Cloud, users can simply log in using their GitHub account and provide the URL of the original image. In return, they receive a new URL that serves the image in WebP format, with built-in WebP conversion, CDN (Content Delivery Network), and caching capabilities. For example, an image with a size of 100KB at https://blog.webp.se/hetzner-arm64/c1-board.png can be transformed into a WebP version with only 60KB in size, available at https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.png, while preserving the image quality with minimal degradation.

https://blog.webp.se/hetzner-arm64/c1-board.jpg	https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg
107.81 KB	64.52 KB

You can also use ?width= to gerneate thumbnail

https://blog.webp.se/hetzner-arm64/c1-board.jpg	https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg?width=200
107.81 KB	7.27 KB

In the above image, we can see that using the provided address, such as https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg, significantly reduces the file size of the rendered image while preserving almost imperceptible loss in image quality. All of this is achieved by converting the image to the WebP format, which is the origin of the name WebP Cloud Services.

WebP is an image format proposed by Google. According to its official website at https://developers.google.com/speed/webp, WebP is described as follows:

• WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
• WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM (Structural Similarity) quality index.

Since iOS 14 natively supports WebP, major web browsers have also adopted this format:

In our open-source component, WebP Server Go, we conducted benchmarks (https://docs.webp.sh/benchmark/) and observed that with 80% image quality, the size of the new WebP format images can be reduced to 40% of the original, which is impressive.

Considering that not everyone wants to deploy the WebP Server Go component themselves, especially users of static website frameworks like Hugo and Hexo who may not have their own running servers, we have introduced a convenient SaaS version called WebP Cloud to facilitate integration.

As seen from the above example, this service effectively reduces image file sizes and speeds up website access. Furthermore, we support dynamic WebP conversion, which means GIF images can be converted to WebP.

Information about the AVIF format can be found at https://web.dev/learn/images/avif/, and the official description states:

• As with WebP, AVIF aims to address every conceivable use case for raster images on the web: GIF-like animation, PNG-like transparency, and improved perceptual quality at file sizes smaller than JPEG or WebP.

From the above description, we can understand that AVIF has the potential to achieve better compression rates (smaller file sizes) than WebP. Additionally, according to https://caniuse.com/avif, major web browsers already support AVIF:

The WebP Server Go project started supporting AVIF conversion from version 0.4.0 ( https://github.com/webp-sh/webp_server_go/releases/tag/0.4.0 ). However, due to the resource-intensive and slow nature of AVIF conversion, the ENABLE_AVIF option in the WebP Server Go configuration file determines whether AVIF format images are outputted, and it is disabled by default.

In the WebP Cloud project, we initially only supported WebP format conversion, considering the potential impact on our system resources if we supported AVIF format images. However, as a service provider that respects and listens to user feedback, we pay attention to user demands. For example, in response to our post on V2EX ( https://www.v2ex.com/t/953132#reply4 ), users provided the following feedback:

• Great! I hope you add AVIF support, which would be like getting CDN provider’s WebP functionality for free.

Therefore, we have definitely decided to start supporting AVIF.

How will WebP Cloud support AVIF

Due to the significant impact on our system resources mentioned earlier in order to support AVIF format images, we needed to find a method that minimizes the impact on the system while still supporting AVIF format.

Currently, with our support for WebP, the lifecycle of a request in WebP Cloud Services is approximately as follows (using WebP Cloud Services Blog as an example):

• For the first request, such as https://p2k7zwb.webp.ee/gravatar-services/wp-gravatar.png, if the corresponding file is not present in WebP Cloud’s cache, a “cache miss” occurs, and the “original image” needs to be fetched from https://blog.webp.se/gravatar-services/wp-gravatar.png.
• While downloading the original image, the image is simultaneously converted to WebP format and the converted image is saved. If the WebP version has a smaller file size, the WebP format is returned to the requester; otherwise, the original image is returned.
• All subsequent requests to https://p2k7zwb.webp.ee/gravatar-services/wp-gravatar.png will be served from the cache without the need to fetch the image from the origin server. This means there is no traffic or bandwidth load on the origin server.

WebP image conversion is fast and has minimal impact on system resources, while AVIF is the opposite. To avoid synchronously returning the converted AVIF images, we have implemented an asynchronous processing approach with the following general logic:

• After the step of “simultaneously converting the image to WebP format, saving the converted image, and returning it to the requester,” there is a background task that asynchronously converts the image to AVIF format. The conversion process is completely sequential, meaning that only one conversion is being processed at a time.
• All completed AVIF format images are saved to a separate path. In subsequent requests, we check if the browser supports AVIF format. If it does and the AVIF format has a smaller file size compared to the WebP format, we serve the AVIF format image.

How do we determine browser support?

How do we determine browser support?

We can find out which browsers and versions support a specific image format from https://caniuse.com/avif. However, it’s not feasible to directly match all User Agents (UA) to determine browser support. Therefore, we use the following approach:

• To determine whether a regular browser supports a particular format, we rely on the browser’s Accept header. For example, a request from Chrome on Linux may have the following Accept header:
  • Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
  • UA: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
  • In this case, we can directly determine that the browser supports both AVIF and WebP. We then choose the output format with the smaller file size.
• The situation is slightly more challenging for browsers on iOS. For example, Chrome on iOS 16 sends the following request header:
  • Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  • UA: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/114.0.5735.124 Mobile/15E148 Safari/604.1
  • It is evident that the Accept header provides no information about the supported formats. In such cases, we rely on the UA to determine the user’s browser version, using the information provided by caniuse.com.

The corresponding code snippet is as follows:

func GuessSupportedFormat(header *fasthttp.RequestHeader) []string {
	var (
		supported = map[string]bool{
			"raw":  true,
			"webp": false,
			"avif": false,
		}

		ua     = string(header.Peek("user-agent"))
		accept = strings.ToLower(string(header.Peek("accept")))
	)

	if strings.Contains(accept, "image/webp") {
		supported["webp"] = true
	}
	if strings.Contains(accept, "image/avif") {
		supported["avif"] = true
	}

	// chrome on iOS will not send valid image accept header
	if strings.Contains(ua, "iPhone OS 14") || strings.Contains(ua, "CPU OS 14") ||
		strings.Contains(ua, "iPhone OS 15") || strings.Contains(ua, "CPU OS 15") ||
		strings.Contains(ua, "iPhone OS 16") || strings.Contains(ua, "CPU OS 16") ||
		strings.Contains(ua, "iPhone OS 17") || strings.Contains(ua, "CPU OS 17") ||
		strings.Contains(ua, "Android") || strings.Contains(ua, "Linux") {
		supported["webp"] = true
	}

	// iOS 16 supports AVIF
	if strings.Contains(ua, "iPhone OS 16") || strings.Contains(ua, "CPU OS 16") ||
		strings.Contains(ua, "iPhone OS 17") || strings.Contains(ua, "CPU OS 17") {
		supported["avif"] = true
	}

	// save true value's key to slice
	var accepted []string
	for k, v := range supported {
		if v {
			accepted = append(accepted, k)
		}
	}
	return accepted
}

We’re now supporting AVIF!

Starting from 2023-07-03 13:05 UTC, we have deployed the code related to AVIF. By that time, all of our users have automatically enabled this feature. For example, on the website of user https://strrl.dev/post/weekly-report/2022/45-devjoy/ , we can see:

Some requests have automatically outputted AVIF format images because the AVIF files are smaller, while for some images, the WebP format is smaller, so WebP format is outputted.

In the previous text, we mentioned that “AVIF conversion process is completely serial (i.e., only one conversion is in progress at a moment).” To give everyone a more intuitive sense of the resource impact of AVIF conversion, here we share the load of one of our servers during the conversion of existing images to AVIF after the new code was deployed:

From the image, we can see that the server’s load is relatively low during the normal reception/handling of requests, with CPU usage below 10%. However, once the AVIF image conversion starts, even if it’s done serially, the CPU is fully utilized for a period of time.

WebP Cloud Services is a small team of three people from Shanghai and Helsingborg. Since we are not funded and have no profit pressure, we will stick to what we believe is right, striving to do our best within the limits of our resources and capabilities. We will also undertake more activities without affecting the services we provide to the public and explore various novel features in our products.

We believe that all features should be open to all users. Therefore, once the AVIF feature is tested and deployed, it is already available to all users without any action required. Users can experience further reduction in image size and improvement in website loading speed.

By the way, we have recently optimized the Dashboard at https://dashboard.webp.se/ . As we respect our users and prioritize user control, the Dashboard now provides detailed statistics on proxies and complete request paths:

Unlike Cloudflare, which only provides a simple statistical chart for free users, the Pro version provides detailed statistics, including request paths even after sampling.

If you find this service interesting, feel free to log in to the WebP Cloud Dashboard to experience it. If you’re curious about its other amazing features, you can check out our documentation at WebP Cloud Services Docs. We hope you have a great time exploring!

References

1. https://en.wikipedia.org/wiki/AVIF
2. https://caniuse.com/webp
3. https://caniuse.com/avif
4. https://web.dev/learn/images/avif/