Store optimized assets for all photos

[sambecker]

• Begin creating optimized assets for all new uploads:
  • photo-{storageId}-sm.jpg
  • photo-{storageId}-md.jpg
  • photo-{storageId}-lg.jpg
• Serve optimized (instead of next/image) urls when they exist for operations like og image generation and image manipulation
• Separate (+ simplify) storage manipulation from photo organizational logic

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
exif-photo-blog	Ready	Preview	Comment	Sep 6, 2025 10:58pm
exif-photo-blog-blank	Ready	Preview	Comment	Sep 6, 2025 10:58pm
photos-sambecker	Ready	Preview	Comment	Sep 6, 2025 10:58pm

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
exif-photo-blog-starter	Ignored			Sep 6, 2025 10:58pm
exif-photo-blog-supabase	Ignored			Sep 6, 2025 10:58pm
jack-photos	Ignored			Sep 6, 2025 10:58pm

[DevinTyler26]

Testing this out now 👍🏽
❌ Building with all NEXT_PUBLIC_STATICALLY_OPTIMIZE_* set to 1 failed
Here are the logs https://gist.github.com/DevinTyler26/063337e7029d4fa9349a7df18a3b55d4
I think I have too many large photos

✅ Building with all NEXT_PUBLIC_STATICALLY_OPTIMIZE_* set to 1 except for NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_* worked
Next.js data caching was not happy about it. But again, probably due to the large amount of large photos in my storage

[sambecker]

Thanks so much for checking @DevinTyler26!

Will ship a tool next to upgrade your whole library, and then it would be great if you tested static generation of OG images again.

In the meantime, can you confirm that adding/deleting photos works? And that you see a list of optimized files under "storage" when editing a newly created photo?

[DevinTyler26]

@sambecker I am getting an error trying to upload a photo:

2025-09-06T21:48:19.042Z [error] [InvalidArgument: Copy Source must mention the source bucket and key: sourcebucket/sourcekey.] {
  '$fault': 'client',
  '$metadata': [Object],
  Code: 'InvalidArgument',
  Key: 'photo-nKLK5cgBzogwSLnc.jpg',
  BucketName: 'project-photo',
  Resource: '/project-photo/photo-nKLK5cgBzogwSLnc.jpg',
  RequestId: '1862CFD07CED6BC9',
  HostId: 'dd9025bab4ad464b049177c95eb6ebf374d3b3fd1af9251148b658df7ac2e3e8',
  digest: '3546435849'
}

Trying to update a tag on an old photo also fails:

2025-09-06T21:34:26.677Z [error] Uncaught Exception: [error: DbHandler exited] {
  length: 44,
  severity: 'FATAL',
  code: 'XX000',
  detail: undefined,
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: undefined,
  line: undefined,
  routine: undefined,
  client: [Client]
}
2025-09-06T21:34:26.677Z [fatal] Node.js process exited with exit status: 129. The logs above can help with debugging the issue.
2025-09-06T21:34:26.678Z [error] [error: DbHandler exited] {
  length: 44,
  severity: 'FATAL',
  code: 'XX000',
  detail: undefined,
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: undefined,
  line: undefined,
  routine: undefined,
  client: [Client]
}

[sambecker]

@sambecker I am getting an error trying to upload a photo

Thanks for checking @DevinTyler26! Just pushed a MinIO-specific update.

Can you pull down the latest changes and try to:

1. Update an existing photo
2. Add a new photo
3. Delete the new photo

And let me know if you get any errors or warnings?

[DevinTyler26]

That update fixed all the errors on my end 👍🏽

• Updating a photo worked. After updating, I am seeing the optimized photos in my minio instance
• Adding a new photo worked. I can also see the optimized photos in my minio instance and the Optimized file set under storage
• Deleting a photo worked as well

[sambecker]

That update fixed all the errors on my end 👍🏽

Amazing! Thank you so much for testing, and catching that bug. Will merge soon!

[XahidEx]

This is cool. Something I wanted for a long time.

[sambecker]

This is cool. Something I wanted for a long time.

Same! Excited for this to improve stability in some setups, with reasonable performance/usage characteristics.

[sambecker]

@DevinTyler26 @XahidEx @christojeffrey just flagged all older photo as unoptimized.

Let me know if you run into any issues updating your libraries.

@DevinTyler26 I'm especially curious to know if upgrading your library unlocks OG image static pre-rendering in your setup.

[DevinTyler26]

I tried building twice with OG image static pre-rendering set and unfortunately with MinIO I am still getting build errors:
Build 1

...
   Generating static pages (297/1189) 
Single item size exceeds maxSize
   Generating static pages (341/1189) 
Can't load image https://minio.devincunningham.com/project-photo/photo-ZnAVAgH88CNSgWFI-md.jpg: fetch failed
Error occurred prerendering page "/tag/glass/image". Read more: https://nextjs.org/docs/messages/prerender-error
[Error: Image size cannot be determined. Please provide the width and height of the image.]
Export encountered an error on /tag/[tag]/image/route: /tag/glass/image, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

Build 2

...
   Generating static pages (73/1189) 
   Generating static pages (177/1189) 
Can't load image https://minio.devincunningham.com/project-photo/photo-GUPn7kQ25QElAlp1-lg.jpg: fetch failed
Error occurred prerendering page "/p/asj1i0C4/image". Read more: https://nextjs.org/docs/messages/prerender-error
[Error: Image size cannot be determined. Please provide the width and height of the image.]
Export encountered an error on /p/[photoId]/image/route: /p/asj1i0C4/image, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

I'll try with R2 soon and get back to you

[DevinTyler26]

I am getting a new error trying to upload photos after yesterday's released that enabled photos to be optimized

NoSuchKey: The specified key does not exist.
    at async ab (.next/server/chunks/1452.js:323:113199) {
  '$fault': 'client',
  '$metadata': [Object],
  Code: 'NoSuchKey',
  Key: 'upload-xu94IwZ5jNBiCwQ2.jpg',
  BucketName: 'project-photo',
  Resource: '/project-photo/photo-UIvndCfGpH4G65YZ.jpg',
  RequestId: '186375803F2B107B',
  HostId: 'dd9025bab4ad464b049177c95eb6ebf374d3b3fd1af9251148b658df7ac2e3e8',
  digest: '3309208887'
}

It's odd, after trying to press add a few times, it threw an error each time but then I navigated to the homepage and the photo was there

[sambecker]

I am getting a new error trying to upload photos after yesterday's released that enabled photos to be optimized

Out of curiosity, does adding 1 work but not several?

Once you click "Add" do you still see the original file in the /uploads tab?

Would love to see what a screen grab video looks like when this works and doesn't work.

One theory: if you get rate-limited when pre-rendering assets, I wonder if that also breaks file storage operations until the service cools down?

[sambecker]

I tried building twice with OG image static pre-rendering set and unfortunately with MinIO I am still getting build errors

Any chance these tips can prove/disprove whether or not Cloudflare is rate-limiting?
https://community.cloudflare.com/t/how-to-disable-rate-limit/308132

The randomness of the crashes—and the fact that it doesn't seem to matter what the files are, or where they are—makes it seem like network layer problem

[sambecker]

@christojeffrey can you confirm photo uploads/deletions work with the latest on main with your setup?

[christojeffrey]

will do!

[sambecker]

will do!

Thank you @christojeffrey!

[XahidEx]

@christojeffrey can you confirm photo uploads/deletions work with the latest on main with your setup?

It's working.

[christojeffrey]

I tested it a bit, and here are the results:

1. Updating existing photos works.

2. Uploading and adding a new photo works; it correctly created 3 additional files.

The photo is added correctly to the database and shows up on the grid correctly. FYI, I didn't check whether it's using the correct photo file (sm, md, lg, or original).

3. Uploading and adding a 50MB photo.

I can upload it, but I get this error when adding it:

 ⨯ Error: Input image exceeds pixel limit
    at resizeImageToBytes (src/photo/server.ts:209:6)
    at storeOptimizedPhotos (src/photo/storage/server.ts:21:43)
    at <unknown> (src/photo/storage/server.ts:57:36)
    at async (src/photo/actions.ts:81:24)
  207 |     .resize(width)
  208 |     .toFormat('jpeg', { quality })
> 209 |     .toBuffer();
      |      ^
  210 |
  211 | const GPS_NULL_STRING = '-';
  212 | {
  digest: '4014867328'
}

FYI, the photo's pixel size is 29437 × 10751 pixels. This might be a limitation of the resizing library. I guess this one is out of scope.

4. Deleting works; all 4 files were removed.

5. npm run build works with and without the optimize_photos flags.

Here are the flags I tested:

NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS=1
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES=1
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES=1
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES=1
NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS=1

Hopefully this helps!

[sambecker]

Incredible report @christojeffrey thank you so much for doing all those checks ❤️

FYI, the photo's pixel size is 29437 × 10751 pixels. This might be a limitation of the resizing library.

Can you post a link to this file? Wonder if files this big can be optimized on client before uploading 🤔

[christojeffrey]

Glad to help!

Can you post a link to this file? Wonder if files this big can be optimized on client before uploading 🤔

Here's the link to the JPG file that I was using: https://www.examplefile.com/image/jpg/50-mb-jpg-sample-file