Though full of its own quirks, Remix has proven to be a great foundation upon which to build our souped-up version of Ghost. It does exactly what it promises and has no opinion on how you handle the rest. Other frameworks, like NextJS, try to do it all. I read many posts from developers who bought into most of what NextJS was doing but found themselves battling against its idiosyncratic caching behavior. Remix helps you load data, but you decide how to cache it. They’re happy to point you in the direction of a package and some example code, but the rest is up to you. I’m generally on board with this à la carte approach, but there are a few goodies I wish I could bring over from the full-service side of the spectrum. One such item I particularly found myself wanting was an image optimization component. This is a feature in NextJS, but I actually encountered it while working with Astro.* It’s brilliant—a component that automatically converts images to the more efficient webp format and produces a set appropriate for different screen sizes. Getting images right is a key element in boosting that all-important Lighthouse score.

I searched and found RemixImage, a project that seemed to do just what I wanted. But then I peeked at the GitHub and saw that it hadn’t been updated in a few years. No worries. I realized that what I wanted wasn’t all that complicated, and I could build it myself. So, after some fiddling, I made a small package that exposed a simple API to convert and resize images. A little wiring up later, and I’d taken my Lighthouse score to the moon. I achieved my goal and published a package that a handful of others have found useful as well. So, next time you can’t find what you want, just build it.

*You can read about why we love Astro and Cloudflare here.