Roadmap for remix-image

[cliffordfajardo]

Hey Josh,
I've taken a look at the source code; fantastic library, I've been learning a good deal from the code 🙌

I was just curious about what you're thoughts are on the roadmap of this library, or rather the "goals" vs "non-goals"
Is your project striving to be the nextjs/image component for the remix ecosystem?

[Josh-McFarlin]

Hi Clifford,

Thanks for the note! I would really like this library to serve as the Remix version of nextjs/image, so there are more features I'd like to implement.

Roadmap:

• Optimizing requests. I plan on adding options to automatically upgrade images to smaller formats such as avif and webp if the browser supports them.
• Support layout and position. Currently, this library resizes images to the exact dimensions you provide. I plan on adding support for the same layout and position props as in nextjs/image: https://nextjs.org/docs/api-reference/next/image#layout
• Improve Rollup. Right now, something I dislike about the library is how the imports work. Since Remix supports Cloudflare (which in turn does not support node builtins), you must import from remix-image/server or remix-image/serverPure. I am slightly worried this could cause confusion in the long run, but hopefully, the documentation makes up for it while I think of a solution.
• Improve Transformations. In order to support all platforms, I implemented image transformations using pure javascript. However, transforming images using pure javascript is much slower than using a library with C bindings like sharp. I plan on measuring the performance of the built-in transformers, to see if they can be improved. Furthermore, I plan on improving the documentation to really push the use of sharp or a WASM transformer.

[cliffordfajardo]

Please do let me know if you need any help; I'm quite eager to contribute since I also find this all. beneficial to me & know it will for others

Is there anything you are tackling at the moment so I don't overlap with your work? I'll also take a look at nextJS's image component and see if there are any low hanging fruit
Maybe creating a checkbox list of things to tackle would be good

[Josh-McFarlin]

Awesome! If you are interested in looking into how Next.js uses layout and position, that would be great! At the moment, I'm working on some small fixes, but I won't have the time to work on the larger layout changes for two or three weeks.

I believe Next.js accomplishes this using a wrapper around the img element and applies styles to this wrapper. To prepare for this, I previously setup CSS/SASS support in the Image component and Rollup. If CSS ends up being the direction you choose to take, feel free to modify this as necessary.

Thanks for the help!

[pbteja1998]

I personally really like that remix-image doesn't have a wrapper around the img tag. That's the one thing I really don't like about next/image, it adds a lot of wrapper elements around the img tag.

[cliffordfajardo]

That's the one thing I really don't like about next/image, it adds a lot of wrapper elements around the img tag

That a good point @pbteja1998 - one thing worth considering is why the nextJS team has put wrapper elements around the img tag.

Perhaps there might be a good reason they added this over time; the next/image component is quite battled tested, maybe there is something to learn here

• https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx

My first guess is that this wrapper component helps with positioning of the content when you declare the the size of the image upfront (to avoid jank / layout shift later when the real image loads successfully)

[Josh-McFarlin]

A possible solution for this is exporting two components. The first could be an Image component that supports layout and position using an outer container element like next/image. The second Image component could essentially be a copy of the current Image component for users who only need the basic img element without any layout support.