Image Optimization

[lifeiscontent]

Hi, I noticed that there is an altText attribute on the image model but no usages of it in the code, how would you go about using it?

also, for things like image variants (resized images / alternative formats) how would you go about dealing with that? one idea that came to mind was to have a one to many relationship to the image model to ask for a specific variant.

e.g. if variant exists, use it, otherwise create it with sharp and store it for later to use with a picture element.

[kentcdodds]

For your first question, this is useful for user submitted images. You would ask them to provide the alt text and then wherever you display the image you would include the alt text on the image.

For your second question, I'll be building a special route that allows transformations similar to cloudinary (likely using sharp) and cache the generated images on demand. My hope is to be able to use https://github.com/ascorbic/unpic-img in some fashion.

[lifeiscontent]

@kentcdodds thats great! Thank you for putting together epic stack, I've been taking parts and pieces of it for another project I'm building. Happy to noodle on this idea more if you want help as I'll probably end up needing whatever you're planning at some point anyway also 😀 I'm currently working on an image component as well but you mentioned using unpic so not sure if you think the code would be useful, but happy to share 😊

[benbjohnson]

@kentcdodds are you wanting to store the images themselves? We have write forwarding but it has limitations. We've actually talked about two possible features that are relevant:

1. Adding an HTTP API for queries. This would require a small JavaScript driver but it'd let you query from any node.

2. Supporting non-SQLite files. This would let you write a whole file to LiteFS and it would automatically propagate to all nodes. It would only support full files. If you replaced the file then you'd have to replace the whole thing (and not just update part of it).

Would either of those seem like good options for what you're doing?

[kentcdodds]

1. That's basically like https://turso.tech/ then? Crazy! That would definitely address this.
2. That would also solve this and be even easier. I may even switch to that for my source image storage as well. (What we're discussing is just caching of image transformations).

I think between the two of them, I'd go for option 2, but option 1 would also allow me to avoid having to do this:

epic-stack/app/routes/admin+/cache_.sqlite.tsx

Line 48 in ea4ff76

return fetch(`${domain}/admin/cache/sqlite`, {

So... both? 😅

[benbjohnson]

Yes, number 1 is conceptually the same approach as Turso. It's not meant to be the primary access method as going over HTTP has much higher latency than in-process queries. It came up because one of the issues we have is with "background job" instances. They tend to live in the same region as the primary node but they are not the primary node themselves. In those cases, HTTP has low enough latency that it's not a big deal.

I added issues for both:

• HTTP Query API superfly/litefs#326
• Object Storage superfly/litefs#327

[muco-rolle]

Hi @benbjohnson

I need this component. Could you please share the code with me?