I'm in the process of creating a portfolio using Tanstack Start instead of my usual Next.js. Since it's a static site, I'm deploying it via Cloudflare Workers with the provided adapter. I'm looking for the best way to handle images. With Next.js, I had it easy with the built-in image optimization features. I've heard of Unpic, but it seems like I'd need to upload all my images to a CDN manually first before referencing them in my code. Is there a simpler solution that offers the same ease of use as Next.js?
3 Answers
Honestly, if it’s just a static site, you’re making it more complicated than needed. Maybe consider a platform designed for static site generation, like Astro, and host on Netlify or Render. For a portfolio, you probably don’t need to worry about getting your assets CDN-hosted; Netlify can handle all of that seamlessly for you.
You're right, Unpic does require hosting your images first. Given that you’re using Cloudflare Workers, I'd recommend Cloudflare Images as it’s probably the cleanest path. You can upload through their dashboard or API, and it handles image resizing and optimization automatically. It might take a bit to learn compared to Next/Image, but it works great once set up. If you want something super easy and don't mind a third-party service, check out Cloudinary – they have a generous free tier and let you transform images on-the-fly with URL params. If you're sticking to static content and want to keep it simple, you could also optimize images locally with Sharp in a build script and just commit the optimized versions. It’s straightforward but comes without any runtime overhead. By the way, what does your image workflow look like? Is it dynamic, or are you focusing mainly on static pieces?
Thanks for the clarification! I want a simple solution since I'm not great at keeping everything documented. My portfolio has a rigid design system – all articles are styled the same, and the images are treated uniformly. I really don't expect much traffic, so caring about the last bit of performance isn't a priority. A few breakpoints should suffice. I looked into Vite Image Optimizer, but it seems like it only optimizes images without generating multiple sizes out of the box.
You might want to check out Cloudflare Images since you're already using Cloudflare Workers. It lets you upload your images once and provides automatic resizing via URL parameters for about $5 a month with 100k images. If you prefer potential alternatives, you could look into Cloudinary or ImageKit; they both offer free tiers and URL-based transformations, which work well with Unpic. For Unpic, yes, images need to be hosted elsewhere first, but it takes care of the srcset and sizing once you do that. Most similar to the Next Image experience is combining Cloudinary with Unpic – just upload to Cloudinary, and use the Unpic component for responsive images! Here's a quick snippet: import { Image } from '@unpic/react'; . It’s almost like magic – just not quite on par with Next Image!
Thanks for the awesome summary!
Tanstack Start does static page builds. My main concern is the images. Being a designer, I want to ensure the best image quality but without serving massive files on mobile.