DEV Community

Discussion on: Best way to deal with lots of images on a webpage?

Collapse
 
alexanderjanke profile image
Alex Janke

I'm not entirely sure what you mean by replicating code to serve the perfect image... but you can do some pretty easy optimization with your images.
First of you can (and should) resize your images.
d33wubrfki0l68.cloudfront.net/832e...
This one, for example, is 3072x4096 pixels big. That's masssssive! On the website, the image is barely 500x700. Reduce the load times by adjusting your images before even uploading them to your storage/host. That should save you roughly 80%-90% of the load times for the images as 600kb per image is quite hefty. For convenience sake: squoosh.app/
Drag and drop your image in here, in the bottom right corner select resize and choose a sensible size. Roughly something of the size that it will be later on your page.

If you think that your visitors may access your website from all over the world, host your images on a CDN (Content Delivery Network) to reduce the distance between the server and the visitor.
Other than that you can lazy load the images, meaning they will only then load right before the image scrolls into the view. This would speed up your initial load time. But this is more of a micro-optimization compared to properly adjusting your files upfront.