Caching Images Next.js
Someone that has any good ideas / thoughts on how to use caching of images well in Next.js?
Should all assets be fetched from the public assets folder in your project or is it fine to store them on something like S3 or Firebase and fetch them from there instead? 🤔
Should we just use the Image from 'next/image'; or is there some better option?
7 Replies
If we're talking static images, not user uploaded. Then just go for image in public folder and
next/imageYeah that are all static images
Then there is no point putting them on S3 or Firebase. That will be much slower.
next/image generates source sets which might be what you're asking about. Im not sure what you mean by caching the images in this instance. Thr browser caches the images locally for you as it does regardless of how you fetch the imageMy colleagues said they tried putting them in public folder but that the website took very long to load on mobile devices then (it's like 200 images or so)
200 images is always going to take a long time to load?
Make sure there are concrete sizes on your next/images so they actually fetch the smaller versions of images
but they are on a lot of different pages in the app, not all used at once.
If you only use
layout="fill" for example, then next wont know which size to fetch and thus can't fetch the smallest possible version of the images
Most likely you're somehow sending images that are too big. S3/Firebase (probably) never be faster than Vercels edge network for images
Manually generating your own source sets and disregarging next/image is also an option of course. The images would still then be placed in /public since they're again just static images