Images loading slowly or not at all when deployed to Netlify
Hello, I have a react page that I have just deployed to Netlify that has a bunch of images. Everything looks fine in localhost:3000 but the images in the deployed website either dont load or load very slowly. Im still a little new to web dev so maybe this is an easy fix. I'm wondering if creating the project with NextJS would help or not. Does anyone know why this is or have any solutions? I can show my code if that would help, thanks.
9 Replies
It is probably just an issue with the image paths. However, as you say that some load slowly, that would mean that their paths are ok but they are very large. Have you optimized the images?
What are the file sizes of the images?
The images are in jpg and they are actually pretty large images. Some are 7.5 mb and even 18.5 mb so maybe this is the issue. The website Im creating is a photo almost like a travel blog and I have photo albums on there so I would like the images to be high quality.
I didn't realize the size of the images before but I can see why this would be a problem.
you should compress them and convert them to
.webp format.yeah, that's the problem. You can have them be high-quality and still in the 500kb range, maybe even smaller. Modern compression is insane.
You could use Netlify to compress images automatically - https://www.netlify.com/blog/2021/12/21/optimize-your-sites-with-post-processing-on-netlify/ but if they're really large, it'll only be able to do so much.
Ideally, you make them smaller (7.5mb to 18.5mb is big big, even if you want high-quality, that's a lot of pixels 😅 - You probably don't need more than 3000x2000).
Netlify actually offers image transforms - https://docs.netlify.com/large-media/transform-images/, with 2.5k transforms on their free tier, could be worth looking into.
If you get them into the 3000x2000 range (or smaller), and use
.webp you could get them into the 300kb-500kb range, would be my guess.Okay thank you so much!
Would it be easier to just change the photo size in my end?
Or should I do it through Netlify
I would say that the less you try to do on the server, the better.
Okay thanks!
Unknown User•15mo ago
Message Not Public
Sign In & Join Server To View