strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce home og image size

Browse Source
This commit is contained in:
Sam Becker 2023-09-11 12:52:33 -05:00
parent 66262d2b57
commit d557514210
5 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

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

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

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

2
src/photo/image-response/HomeImageResponse.tsx
View File

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

10
src/photo/image-response/PhotoGridImageResponse.tsx
View File

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

8
src/site/index.ts
View File

@ -10,7 +10,13 @@ export const IMAGE_LARGE_WIDTH = 900;
// 16:9 og image ratio // 16:9 og image ratio
export const IMAGE_OG_RATIO = 16 / 9; export const IMAGE_OG_RATIO = 16 / 9;
export const IMAGE_OG_WIDTH = 1200; 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 // 3:2 og grid ratio
export const GRID_OG_RATIO = 1.33; export const GRID_OG_RATIO = 1.33;