Reduce home og image size

next.config.js

@@ -6,7 +6,7 @@ const STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(
 
 const nextConfig = {
   images: {
-    imageSizes: [400, 1050, 1200],
+    imageSizes: [200, 400, 1050, 1200],
     remotePatterns: [{
       protocol: 'https',
       hostname: `${STORE_ID}.public.blob.vercel-storage.com`,

src/app/(static)/home-image/route.tsx

@@ -2,7 +2,7 @@ import { auth } from '@/auth';
 import { getImageCacheHeadersForAuth } from '@/cache';
 import HomeImageResponse from '@/photo/image-response/HomeImageResponse';
 import { getPhotos } from '@/services/postgres';
-import { IMAGE_OG_HEIGHT, IMAGE_OG_WIDTH } from '@/site';
+import { IMAGE_OG_SMALL_HEIGHT, IMAGE_OG_SMALL_WIDTH } from '@/site';
 import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from '@vercel/og';
 
@@ -20,14 +20,14 @@ export async function GET(request: Request) {
         request,
         includeHeader: false,
         outerMargin: 0,
-        width: IMAGE_OG_WIDTH,
-        height: IMAGE_OG_HEIGHT,
+        width: IMAGE_OG_SMALL_WIDTH,
+        height: IMAGE_OG_SMALL_HEIGHT,
         fontFamily: FONT_FAMILY_IBM_PLEX_MONO,
       }}/>
     ),
     {
-      width: IMAGE_OG_WIDTH,
-      height: IMAGE_OG_HEIGHT,
+      width: IMAGE_OG_SMALL_WIDTH,
+      height: IMAGE_OG_SMALL_HEIGHT,
       fonts: [
         {
           name: FONT_FAMILY_IBM_PLEX_MONO,

src/photo/image-response/HomeImageResponse.tsx

@@ -28,8 +28,10 @@ export default function HomeImageResponse({
       <PhotoGridImageResponse {...{
         photos,
         request,
+        nextImageWidth: 200,
         colCount: 4,
         rowCount: 3,
+        gap: 6,
         width,
         height,
       }} />

src/photo/image-response/PhotoGridImageResponse.tsx

@@ -1,11 +1,10 @@
 import { getNextImageUrlForRequest } from '@/utility/image';
 import { Photo, titleForPhoto } from '..';
 
-const IMAGE_WIDTH = 400;
-
 export default function PhotoGridImageResponse({
   photos,
   request,
+  nextImageWidth = 400,
   height,
   width,
   colCount,
@@ -15,6 +14,7 @@ export default function PhotoGridImageResponse({
 }: {
   photos: Photo[]
   request: Request
+  nextImageWidth?: 200 | 400,
   height?: number
   width: number
   colCount: number
@@ -65,11 +65,11 @@ export default function PhotoGridImageResponse({
                 src={getNextImageUrlForRequest(
                   photo.url,
                   request,
-                  IMAGE_WIDTH,
+                  nextImageWidth,
                 )}
                 alt={titleForPhoto(photo)}
-                width={IMAGE_WIDTH}
-                height={IMAGE_WIDTH / photo.aspectRatio}
+                width={nextImageWidth}
+                height={nextImageWidth / photo.aspectRatio}
                 style={{
                   display: 'flex',
                   width: photoWidth,

src/site/index.ts

@@ -10,7 +10,13 @@ export const IMAGE_LARGE_WIDTH = 900;
 // 16:9 og image ratio
 export const IMAGE_OG_RATIO = 16 / 9;
 export const IMAGE_OG_WIDTH = 1200;
-export const IMAGE_OG_HEIGHT = IMAGE_OG_WIDTH * (1 / IMAGE_OG_RATIO);
+export const IMAGE_OG_HEIGHT =
+  IMAGE_OG_WIDTH * (1 / IMAGE_OG_RATIO);
+
+// 16:9 og image ratio, small
+export const IMAGE_OG_SMALL_WIDTH = 800;
+export const IMAGE_OG_SMALL_HEIGHT =
+  IMAGE_OG_SMALL_WIDTH * (1 / IMAGE_OG_RATIO);
 
 // 3:2 og grid ratio
 export const GRID_OG_RATIO = 1.33;