💡 Ability to transform image (e.g from jpg/png to webp/avif)

[fluid-design-io]

I love the concept of the no DB CMS. And one thing I'd like to have is the ability to "post-process" images that were uploaded via fields.image(). Most modern browsers are now supporting webp and avif formats, they have some advantages over jpgs and pngs. But most of the image editors or apps don't offer a direct webp/avif export (e.g Figma).

So here're my thoughts:

1. Add an API to Keystatic to automatic transform image files
2. Provide a function with the file as the arg and then returns the new file

One simple way is to use sharp package and it's quite easy to implement:

import sharp from "sharp"
// Convert the image to WebP and save it
    await sharp(originalPath)
      .webp({ quality: 100 })
      .toFile(newFilePath);

Here's how they might look like in Keystatic config:

schema: {
  image: fields.image({
    label: 'Cover Image',
    validation: {
      isRequired: true,
    },
    // New feature: image processing
    processImage: {
      // Specify the transformation action
      action: 'convert',
      // Specify the output format and options
      outputFormat: {
        type: 'webp',
        options: {
          quality: 100
        }
      },
      // Optionally, define a function for custom processing
      customProcessing: (file) => {
      // user import sharp or other image processing libs
        return sharp(file)
          .webp({ quality: 100 })
          .toBuffer();
      }
    }
  }),
  // ... other fields ...
}

What do you all think?

[simonswiss]

Not necessarily what you're asking for, but we've built Keystatic Cloud Images, a service that lets you upload images in a library, and gives you an URL to display the optimised image (converted to the best format based on the browser making the request).

You can also pass query parameters for the width, height, quality and format (cropping).

[fluid-design-io]

Thanks for the response Simon! I loved the concept of resolveInput hook in Keystone.js, where I can perform additional operations to the current data. So I was thinking if keystatic can have such functionalities to update or transform data before it is written to the file system.