How can I lower my image optimization billing for my blog that generates 0 revenue?
Answered
Masai Lion posted this in #help-forum
Masai LionOP
Just got this surprise last night from a project that generates 0 revenue, we are thinking on adding donations &/or adsense just to pay for the bills, but I'm not sure even that would be enough to pay this amount of money.
This whole 200$ happened during 30 minutes 💀
What can I do to mitigate it? Cache it on cloudflare somehow? Use the defense mode permanently?
This whole 200$ happened during 30 minutes 💀
What can I do to mitigate it? Cache it on cloudflare somehow? Use the defense mode permanently?
Answered by joulev
You can ask Vercel to waive this fee, but the chance of success is low. Instead,
* Image optimisation: well… just don’t use <Image /> for so many images. Only use it for more important ones, for example. And/or use a third party image optimisation solution that is less costly.
* Postgres compute time: use Neon instead of Vercel Postgres, Vercel Postgres is a thin wrapper around Neon at a significantly higher price.
* Image optimisation: well… just don’t use <Image /> for so many images. Only use it for more important ones, for example. And/or use a third party image optimisation solution that is less costly.
* Postgres compute time: use Neon instead of Vercel Postgres, Vercel Postgres is a thin wrapper around Neon at a significantly higher price.
22 Replies
@Masai Lion Just got this surprise last night from a project that generates 0 revenue, we are thinking on adding donations &/or adsense just to pay for the bills, but I'm not sure even that would be enough to pay this amount of money.
This whole 200$ happened during 30 minutes 💀
What can I do to mitigate it? Cache it on cloudflare somehow? Use the defense mode permanently?
You can ask Vercel to waive this fee, but the chance of success is low. Instead,
* Image optimisation: well… just don’t use <Image /> for so many images. Only use it for more important ones, for example. And/or use a third party image optimisation solution that is less costly.
* Postgres compute time: use Neon instead of Vercel Postgres, Vercel Postgres is a thin wrapper around Neon at a significantly higher price.
* Image optimisation: well… just don’t use <Image /> for so many images. Only use it for more important ones, for example. And/or use a third party image optimisation solution that is less costly.
* Postgres compute time: use Neon instead of Vercel Postgres, Vercel Postgres is a thin wrapper around Neon at a significantly higher price.
Answer
@joulev You can ask Vercel to waive this fee, but the chance of success is low. Instead,
* Image optimisation: well… just don’t use <Image /> for so many images. Only use it for more important ones, for example. And/or use a third party image optimisation solution that is less costly.
* Postgres compute time: use Neon instead of Vercel Postgres, Vercel Postgres is a thin wrapper around Neon at a significantly higher price.
Masai LionOP
Damn but the website looks so great with Next images
We've got almost all of the traffic from Sigapore, that's why I think it's was an attack. During those 30 minutes, it was 90% from there
@Masai Lion Damn but the website looks so great with Next images
Each (src, width, height, quality) tuple makes one image optimisation. You are only allowed to use so many of these tuples in your app for free, for more than that you need to pay. So ensure you don’t have something like <Image src={…} width={somethingThatChangesVeryOften} … />
@Masai Lion We've got almost all of the traffic from Sigapore, that's why I think it's was an attack. During those 30 minutes, it was 90% from there
Well, yeah does look like a ddos. You can contact Vercel staff on twitter for example and provide evidence of ddos, then they might waive the fee for you. Add some ddos protection in the future.
@joulev Each (src, width, height, quality) tuple makes one image optimisation. You are only allowed to use so many of these tuples in your app for free, for more than that you need to pay. So ensure you don’t have something like <Image src={…} width={somethingThatChangesVeryOften} … />
+ if you allow next/image for other image domains too, ensure you restrict it in next.config.js. Do NOT allow all domains
@joulev Each (src, width, height, quality) tuple makes one image optimisation. You are only allowed to use so many of these tuples in your app for free, for more than that you need to pay. So ensure you don’t have something like <Image src={…} width={somethingThatChangesVeryOften} … />
Masai LionOP
It goes through cloudflare. And all images are hosted on cloudflare r2 as well.
But can't a malicious use just go to my next/image domain and span it like this?
/image?src=image.com&width=300/image?src=image.com&width=301/image?src=image.com&width=302/image?src=image.com&width=303@Masai Lion But can't a malicious use just go to my next/image domain and span it like this?
`/image?src=image.com&width=300`
`/image?src=image.com&width=301`
`/image?src=image.com&width=302`
`/image?src=image.com&width=303`
Yes they can. So you have to add some further ddos protection here. This is not an easy problem
Masai LionOP
That was my fear, so the attack mode from vercel + cloudflare default protections aren't enought
I just got lucky the malicious actor stopped
@joulev Yes they can. So you have to add some further ddos protection here. This is not an easy problem
Masai LionOP
What do you recommend me? Just disabling next image at all and work with another system? This website is a political target probably, and I don't want to be vulnerable like that. I bet people who oppose to it have a lot of money. (I'm not politically involved, I'm just the dev, just to clarify)
@Masai Lion What do you recommend me? Just disabling next image at all and work with another system? This website is a political target probably, and I don't want to be vulnerable like that. I bet people who oppose to it have a lot of money. (I'm not politically involved, I'm just the dev, just to clarify)
Frankly speaking since the chance of attack is high, I would recommend moving away from Vercel to platforms that are more forgiving, like Cloudflare Pages
Vercel is known for being extremely costly, so if an attack gets past protections, it becomes very bad
@joulev Vercel is known for being extremely costly, so if an attack gets past protections, it becomes very bad
Masai LionOP
Ok, sorry to ask so many question, I've not had much experience with this type of stuff.
Doesn't cloudlfare disable SSR? I really want to make all my blog pages Statically Generated.
Doesn't cloudlfare disable SSR? I really want to make all my blog pages Statically Generated.
I can migrate frameworks, just don't know any other but I can learn
@Masai Lion Ok, sorry to ask so many question, I've not had much experience with this type of stuff.
Doesn't cloudlfare disable SSR? I really want to make all my blog pages Statically Generated.
You can deploy completely static sites there (static export), or an edge runtime dynamic site (next-on-pages)
Image optimisation is afaik not available, but for local images you can simply convert your images to webp at suitable resolution manually
@joulev Image optimisation is afaik not available, but for local images you can simply convert your images to webp at suitable resolution manually
Masai LionOP
I know how to generate thumbnails on my CMS, but it's not on demand, unfortunately. I guess it's a price I will need to pay
If you want to preserve all features of nextjs then the cheapest option is that you deploy it on your own server. Rent a small server, host the website there.
Masai LionOP
Ok, thank you for your help.
I appreciate it a lot