feat: optimize ENS avatar images with Sharp

lib/api/image-optimization.ts

@@ -0,0 +1,92 @@
+import sharp from "sharp";
+
+export interface OptimizeImageResult {
+  buffer: Buffer;
+  contentType: string;
+  originalSize: number;
+  optimizedSize: number;
+  originalDimensions?: { width: number; height: number };
+  optimizedDimensions?: { width: number; height: number };
+  format?: string;
+}
+
+export interface OptimizeImageOptions {
+  width?: number;
+  height?: number;
+  quality?: number;
+  effort?: number;
+}
+
+/**
+ * Optimizes an image by resizing and converting to WebP format
+ * @param imageBuffer - The original image buffer
+ * @param options - Optimization options
+ * @returns Optimized image buffer and metadata, or original buffer if optimization fails
+ */
+export async function optimizeImage(
+  imageBuffer: ArrayBuffer,
+  options: OptimizeImageOptions = {}
+): Promise<OptimizeImageResult> {
+  const { width = 96, height = 96, quality = 75, effort = 6 } = options;
+
+  const originalSize = imageBuffer.byteLength;
+  const originalBuffer = Buffer.from(imageBuffer);
+
+  // Get original image metadata
+  let originalMetadata;
+  try {
+    originalMetadata = await sharp(originalBuffer).metadata();
+  } catch {
+    // Metadata extraction failed, but we can still proceed with optimization
+    originalMetadata = undefined;
+  }
+
+  // Optimize image: resize and convert to WebP
+  try {
+    const optimizedBuffer = await sharp(originalBuffer)
+      .resize(width, height, {
+        fit: "cover",
+        withoutEnlargement: true, // Don't upscale small images
+      })
+      .webp({ quality, effort })
+      .toBuffer();
+
+    const optimizedMetadata = await sharp(optimizedBuffer).metadata();
+
+    return {
+      buffer: optimizedBuffer,
+      contentType: "image/webp",
+      originalSize,
+      optimizedSize: optimizedBuffer.length,
+      originalDimensions: originalMetadata
+        ? {
+            width: originalMetadata.width || 0,
+            height: originalMetadata.height || 0,
+          }
+        : undefined,
+      optimizedDimensions: optimizedMetadata
+        ? {
+            width: optimizedMetadata.width || 0,
+            height: optimizedMetadata.height || 0,
+          }
+        : undefined,
+      format: optimizedMetadata?.format,
+    };
+  } catch {
+    // Fallback to original image if optimization fails
+    // This is expected for some edge cases (unsupported formats, corrupted images, etc.
+    // Return original image as fallback
+    return {
+      buffer: originalBuffer,
+      contentType: "image/jpeg", // Default fallback
+      originalSize,
+      optimizedSize: originalSize,
+      originalDimensions: originalMetadata
+        ? {
+            width: originalMetadata.width || 0,
+            height: originalMetadata.height || 0,
+          }
+        : undefined,
+    };
+  }
+}

package.json

@@ -123,6 +123,7 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "4.0.1",
     "sanitize-html": "^2.17.0",
+    "sharp": "^0.34.5",
     "swr": "^2.3.7",
     "viem": "^2.38.5",
     "wagmi": "^2.19.1",

pages/api/ens-data/image/[name].tsx

@@ -5,6 +5,7 @@ import {
   methodNotAllowed,
   notFound,
 } from "@lib/api/errors";
+import { optimizeImage } from "@lib/api/image-optimization";
 import { l1PublicClient } from "@lib/chains";
 import { parseArweaveTxId, parseCid } from "livepeer/utils";
 import { NextApiRequest, NextApiResponse } from "next";
@@ -48,9 +49,30 @@ const handler = async (
 
           const arrayBuffer = await response.arrayBuffer();
 
+          // Optimize image using utility
+          const optimizationResult = await optimizeImage(arrayBuffer, {
+            width: 96,
+            height: 96,
+            quality: 75,
+            effort: 6,
+          });
+
+          // Set appropriate content type (fallback to original if optimization failed)
+          if (optimizationResult.contentType === "image/jpeg") {
+            const originalContentType =
+              response.headers.get("content-type") || "image/jpeg";
+            res.setHeader("Content-Type", originalContentType);
+          } else {
+            res.setHeader("Content-Type", optimizationResult.contentType);
+          }
+
+          res.setHeader(
+            "Content-Length",
+            optimizationResult.buffer.length.toString()
+          );
           res.setHeader("Cache-Control", getCacheControlHeader("week"));
 
-          return res.end(Buffer.from(arrayBuffer));
+          return res.end(optimizationResult.buffer);
         } catch (e) {
           console.error(e);
           return notFound(res, "ENS avatar not found");