I'm a beginner building an image-heavy peer-to-peer marketplace with a Next.js web app and a planned Expo mobile app. The current setup uses Vercel's free tier, Supabase, and Cloudflare R2 for storing photos. My Vercel account was recently paused after serverless CPU usage reached 24 hours, well above the 4-hour free limit. The cause appears to be my Next.js server downloading every original upload, using sharp to resize and convert it to WebP, and then uploading the processed file back to R2. I'd like to keep costs low, so I'm considering removing sharp from the backend and compressing images in the browser or mobile app before uploading them directly to R2. However, I'm concerned about inconsistent client-side results, older devices, and browser-specific problems such as Safari failing to create WebP files. Are there affordable ways to handle compression and image variants without using up serverless compute?
3 Answers
Sharp is not necessarily the problem; running it inside a Vercel request for every upload is. If you need reliable server-side variants, use an image service that integrates with your storage, such as Cloudflare Images or another image CDN. Those services can resize and transform images without consuming your application's serverless allowance. Another option is lazy processing: create each thumbnail or size only when first requested, cache it in R2 or a CDN, and reuse it afterward.
Client-side compression can work, but the biggest improvement is to stop routing the image bytes through your server at all. Have a lightweight API endpoint create a presigned R2 upload URL, then let the browser or app upload directly to storage. That endpoint only handles authorization and metadata, so it uses very little serverless CPU. The client can resize to a sensible maximum dimension, remove EXIF data, and use WebP when supported, with JPEG as a fallback. You should still validate the uploaded file's type, dimensions, and size outside the main request path because clients cannot be fully trusted.
For a very small project, a low-cost VPS could be simpler and more predictable than several free-tier services. You could run the processing worker there while keeping object storage separate. Even then, direct-to-storage uploads and client-side resizing are useful because they reduce bandwidth and processing work. I would avoid relying exclusively on client compression, though; keep validation and a fallback path for older phones and browsers.

Related Questions
Erase Gemini Nano Banana Watermark
AI Image Upscaler
Parking Ticket Generator
Convert SVG to Image
Cursor UML Diagram To Image
Sprite Sheet Splitter