Article
Our image pipeline compresses, resizes, and serves optimized thumbnails through Cloudflare R2.
Every image uploaded to the platform goes through a processing pipeline before it reaches Cloudflare R2 storage.
We use the sharp library to optimize uploads server-side:
import sharp from "sharp"
const optimized = await sharp(rawBuffer)
.resize(1280, 720, {
fit: "inside",
withoutEnlargement: true,
})
.webp({ quality: 80, effort: 4 })
.toBuffer()
const key = `thumbnails/${Date.now()}-${id}.webp`
await uploadToR2(key, optimized, "image/webp")This reduces file sizes by 60-80% on average while maintaining visual quality.
For local development without R2 credentials, the upload API falls back to the filesystem:
async function uploadToR2(key: string, data: Buffer, contentType: string) {
if (!process.env.R2_BUCKET) {
// Fallback: save to local public directory
const path = join(process.cwd(), "public/uploads", key)
await mkdir(dirname(path), { recursive: true })
await writeFile(path, data)
return `/uploads/${key}`
}
// Production: upload to Cloudflare R2
await r2.putObject({ Bucket, Key: key, Body: data, ContentType: contentType })
return `${CDN_URL}/${key}`
}The API accepts three image formats:
image/jpegimage/pngimage/webpAll outputs are converted to WebP for optimal performance.
Serving optimized images is one of the easiest performance wins you can get.
Maximize your chances of being featured in the next weekly batch with these practical tips.
A technical deep-dive into how we built our self-serve sponsorship system with Stripe Checkout and dynamic pricing.
Discover how our weekly curated batches help the best new products get noticed.