nextjs-notion-starter-kit
nextjs-notion-starter-kit copied to clipboard
transitive-bullshit
Vercel "Usage Limit Warning" for Image Optimization Source Images
Description
Image Optimization Source Images: 1,443 Source Images / 1,000 Source Images (144.3%)
I got this email for Vercel and I'd like to understand if there is a way to reduce the usage of the image optimizations. I find the number "1400" source images to be huge. I do have a lot of images on the site, but there aren't more than 50-70.
But, it counts optimizations, so it probably optimizes images at each rebuild? Or even more often? Do you know when does an image get optimized exactly?
Documentation:
- https://vercel.com/docs/concepts/image-optimization#source-images
- https://vercel.com/docs/concepts/limits/fair-use-policy#typical-monthly-usage-guidelines
I feel like Vercel must optimize images at every build, there is no way there would be so many optimizations otherwise. This might be a configuration issue 🤔 It's hard to tell if it should work that way.
Hmmm, I know that each image uploaded to Notion will have a different URL each time you re-render a page, because Notion stores its images in AWS S3 with an expiration time. So the URLs for these images change very frequently.
Is this the case for you?
😨 ah, if it works this way I understand why I went so high so fast.
I do use Notion, but I don't know if the url changes at every build, that's under-optimized 😓 I guess there is no way to disable the Next.js image optimization without tons of bad side effects?
The url of one of the images is that monster.
Hard to tell if the image is different. Is there a way to tell Next.js if the image is the same as something that was previously optimized, even if the url is different?
You should be able to disable Vercel image optimization by removing this line: https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/components/NotionPage.tsx#L161
Let me know if this works for you.
Is there a way to tell Next.js if the image is the same as something that was previously optimized, even if the url is different?
This is a great question; I'd recommending asking in the next.js repo discussions and/or Vercel support. If you find a good workaround, please post your solution here.
Here is an article that brings some light about this issue, I haven't read it fully yet but it seems quite interesting! https://jake.tl/projects/notion-api#why-is-building-a-website-on-notion-so-hard
Edit: Ah, I noticed you reacted to his tweet, so you must have read his article already?
https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F85003a15-5e82-4e59-b402-614d1b30d1dd%2FUntitled.png?table=block&id=fd692fd9-65ef-4a0c-bd8d-8c9390aac2e6&spaceId=25a4f4a8-5ea8-4d5e-9896-cc76128b64c8&width=2000&userId=&cache=v2
I found a permanent image link when you open your public notion page. But it needs table and id and I do not know how to make it in nextjs notion.
I solved this problem by removing signed_urls which include ".amazonaws.com/". https://github.com/WeijunDeng/nextjs-notion-starter-kit/commit/5a2f5bab6a6dfe2d8df49ebcb9c506f3134bd66d see https://dengweijun.com/wwdc22-link-faster https://dengweijun.com/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F4d4cee7c-2117-47cd-9d40-0e95a1844ecf%252FUntitled.png%3Ftable%3Dblock%26id%3D2e5de059-8e8f-4f0b-bdde-e8079e6c770b%26cache%3Dv2&w=3840&q=75
@Vadorequest @transitive-bullshit
@transitive-bullshit Is @WeijunDeng's solution something that makes sense for you?
Assets hosted on S3 would essentially become public with no expiry, but isn't this what we want? 🤔
I solved this problem by removing signed_urls which include ".amazonaws.com/". WeijunDeng@5a2f5ba see https://dengweijun.com/wwdc22-link-faster https://dengweijun.com/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F4d4cee7c-2117-47cd-9d40-0e95a1844ecf%252FUntitled.png%3Ftable%3Dblock%26id%3D2e5de059-8e8f-4f0b-bdde-e8079e6c770b%26cache%3Dv2&w=3840&q=75
@Vadorequest @transitive-bullshit
Very good solution, why not merge? I can trigger the cache correctly after using this code. @transitive-bullshit
Hello. I'm experiencing the same issue, so I created a PR that may help you with this.
I hope it should help.
https://github.com/transitive-bullshit/nextjs-notion-starter-kit/pull/500
