feat: format option for webp support (#142)

Author: fenos

infra/docker-compose.yml

@@ -84,5 +84,6 @@ services:
     environment:
       - IMGPROXY_LOCAL_FILESYSTEM_ROOT=/
       - IMGPROXY_USE_ETAG=true
+      - IMGPROXY_ENABLE_WEBP_DETECTION=true
 volumes:
   assets-volume:

infra/storage/Dockerfile

@@ -1,3 +1,3 @@
-FROM supabase/storage-api:v0.25.1
+FROM supabase/storage-api:v0.27.1
 
 RUN apk add curl --no-cache

src/lib/types.ts

@@ -89,4 +89,11 @@ export interface TransformOptions {
    * Fill resizes the image to fill the entire width and height. If the object's aspect ratio does not match the width and height, the image will be stretched to fit.
    */
   resize?: 'cover' | 'contain' | 'fill'
+  /**
+   * Specify the format of the image requested.
+   *
+   * When using 'origin' we force the format to be the same as the original image,
+   * bypassing automatic browser optimisation such as webp conversion
+   */
+  format?: 'origin'
 }

src/packages/StorageFileApi.ts

@@ -593,6 +593,10 @@ export default class StorageFileApi {
       params.push(`resize=${transform.resize}`)
     }
 
+    if (transform.format) {
+      params.push(`format=${transform.format}`)
+    }
+
     return params.join('&')
   }
 }

test/storageFileApi.test.ts

@@ -248,6 +248,47 @@ describe('Object API', () => {
     })
   })
 
+  it('will return the image as webp when the browser support it', async () => {
+    const storage = new StorageClient(URL, { Authorization: `Bearer ${KEY}`, Accept: 'image/webp' })
+    const privateBucketName = 'my-private-bucket'
+    await findOrCreateBucket(privateBucketName)
+
+    const { error: uploadError } = await storage.from(privateBucketName).upload(uploadPath, file)
+    expect(uploadError).toBeNull()
+
+    const res = await storage.from(privateBucketName).download(uploadPath, {
+      transform: {
+        width: 200,
+        height: 200,
+      },
+    })
+
+    expect(res.error).toBeNull()
+    expect(res.data?.size).toBeGreaterThan(0)
+    expect(res.data?.type).toEqual('image/webp')
+  })
+
+  it('will return the original image format when format is origin', async () => {
+    const storage = new StorageClient(URL, { Authorization: `Bearer ${KEY}`, Accept: 'image/webp' })
+    const privateBucketName = 'my-private-bucket'
+    await findOrCreateBucket(privateBucketName)
+
+    const { error: uploadError } = await storage.from(privateBucketName).upload(uploadPath, file)
+    expect(uploadError).toBeNull()
+
+    const res = await storage.from(privateBucketName).download(uploadPath, {
+      transform: {
+        width: 200,
+        height: 200,
+        format: 'origin',
+      },
+    })
+
+    expect(res.error).toBeNull()
+    expect(res.data?.size).toBeGreaterThan(0)
+    expect(res.data?.type).toEqual('image/jpeg')
+  })
+
   it('will get a signed transformed image', async () => {
     await storage.from(bucketName).upload(uploadPath, file)
     const res = await storage.from(bucketName).createSignedUrl(uploadPath, 60000, {