Improve flexibility when resizing images

[RamonMeffert]

Hi! Great project, I'm really enjoying it so far!

I'd like to propose some improvements to the image upload functionality.

File formats

Currently, all images are converted to jpeg with a quality of 80. This is fine, but it would be nice to have more control over this. I think adding png, webp and avif as options would be a nice start, as well as making it possible to set the quality setting.

Possible changes

Currently, image resizing is handled in packages/core/manifest/src/storage/services/storage.service.ts in the storeImage function based on the imagesSize: ImageSizesObject parameter. One possible way to start implementing this would be to add two parameters to the ImageSizesObject type:

export type ImageSizesObject = {
  [key: string]: {
    width?: number
    height?: number
+   quality?: number
+   format?: 'jpeg' | `png` | 'webp' | 'avif'
    fit?: 'contain' | 'cover' | 'fill' | 'inside' | 'outside'
  }
}

Then, in the storeImage function, this could be handled something like this:

let imagePipeline = sharp(image.buffer)

imagePipeline = switch (imageSizes[sizeName].format) {
  case 'jpeg': resizePipeline.jpeg({ quality: imageSizes[sizeName].quality })
  case 'png': resizePipeline.png({ quality: imageSizes[sizeName].quality })
  case 'webp': resizePipeline.webp({ quality: imageSizes[sizeName].quality })
  case 'avif': resizePipeline.avif({ quality: imageSizes[sizeName].quality })
}

const resizedImage: Buffer = await imagePipeline
  .resize(imageSizes[sizeName].width, imageSizes[sizeName].height, {
    fit: imageSizes[sizeName].fit
  })
  .toBuffer()

Additionally, you could also consider adding a lossless option to the quality parameter so the lossless options for webp and avif could be utilized.

Resizing

Currently, images are up- or downsampled depending on the image sizes requested. While there is certainly a use case for this behavior, sometimes it is preferable to not do upsizing. In other cases, it might be preferable to keep the image as-is, e.g. when providing the option to save the original size of the image.

Possible changes: prevent upscaling

This could be added as an extra parameter to the ImageSizesObject type:

export type ImageSizesObject = {
  [key: string]: {
    width?: number
    height?: number
+   allowUpscaling?: boolean
    fit?: 'contain' | 'cover' | 'fill' | 'inside' | 'outside'
  }
}

When this parameter is set to true, the .resize part of the image pipeline should be skipped:

let imagePipeline = sharp(image.buffer)

imagePipeline = imagePipeline.jpeg({ quality: 80 })

// Take into account the orientation of the image when reading metadata
// See https://sharp.pixelplumbing.com/api-input/#metadata
const { original } = await imagePipeline.metadata()
const targetSizeBelowOriginalSize = imageSizes[sizeName].width > original.width || imageSizes[sizeName].height > original.height

// Skip resizing the image if upscaling is disallowed and the target size exceeds
// the size of the original image
const doResize = imageSizes[sizeName].allowUpscaling || (targetSizeBelowOriginalSize && !imageSizes[sizeName].allowUpscaling)

if (doResize) {
  imagePipeline = imagePipeline
    .resize(imageSizes[sizeName].width, imageSizes[sizeName].height, {
      fit: imageSizes[sizeName].fit
    })
}

const resizedImage: Buffer = await imagePipeline
  .toBuffer()

Note

An additional improvement here would be to skip unnecessary duplicates. For example, let's say we have three image sizes, small, medium and large, and we've set allowUpscaling = false. When we upload an image that is smaller than the small size, it would be wasteful to upload it two more times for the medium and large sizes. Rather, we can just set

imagePaths['medium'] = imagePaths['large'] = imagePaths['small']

Possible changes: save original image size

This could also be an extra option:

export type ImageSizesObject = {
  [key: string]: {
    width?: number
    height?: number
+   saveOriginalSize?: boolean
    fit?: 'contain' | 'cover' | 'fill' | 'inside' | 'outside'
  }
}

With a similar implementation to the previous suggestion:

let imagePipeline = sharp(image.buffer)

imagePipeline = imagePipeline.jpeg({ quality: 80 })

if (!imageSizes[sizeName].saveOriginalSize) {
  imagePipeline = imagePipeline
    .resize(imageSizes[sizeName].width, imageSizes[sizeName].height, {
      fit: imageSizes[sizeName].fit
    })
}

const resizedImage: Buffer = await imagePipeline
  .toBuffer()

---

Let me know what you think! I wouldn't mind working on this, though I would need some pointers since this would also impact the manifest schema, which I've ignored in my example implementations above.