Refactor next/image size handling

next.config.js

@@ -10,7 +10,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 const nextConfig = {
   images: {
-    imageSizes: [200, 400, 1050],
+    imageSizes: [200],
     remotePatterns: [{
       protocol: 'https',
       hostname: `${STORE_ID}.public.blob.vercel-storage.com`,

src/photo/PhotoUpload.tsx

@@ -5,7 +5,7 @@ import { uploadPhotoFromClient } from '@/services/blob';
 import { useRouter } from 'next/navigation';
 import { PATH_ADMIN_UPLOADS, pathForAdminUploadUrl } from '@/site/paths';
 import ImageInput from '../components/ImageInput';
-import { MAX_IMAGE_SIZE } from '@/utility/image';
+import { MAX_IMAGE_SIZE } from '@/services/next-image';
 import { cc } from '@/utility/css';
 
 export default function PhotoUpload({

src/photo/image-response/CameraImageResponse.tsx

@@ -4,6 +4,7 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
 import { Camera, cameraFromPhoto } from '@/camera';
 import { IoMdCamera } from 'react-icons/io';
+import { NextImageSize } from '@/services/next-image';
 
 export default function CameraImageResponse({
   camera: cameraProp,
@@ -14,7 +15,7 @@ export default function CameraImageResponse({
 }: {
   camera: Camera
   photos: Photo[]
-  width: number
+  width: NextImageSize
   height: number
   fontFamily: string
 }) {

src/photo/image-response/FilmSimulationImageResponse.tsx

@@ -8,6 +8,7 @@ import {
 import PhotoFilmSimulationIcon from 
   '@/simulation/PhotoFilmSimulationIcon';
 import { FilmSimulation } from '@/simulation';
+import { NextImageSize } from '@/services/next-image';
 
 export default function FilmSimulationImageResponse({
   simulation,
@@ -18,7 +19,7 @@ export default function FilmSimulationImageResponse({
 }: {
   simulation: FilmSimulation,
   photos: Photo[]
-  width: number
+  width: NextImageSize
   height: number
   fontFamily: string
 }) {  

src/photo/image-response/HomeImageResponse.tsx

@@ -3,6 +3,7 @@ import { Photo } from '..';
 import ImageCaption from './components/ImageCaption';
 import ImageContainer from './components/ImageContainer';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
+import { NextImageSize } from '@/services/next-image';
 
 export default function HomeImageResponse({
   photos,
@@ -11,7 +12,7 @@ export default function HomeImageResponse({
   fontFamily,
 }: {
   photos: Photo[]
-  width: number
+  width: NextImageSize
   height: number
   fontFamily: string
 }) {

src/photo/image-response/PhotoImageResponse.tsx

@@ -1,11 +1,11 @@
 import { Photo } from '..';
-import { NextImageSize } from '@/utility/image';
 import { formatModelShort } from '@/utility/exif';
 import { AiFillApple } from 'react-icons/ai';
 import ImageCaption from './components/ImageCaption';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
 import { OG_TEXT_BOTTOM_ALIGNMENT } from '@/site/config';
+import { NextImageSize } from '@/services/next-image';
 
 export default function PhotoImageResponse({
   photo,

src/photo/image-response/TagImageResponse.tsx

@@ -3,6 +3,7 @@ import { FaTag } from 'react-icons/fa';
 import ImageCaption from './components/ImageCaption';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
+import { NextImageSize } from '@/services/next-image';
 
 export default function TagImageResponse({
   tag,
@@ -13,7 +14,7 @@ export default function TagImageResponse({
 }: {
   tag: string,
   photos: Photo[]
-  width: number
+  width: NextImageSize
   height: number
   fontFamily: string
 }) {  

src/photo/image-response/TemplateImageResponse.tsx

@@ -2,6 +2,7 @@ import { Photo } from '..';
 import IconFullFrame from '@/site/IconFullFrame';
 import IconGrid from '@/site/IconGrid';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
+import { NextImageSize } from '@/services/next-image';
 
 export default function TemplateImageResponse({
   photos,
@@ -14,7 +15,7 @@ export default function TemplateImageResponse({
   verticalOffset,
 }: {
   photos: Photo[]
-  width: number
+  width: NextImageSize
   height: number
   fontFamily: string
   outerMargin?: number
@@ -89,7 +90,7 @@ export default function TemplateImageResponse({
       }}>
         <ImagePhotoGrid {...{
           photos,
-          width: innerWidth,
+          widthArbitrary: innerWidth,
           height: includeHeader
             ? height - 130 - outerMargin * 2
             : height,

src/photo/image-response/components/ImagePhotoGrid.tsx

@@ -1,28 +1,36 @@
 /* eslint-disable jsx-a11y/alt-text */
 
 import { Photo } from '@/photo';
-import { getNextImageUrlForRequest } from '@/utility/image';
+import {
+  NextImageSize,
+  getNextImageUrlForRequest,
+} from '@/services/next-image';
 
 export default function ImagePhotoGrid({
   photos,
   width,
+  widthArbitrary,
   height,
   imagePosition = 'center',
   gap = 4,
-}: {
+}: ({
   photos: Photo[]
-  width: number
   height: number
   imagePosition?: 'center' | 'top'
   gap?: number
-}) {
+} & (
+  { width: NextImageSize, widthArbitrary?: undefined } |
+  { width?: undefined, widthArbitrary: number }
+))) {
   let count = 1;
   if (photos.length >= 12) { count = 12; }
   else if (photos.length >= 6) { count = 6; }
   else if (photos.length >= 4) { count = 4; }
   else if (photos.length >= 2) { count = 2; }
 
-  const nextImageWidth = count <= 2 ? 1050 : 640;
+  const nextImageWidth: NextImageSize = count <= 2
+    ? width ?? 1080
+    : 640;
 
   let rows = 1;
   if (count > 12) { rows = 4; }
@@ -31,7 +39,7 @@ export default function ImagePhotoGrid({
 
   const imagesPerRow = count / rows;
 
-  const cellWidth = width / imagesPerRow -
+  const cellWidth = (width ?? widthArbitrary) / imagesPerRow -
     (imagesPerRow - 1) * gap / (imagesPerRow);
   const cellHeight= height / rows -
     (rows - 1) * gap / rows;

src/photo/image-response/index.ts

@@ -1,4 +1,4 @@
-import { NextImageSize } from '@/utility/image';
+import { NextImageSize } from '@/services/next-image';
 
 export const MAX_PHOTOS_TO_SHOW_OG = 12;
 export const MAX_PHOTOS_TO_SHOW_PER_TAG = 6;
@@ -7,7 +7,7 @@ export const MAX_PHOTOS_TO_SHOW_TEMPLATE_TIGHT = 12;
 
 // 16:9 og image ratio
 const IMAGE_OG_RATIO = 16 / 9;
-const IMAGE_OG_WIDTH: NextImageSize = 1200;
+const IMAGE_OG_WIDTH: NextImageSize = 1080;
 const IMAGE_OG_HEIGHT = IMAGE_OG_WIDTH * (1 / IMAGE_OG_RATIO);
 export const IMAGE_OG_SIZE = {
   width: IMAGE_OG_WIDTH,
@@ -16,7 +16,7 @@ export const IMAGE_OG_SIZE = {
 };
 
 // 16:9 og image ratio, small
-const IMAGE_OG_SMALL_WIDTH = 800;
+const IMAGE_OG_SMALL_WIDTH: NextImageSize = 828;
 const IMAGE_OG_SMALL_HEIGHT = IMAGE_OG_SMALL_WIDTH * (1 / IMAGE_OG_RATIO);
 export const IMAGE_OG_SMALL_SIZE = {
   width: IMAGE_OG_SMALL_WIDTH,
@@ -26,7 +26,7 @@ export const IMAGE_OG_SMALL_SIZE = {
 
 // 3:2 og grid ratio
 const GRID_OG_RATIO = 1.33;
-const GRID_OG_WIDTH = 2000;
+const GRID_OG_WIDTH: NextImageSize = 2048;
 const GRID_OG_HEIGHT = GRID_OG_WIDTH * (1 / GRID_OG_RATIO);
 export const GRID_OG_SIZE = {
   width: GRID_OG_WIDTH,

src/services/next-image.ts

@@ -1,7 +1,7 @@
 import { BASE_URL } from '@/site/config';
 
 // Explicity defined next.config.js `imageSizes`
-type NextCustomSize = 200 | 400 | 1050;
+type NextCustomSize = 200;
 type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;
 
 export type NextImageSize = NextCustomSize | NextImageDeviceSize;

src/site/api.ts

@@ -1,7 +1,7 @@
 import { Photo } from '@/photo';
 import { absolutePathForPhoto } from './paths';
 import { formatDateFromPostgresString } from '@/utility/date';
-import { getNextImageUrlForRequest } from '@/utility/image';
+import { getNextImageUrlForRequest } from '@/services/next-image';
 
 export const API_PHOTO_REQUEST_LIMIT = 20;