Remix local images

[Viktoriia-Lotvinova]

Hi, is it possible to generate srcset for local images on Remix, without using CDN?

[ascorbic]

I'm afraid it only works if you're using a host that has its own image handling, such as Netlify or Vercel. There's no built-in image resizing service.

[trompx]

Hey @ascorbic,

I generate the image versions myself locally, I was hoping that I could still use unpic breakpoints and have a custom transformer that would follow my image naming convention to generate the correct srcset (image on the public folder for SSG). Do I have to look for another library or it is somewhat possible with unpic transformers?

[ascorbic]

Without knowing the details I can't say for sure, but something like that should be possible with a custom transformer.

[trompx]

I generate the images:

• /public/images/img.webp
• /public/images/img-1024.webp
• /public/images/img-640.webp

Then I'd like to be able to specify /public/images/img with breakpoints [1024, 640] and unpic would pick the images correctly, that would be for SSG where images are local. I also have another pipeline where the same images are hosted on R2, so instead of /public/images/img, I'd have the image R2 url.

[ascorbic]

You'd need to manually pass in breakpoints, and could then have the transformer map the dimensions to the filename

[trompx]

Not sure I see exactly what you mean. But I'm trying to create a transformer based on the current providers. They all import from ../utils and ../types:

import {
	ImageFormat,
	Operations,
	URLExtractor,
	URLGenerator,
	type URLTransformer,
} from "../types.ts";
import {
	createExtractAndGenerate,
	createOperationsHandlers,
	toCanonicalUrlString,
	toUrl,
} from "../utils.ts";

I installed unpic and @unpic/react, but those functions aren't available, but I saw in the node_modules/unpic that they're present at unpic/esm/src/types.d.ts and unpic/esm/src/utils.ts. Should I directly import from there?