seemingly even more obvious on this page?

Are you using next/image component or regular HTML tag?

Regular HTML tag, is there a difference?

Yes, the [next/image](https://nextjs.org/docs/app/building-your-application/optimizing/images) component automatically optimizes images for you serving them in the best format available for a users browser and serving the best possible image size depending on how it's rendered on the page and/or the provided sizes property.

Try using that with your image and seeing if it is still blurry, if the image is really high res but is being rendered on a small size, small details in the image (like text) can sometimes be blurry because there are just too many pixels in the image for the size it is rendered at.

The next/image component should fix that issue since it serves a resized version for the size it is rendered at, and you can get really fine-grain control using the sizes property.

This seems to be working a lot better clarity wise now however the images take about 30 seconds to load in on the production site once the page is loaded for some reason.

What formats do you have enabled (if any) in the next config and how large are these images file size wise

Don't have any formats in the next config and the images are around 700 KB each

They seem to be taking a lot longer in a production environment than a development environment even though the production environment is a built version of the source so should effectively be faster?

If its of any help I can send a website link so you can see what i mean.

Them taking longer to load is to be expected since they are optimized on-demand at runtime and are automatically lazy loaded so they only begin that process once they are above the fold or close to being above the fold (user scroll and is nearing the image coming into view)

Yeah that'll be nice

Am I fine to DM you it? just as the site isn't public as of yet

This should only be true for the first ever load, after that it will be cached on the edge

Yeah

Yeah it works super quickly after they have been cached, but first load is really slow

taking about 30 seconds to load them in.

wow 30 seconds is insane for a 750KB image

My wifi speed is like 800MB a second so it shouldn't have anything to do with my wifi

Well now that it is cached you won't need to worry about that load time, however for the first user that isn't in an edge region that the image is cached in, that first user will need to bear that long loading time.

I don't see a reason why this should be taking 30 seconds to load on the first time around

Ah okay so its regionally cached and not per user?

Yup cached regionally at the edge

Okay that should be as much of an issue then, still slightly concerning as to what is making it take so long though

if I throttle my network to 3G and disable the cache it takes the image 48s to load, but on my network (1gig up/down) and cache disabled the image appears in less than a second, with cache it's 3ms lol

Ah okay interesting

Even on just Slow 4G with cache disabled the image takes 11s, which is still not great but that's a Slow 4G connection

with no cache

the different between Slow 4G and 3G is massive

With that said, I don't know how in the world with your speeds it took 30s on your first load

on prod as well

Yeah okay 11s isn't too too bad i suppose, it does look like there is some images slightly larger but surely not large enough to cause 44s worth of delay

Yeah thats what im wondering

cause it was even slower on my phone

even when i plugged in ethernet into my macbook

it was still 30s+

That's crazy, typically image load times are actually faster on mobile when using next/image since mobile phones tend to have stronger CPUs than most desktops and that plays a factor along side internet speeds for decoding the image

Yeah thats very strange then

does it cache all images in the public dir or just images it needs on the current page?

If the image is in the public folder, it's a static asset so it gets processed at build time and it is served from the edge, but throwing next/image on that does make it so it's not immediately served from the edge since it has to optimize it first then re-cache it

Ah okay I see, is it possible its the way i'm using next/image? is there a way to further optimise the image with any props passed through the Image component or no?

Yup, I would look into the sizes property, I spent a lot of time optimizing my images with the sizes prop and it yield great results for me

Also, because the next/image component does the optimization at runtime, I would take advantage of the onLoad property to show some feedback to the user before the image is loaded so they know something is coming for those slow cases, then when onLoad triggers, removing that feedback

Actually, if your images are coming from the public folder and are static, you can just use placeholder="blur" if you import them into your file and it'll automatically show a blurHash for your images while they load

Okay sounds good, thanks a lot, ill implement this now and look into the sizes property.

Thanks for all your help, its much appreciated!

No problem