Support webp and avif formats for og image (#3478)

Co-authored-by: Nicolas Dorseuil <nicolas@gitbook.io>

Author: conico974

packages/gitbook/src/lib/images/resizer/resizeImage.ts

@@ -48,10 +48,15 @@ export async function resizeImage(
     input: string,
     options: CloudflareImageOptions & {
         signal?: AbortSignal;
+        /**
+         * Bypass the check to see if the image can be resized.
+         * This is useful for some format that are not supported by @next/og and need to be transformed
+         */
+        bypassSkipCheck?: boolean;
     }
 ): Promise<Response> {
     const action = checkIsSizableImageURL(input);
-    if (action === SizableImageAction.Skip) {
+    if (action === SizableImageAction.Skip && !options.bypassSkipCheck) {
         throw new Error(
             'Cannot resize this image, this function should have never been called on this url'
         );

packages/gitbook/src/routes/ogimage.tsx

@@ -252,6 +252,8 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             height: 630,
             fonts: fonts.length ? fonts : undefined,
             headers: {
+                // We don't want to cache the image for too long in the browser
+                'cache-control': 'public, max-age=300, s-maxage=31536000',
                 'cache-tag': [
                     getCacheTag({
                         tag: 'site',
@@ -366,19 +368,22 @@ const SUPPORTED_IMAGE_TYPES = [
 async function fetchImage(url: string, options?: ResizeImageOptions) {
     // Skip early some images to avoid fetching them
     const parsedURL = new URL(url);
-    if (UNSUPPORTED_IMAGE_EXTENSIONS.includes(getExtension(parsedURL.pathname).toLowerCase())) {
-        return null;
-    }
 
-    // We use the image resizer to normalize the image format to PNG.
-    // as @vercel/og can sometimes fail on some JPEG images.
-    const response =
-        checkIsSizableImageURL(url) !== SizableImageAction.Resize
-            ? await fetch(url)
-            : await resizeImage(url, {
-                  ...options,
-                  format: 'png',
-              });
+    let response: Response;
+    if (
+        UNSUPPORTED_IMAGE_EXTENSIONS.includes(getExtension(parsedURL.pathname).toLowerCase()) ||
+        checkIsSizableImageURL(url) === SizableImageAction.Resize
+    ) {
+        // We use the image resizer to normalize the image format to PNG.
+        // as @vercel/og can sometimes fail on some JPEG images, and will fail on avif and webp images.
+        response = await resizeImage(url, {
+            ...options,
+            format: 'png',
+            bypassSkipCheck: true, // Bypass the check to see if the image can be resized
+        });
+    } else {
+        response = await fetch(url);
+    }
 
     // Filter out unsupported image types
     const contentType = response.headers.get('content-type');