Case Study - Building an Open Source Image Optimizer for Remix.js

The Challenge

I rely pretty heavily on Next/Image (great responsive image component) when making small websites for clients. However, I'm currently using Remix a lot more and am building out my personal portfolio/website plus all my side projects and business ideas using the framework. I wrote pretty much all the code for a basic file-system caching strategy and image optimization implementation to match Next/Image in one of my projects and decided to make it into a library as the current 'remix-image' library is broken and hasn't been updated in a few years.

My Approach

The project is inspired by Next.js's <Image /> component and I've used mainly the same API. The library uses Sharp for image processing and supports dynamic resizing, format conversion, and responsive image delivery.

My solution (currently in beta) includes a pluggable caching layer that defaults to file-system caching (ideal for environments like Linode) and can be overridden to use edge/CDN caching in serverless environments (like Vercel).

I integrated schema validation, lazy loading, and smart cache-control headers to ensure good performance and UX.

The Outcome

I'm currently in the process of testing the library out and making it more robust - my portfolio currently uses it! it is important to note that it is still in beta and not all the features are available yet (just need some more time to implement them - where's the tiem!).

Limitations & Future Work

While the library works well in traditional environments with persistent disk storage, the current file-system cache may not be ideal for serverless deployments where storage is ephemeral.

A problem with transferring the library from Next.js to Remix.js is that the Next.js version is built using Next.js's internal image processing and cache directory (.next/cache/) - It works seemlessly with Vercel (for obvious reasons). This means there's a bit of complexity left to handle with my own implementation.

Future enhancements include implementing a hybrid cache adapter (similar to @next-boost/hybrid-disk-cache) for more robust production use, auto-generation of blurred placeholders, and extended CDN integration.