Images with getStaticProps?
Unanswered
Woodwasp posted this in #help-forum
WoodwaspOP
Hey there!
I'm new to web dev and am building my first Next js site and had a question about how one goes about using images with dynamic routing.
My pages are dynamically routed so I'm using
The problem as you might expect is that all the text on the page loads way before the image and so there's this awkward delay.
I'm not really sure how one would go about fixing it, but would it involve loading my images via
Your help is much appreciated!
I'm new to web dev and am building my first Next js site and had a question about how one goes about using images with dynamic routing.
My pages are dynamically routed so I'm using
pages/[id].js and each page will have a unique image. So far, I've put all my images in public and link to my images via href from [id].js.The problem as you might expect is that all the text on the page loads way before the image and so there's this awkward delay.
I'm not really sure how one would go about fixing it, but would it involve loading my images via
getStaticProps()?Your help is much appreciated!
6 Replies
@Woodwasp Hey there!
I'm new to web dev and am building my first Next js site and had a question about how one goes about using images with dynamic routing.
My pages are dynamically routed so I'm using `pages/[id].js` and each page will have a unique image. So far, I've put all my images in `public` and link to my images via href from `[id].js`.
The problem as you might expect is that all the text on the page loads way before the image and so there's this awkward delay.
I'm not really sure how one would go about fixing it, but would it involve loading my images via `getStaticProps()`?
Your help is much appreciated!
you can't load images with
* technically you can load images with
getStaticProps*. Instead use next/image with priority in the images above the fold so the browser knows to prioritise laoding it* technically you can load images with
getStaticProps by serialising it to base64 or similar, then send it to the src prop of the image tag, but this is not recommended since it will just make your page fatter and the overall data to transfer is not improved => perf is not improved@joulev you can't load images with `getStaticProps`*. Instead use `next/image` with `priority` in the images above the fold so the browser knows to prioritise laoding it
\* technically you _can_ load images with `getStaticProps` by serialising it to base64 or similar, then send it to the src prop of the image tag, but this is not recommended since it will just make your page fatter and the overall data to transfer is not improved => perf is not improved
WoodwaspOP
actually I am using the
would it maybe make more sense if I made some sort of component and passed the id for the image and text props so that they both load at the same time?
priority property on the images but there's still a delay unfortunately...would it maybe make more sense if I made some sort of component and passed the id for the image and text props so that they both load at the same time?
(I hope what I just said made sense 😅 )
@Woodwasp actually I am using the `priority` property on the images but there's still a delay unfortunately...
would it maybe make more sense if I made some sort of component and passed the id for the image and text props so that they both load at the same time?
actually I am using the priority property on the images but there's still a delay unfortunately...yeah it's how it's supposed to work – it's the same way everywhere else. use a reasonable size for your image (you don't need 4K images if your image rendered size is 1000px wide for example), and put your image on a CDN (if you host on vercel and use the image in
public it should be already done by vercel) to optimise load timewould it maybe make more sense if I made some sort of component and passed the id for the image and text props so that they both load at the same time?this won't work because the browser still makes the request for the image separately, and there will still be a delay. you can use something like onLoad (or something similarly named) on the image component and only show the page content with
opacity: 0 -> 1 after the image has been loadedbut i wouldn't do that... too much work for too little gain