What are the best ways to handle responsive images?
I've been building a fair amount of websites with TanStack Start / Vite / Cloudflare Workers lately. I love the stack, but the one thing that's been causing me a lot of headache is optimizing images.
So far, I've tried a couple of approaches:
vite-imagetoolsstyle, where you use import params to specify all widths and formats, which are generated at build time like this:
​
import srcSet from 'example.jpg?w=400&h=300&format=webp&as=srcset'
- CDN optimization (in my case, Cloudflare Image Transformations with the url-based API). I have a custom
<CloudflareImage>component that handles this.
The problem with vite-imagetools and similar build-time solutions is that they rely completely on Vite import params. So imports are ugly, and there's no type safety or convenient means of ensuring that your imports don't have typos.
I somewhat worked around this by creating custom presets so that I could instead import from example.jpg?preset=hero or similar. But there are inevitably a lot of edge cases that don't fall cleanly into a preset, so you still end up with a lot of long, ugly import strings.
Cloudflare Image Transformations has the upside of being a runtime solution, which allows for baking logic like desired transformation widths into the actual image component. However, it too has some major drawbacks.
For one, it costs money. It's a pretty trivial amount, but it can add up, especially in development. Secondly, there isn't a convenient way to use Cloudflare transformations in development. You can either host images in S3 and point to the S3 bucket for transformations in development, or else you're stuck rolling a custom solution for local development with a Workers images binding.
It feels like there's almost certainly a better approach here to image optimization. I know Next has this functionality built-in, but my understanding is that I'd then have to host on Vercel or another more expensive provider, since Next's image optimization server isn't compatible with serverless platforms like Workers, without integrating something like CF image transformations.
How do you non-Next, non-Astro users handle image optimization? Is there another solution I'm missing, or is this just a hole in the ecosystem?