I have ideas for AVIF image support

I want to use AVIF on my XP-sites

What is AVIF?

AVIF is an image format that has much better compression then JPEG or WebP. I first learned about it from Jake Archibalds blog a few years ago.

It might make my images ~50% smaller (or more). And that will reduce the size of my webpages significantly. And make them perform much better.

It also has good enough browser support, that I think it’s about time to start using it.

No Java-support

There doesn’t seem to be any Java-support for AVIF, and that means no XP-support for it.

Workaround

Use an external transcoder, and cache the result in a repo.

Step-by-step walktrough of workaround

This is how I’m thinking to build it:

First I need to setup a transcoder service running on AWS Lambda or similar. It takes in an HTTP POST with an image, and similar parameters as portalLib.imageUrl(), and returns the transcoded image.

(Alternatively I could get a subscription to an existing service like cloudinary).

Then I create an XP-service that does the following:

  1. Use routerLib to be able to parse a url similar to the one that the image-service in XP creates
    1. It takes in the size and id of an image in XP
  2. Use nodeLib to check if I have a stored AVIF-version of that image with that size and return it
  3. If no image
    1. Start a Task that uses httpClientLib against the transcoder service to get an AVIF-image that can be stored as binary using nodeLib.
    2. Immediately return a redirect to a JPG-version of the image.

Questions

  1. Has anyone done anything similar?
  2. Or do you have an even better way to do this?
  3. Are you using something like cloudinary?
  4. Do you want to join in building an open source version of this?
2 Likes

Cloudflare can easily give your website webp support with their “polish” function (enable with a click):

Cloudflare also suppor Avif, but the process is more complex: https://blog.cloudflare.com/images-avif-blur-bundle/

NB! We are investigating bundling ImageMagick with XP, so XP can serve any format without without relying on 3rd party services.

4 Likes

Cloudinary has a similar functionality to Cloudflare Polish functionality, where you set up a path on their hostname to map to a path on your hostname. Images are served from their edge CDN after the first initial pull of the source image from your server. It also supports formats like WEBP and AVIF, serving the best possible format supported by the requesting browser, depending on the actual resulting size for each format:

2 Likes