diff --git a/next.config.js b/next.config.js index a9dbb530..8d492c98 100644 --- a/next.config.js +++ b/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`, diff --git a/src/app/(static)/home-image/route.tsx b/src/app/(static)/home-image/route.tsx index 23dbab93..ba1f68ed 100644 --- a/src/app/(static)/home-image/route.tsx +++ b/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, diff --git a/src/photo/image-response/HomeImageResponse.tsx b/src/photo/image-response/HomeImageResponse.tsx index c9e145c7..c0dc510d 100644 --- a/src/photo/image-response/HomeImageResponse.tsx +++ b/src/photo/image-response/HomeImageResponse.tsx @@ -28,8 +28,10 @@ export default function HomeImageResponse({ diff --git a/src/photo/image-response/PhotoGridImageResponse.tsx b/src/photo/image-response/PhotoGridImageResponse.tsx index 5cbc6412..9c30ddc6 100644 --- a/src/photo/image-response/PhotoGridImageResponse.tsx +++ b/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, diff --git a/src/site/index.ts b/src/site/index.ts index 6406851c..19a16cb3 100644 --- a/src/site/index.ts +++ b/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;