Anything you put in the public folder should get shipped together with both npm run build and even if you static export

In the sources tab when I inpect browser, the only available assets are the ones being displayed. It is only after I start scrolling through my animation that the images start getting downloaded but it's for 30fps animation, it's not ideal at all

Hmm how are you showing the "animation"?

It seems like its being lazyloaded

The src={} of my Image is a state, which updates to the route of each image on scroll. So yes, each image is being lazy loaded which is really bad, considering this approach makes too many reqests and the user ends up seeing 2-3 frames per second until everything's loaded

Try using just a normal img element and/or Next/Image element but with loading="eager"

also im not sure if this is the best way to do what you are trying to do

have you looked into parallax scroll

Loading the image that way doesn't work. It seems it needs to be mounted for next to bother fetching it and I'm stuck without a way of doing it manually. I've gone to rendering a full animation rather than frame by frame, loading the video and controlling it with currentTime and requestAnimationFrame. This is the second option to achieve the effect I want, but I'd still prefer to figure out how to preload these images

I looked into require.context() as well which sounded perfect but no luck there as well

We discussed this in general, prefetching the data url string is pretty much the only way to guarantee all images are instantly loaded at page load, at the cost of performance

I'm probably just being stupid but I tried const img1 = await fetch('route') and that should be it right? But that didn't work

So I must be missing something

Hmm I’ll try to come up with an example later

example: https://github.com/joulev/debug/tree/nextjs-load-image-super-priority

i used webpack to render the image to a dataUrl, so i didn't use fetch

then the image is inlined to the document at build time

guaranteed to be available immediately when you load the page

ping @English Lop