feat: image cropping and optimization

Drew-Macgibbon commented 1 year ago

users should be able to upload their avatar, crop it using restricted aspect ratios, the file should then be resized into dynamic sizes, eg. thumbnail & full-size. We will upload all our files as jpg with light compression to save space. NuxtImage allows for dynamic conversion to formats like webp if the client browser supports it.

This will not just be used for avatars, so it should be extensible. Image cropping will run on the client, optimizations on the server.

We will need the following:

[ ] create a useImageTransformations composable for defining image types, resize/optimization rules, and logic. accessible on client/server
[ ] dropzone for drag-drop of images, use this
[ ] library for simple cropping of images, undecided on library.
[ ] display the current image on settings page if available, also preview new cropped image
[ ] library for optimizations, undecided on library.
[ ] important test on the development server so we can validate it runs in a serverless environment.
[ ] store images in supabase storage / add filename to user.avatar

@aayu5hgit let's discuss this for a few days and find the best solution, comment with your findings.

aayu5hgit commented 1 year ago

@Drew-Macgibbon I've been looking for ways to upload the image and optimizing it. Here's what I found:

1. FilePond

This is a library for handling file uploads. It supports drag-and-drop, image previews, etc.

Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
Drop files, select on filesystem, copy and paste files, or add files using the API.
Async uploading with AJAX, or encode files as base64 data and send along form post.
Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
Image optimization, automatic image resizing, cropping, and fixes EXIF orientation.
Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Thoughts: strong candidate for client side upload. I don't think it works on the server. Which is something we would need eventually.

2. Multer

It simplifies the process of handling file uploads in websites. It helps to manage and handle files that users upload to our website. But drag and drop images cannot be accessed with multer.

Thoughts: not good for client side use, would have to build out a lot of functionality ourselves. Ok option for later server side use.

3. Sharp

It is a high-speed module which is typically used to reduce huge photos in popular formats to more manageable web-friendly JPEG, PNG, WebP, etc. images of various sizes.

Thoughts: fast, good for when there's no client side interaction. Great candidate for the server side optimizations.

4. ImageBitmap

It provides a way to manipulate and process images before displaying or pushing them to DB. In the context of optimizing image quality before uploading to Supabase, we can use createImageBitmap to resize and compress images on the client side.

Thoughts: too much development overhead for now.

5. Imagemin

It is specifically designed to reduce the file size of images by applying various compression techniques and optimizations. We maintain acceptable image quality while significantly reducing the amount of data that needs to be transferred and stored on the Supabase.

Thoughts: unmaintained, so won't even consider because of this.

aayu5hgit commented 1 year ago

@Drew-Macgibbon talking about the useImageTransformations composable, I tried to code a base syntax (correct me if the same is not the way it should be)

export function useImageTransformations(img) {
  const imgOptions = {
    avatar: {
      sizes: [
       // This is just for PNG format, we can define dynamic sizes that could be utiilised by the codebase anywhere.
        { width: x, 
          height: y,
          format: 'jpg',
          options: { 
              quality: {number}} 
          }
      ],
    }
  };

After defining the options(rules), we can call them on our image files and can use it for the further process.

@aayu5hgit looks good, I think we can extract format as we will store all of our images as jpg unless there's a valid reason not to. eg. transparent bg so PNG required.

I also think we might need a way to identify sizes so that we can name the files accordingly when transforming them

Drew-Macgibbon commented 1 year ago

@aayu5hgit let's use FilePond, I added some thoughts to your above comments.

FilePond will allow us to get up and running quickly, it also has almost all the functionality we need. I've created a new repo here so you can work on it in isolation, this is my preferred method for larger functionality. Once it's working well in isolation we can add the code to the feature branch.

We will need to figure out the optimal way to upload to supabase/storage, I will look into this over the next few days.

incubrain / astrotribe