Next.js Discord

Discord Forum

Image component slow

Answered
Catla posted this in #help-forum
Open in Discord
CatlaOP
Hello everyone,
I know it may be a noob question but I'm struggling to understand the value of this component.
I have an app with a lot of images in a single page so I'm trying to figure out how to optimize the loading.

Loading the images without optimizations in a static page result to have a superb speed loading.

<picture> <source type="image/webp" srcSet={imageUrl} /> <img src={imageUrl} alt={blockName + " - " + image.image.alt} /> </picture>


Now I'm trying to implement the Image component to use all the optimizations from NextJs but it takes like 1.5s to load a single image:

<Image src={imageUrl} alt={blockName + " - " + image.image.alt} width={image.image.width} height={image.image.height} quality={89} sizes="(min-width: 60em) 28vw, (min-width: 28em) 45vw, 100vw" className="bg-black/10 dark:bg-white/10" />

Both the apps are on Vercel.

What I'm doing wrong?

Thanks
Answered by Ray
yes because it takes sometime to convert the image if the image haven't been created yet
View full answer

48 Replies

@Ray how large is the image? does it speed up after the first visit?
CatlaOP
they are a lot of images, it's a portfolio website. Yes after the first time it get faster
I came from Gatsby, the NextJs + Cloudinary and now I moved from Cloudinary di Digital Ocean. I just realized that NextJs does not optimize the images at build time so every time the website make a call to the server and optimize the images on the fly. I think that this is the problem, any way to let do the optimization at the build time?
@Catla they are a lot of images, it's a portfolio website. Yes after the first time it get faster
Ray
yes because it takes sometime to convert the image if the image haven't been created yet
Answer
@Ray yes because it takes sometime to convert the image if the image haven't been created yet
CatlaOP
so if I run all the website to create the cache for the images, then the users will see the cached file directly?
Original message was deleted
CatlaOP
ok sounds great I'm gonna check, thank you
btw yes the pages are static using generateStaticParams
@Catla so if I run all the website to create the cache for the images, then the users will see the cached file directly?
Ray
yes, you could try npm run build && npm run start and you should see the image in .next/cache/images
CatlaOP
thank you so much
there is no way to auto-optimize and cache all the images at build time or later?
@Catla there is no way to auto-optimize and cache all the images at build time or later?
Ray
next will convert all the image at build time if you use static export
CatlaOP
never used it, I'm going to study it, thank you
@Catla never used it, I'm going to study it, thank you
Ray
are you trying to build a static site?
@Ray are you trying to build a static site?
CatlaOP
it's static but with some dynamic routes
I'm reading that using static export I cannot use Dynamic Routes without generateStaticParams()
next only convert the image when it load
American Crow
Also this only affects the first visit of a route for a deployment. It's more of a cold start problem for images, isnt it? You could just hit the route once to get the images going and that would speed it up for all future visitors. Correct me if i am wrong @Ray
in this way every time I do a new deploy I have to mannualy navigate all the website...
American Crow
or let the first poor visitor soul eat dirt 🥶
@American Crow or let the first poor visitor soul eat dirt 🥶
CatlaOP
if it's a potential client I can lose a lot of money 😄
every lead is important and, as a photographer, I need a blazing fast website
@Catla if it's a potential client I can lose a lot of money 😄
Ray
you could convert your image to avif or webp
then use Image component with unoptimize props
so next doesn't need to convert the image when it load
@Ray you could convert your image to avif or webp
CatlaOP
yes, I'm using Payload, maybe I can create a plugin tha do this but I don't think it's the same
@Ray your image are stored on payload?
CatlaOP
Payload is a cms, the images are managed via Payload and stored on Digital Ocean
Ray
what format are those image?
CatlaOP
Jpg
@Catla Jpg
Ray
try to convert some image to webp and use Image component with unoptimized
before storing the DO
or avif
American Crow
Mind that would make you lose lazy loading and auto image sizes.
I'd combine both approaches. Feed better Images (not 5000x5000px jpgs but the maximum possible size for the website view) to DO
But keep Next/Image optimizations at the same time. Maybe hit a route here and there after a deployment
Thank you
@Ray try to convert some image to webp and use Image component with `unoptimized`
CatlaOP
Looks like an optimization all build time is a missing feature of NextJs
Could be nice to have also a granular control of this like an option in the image component that if it’s true it optimizes at build time
@Catla Looks like an optimization all build time is a missing feature of NextJs
Ray
yeah I thought it would convert them with static export but it isn't
American Crow
i faced the same problem. I am hitting routes (or a script does) after a deployment to this day 🤷
@American Crow i faced the same problem. I am hitting routes (or a script does) after a deployment to this day 🤷
CatlaOP
Maybe a script could be a solution. I don’t think I can do it, do you have any resources?
American Crow
Sure i can share it with you when i am back at work next week. Don't have access here. But it's a simple ping to the imag heavy urls no rocket science
@Catla Looks like an optimization all build time is a missing feature of NextJs
joulev
images that have been optimised are cached (so each image is only optimised once), so i think that is an intentional limitation to reduce your web hosting bill, since image optimisation takes time and you could for example spend money optimising images that are not needed (because the routes having those images are never visited)