feat(core): enabling avif support (#2126)

Author: dphang

packages/libs/core/src/images/imageOptimizer.ts

@@ -28,14 +28,14 @@ import fetch from "node-fetch";
 import { PlatformClient } from "../platform";
 
 let sharp: typeof import("sharp");
-//const AVIF = 'image/avif'
+const AVIF = "image/avif";
 const WEBP = "image/webp";
 const PNG = "image/png";
 const JPEG = "image/jpeg";
 const GIF = "image/gif";
 const SVG = "image/svg+xml";
 const CACHE_VERSION = 2;
-const MODERN_TYPES = [/* AVIF, */ WEBP];
+const MODERN_TYPES = [AVIF, WEBP];
 const ANIMATABLE_TYPES = [WEBP, PNG, GIF];
 const VECTOR_TYPES = [SVG];
 
@@ -340,10 +340,9 @@ export async function imageOptimizer(
       transformer.resize(width);
     }
 
-    //if (contentType === AVIF) {
-    // Soon https://github.com/lovell/sharp/issues/2289
-    //}
-    if (contentType === WEBP) {
+    if (contentType === AVIF) {
+      transformer.avif({ quality });
+    } else if (contentType === WEBP) {
       transformer.webp({ quality });
     } else if (contentType === PNG) {
       transformer.png({ quality });

packages/libs/core/tests/images/imageOptimizer.test.ts

@@ -129,31 +129,37 @@ describe("Image optimizer", () => {
 
   describe("Routes", () => {
     it.each`
-      imagePath                         | expectedObjectKey
-      ${"/test-image.png"}              | ${"public/test-image.png"}
-      ${"/static/test-image.png"}       | ${"static/test-image.png"}
-      ${"/_next/static/test-image.png"} | ${"_next/static/test-image.png"}
-    `("serves image request", async ({ imagePath, expectedObjectKey }) => {
-      const { parsedUrl, req, res } = createEventByImagePath(imagePath);
-
-      await imageOptimizer(
-        "",
-        imagesManifest as ImagesManifest,
-        req,
-        res,
-        parsedUrl,
-        mockPlatformClient as PlatformClient
-      );
-
-      expect(res.getHeaders()).toEqual({
-        "cache-control": "public, max-age=60",
-        etag: expect.any(String),
-        "content-type": "image/webp"
-      });
-      expect(res.statusCode).toEqual(200);
-
-      expect(mockPlatformClient.getObject).toBeCalledWith(expectedObjectKey);
-    });
+      imagePath                         | accept          | expectedObjectKey
+      ${"/test-image.png"}              | ${"image/avif"} | ${"public/test-image.png"}
+      ${"/test-image.png"}              | ${"image/webp"} | ${"public/test-image.png"}
+      ${"/static/test-image.png"}       | ${"image/webp"} | ${"static/test-image.png"}
+      ${"/_next/static/test-image.png"} | ${"image/webp"} | ${"_next/static/test-image.png"}
+    `(
+      "serves image request",
+      async ({ imagePath, accept, expectedObjectKey }) => {
+        const { parsedUrl, req, res } = createEventByImagePath(imagePath, {
+          accept: accept
+        });
+
+        await imageOptimizer(
+          "",
+          imagesManifest as ImagesManifest,
+          req,
+          res,
+          parsedUrl,
+          mockPlatformClient as PlatformClient
+        );
+
+        expect(res.getHeaders()).toEqual({
+          "cache-control": "public, max-age=60",
+          etag: expect.any(String),
+          "content-type": accept
+        });
+        expect(res.statusCode).toEqual(200);
+
+        expect(mockPlatformClient.getObject).toBeCalledWith(expectedObjectKey);
+      }
+    );
 
     it.each`
       imagePath