I’m wondering what the best practice is for thumbnails? I hadn’t really given it a second thought until I tried to load my website on my computer at home (on my crappy internet connection) and it took an age, and the layout didn’t work until all of the images had loaded, it seemed.
I currently have all my images at ~450kb/2000px along their longest edge. Should I be creating thumbnails? I’m not sure how I’d get the thumbnails to work with my site either, given how the project gallery works.
I appreciate things like the lightbox automatically generate thumbnails; but I’ve got it working with CMS content using custom code so I think this may be broken?
I would suggest to use the “Save for Web” function in photoshop, there I would try to get the big image around 300kb and the smaller ones that opens in the lightbox around 150-250kb.
Also the smaller ones don´t have to be 2000px, I think their longest edge should around 1000-1200px.
I remember seeing your site from one of our previous conversations. And something just came to mind. Since you have so many images, all with different sizes and resolutions, have you thought about using an “Image Collage” with hotspots on hover over, instead of all individual images?
You could create one collage the size of your page
Organized in your desire formation
But smaller, not exactly thumbnail but something like 200, 400 width ea
User hovers, clicks, lightbox opens with arrows and captions for descriptions
Small hover descriptions can be used as micro-interaction
For responsiveness make images w/ more 400 - 800 width
This format would allow you to manage the collage images in PS or Affinity
When you need a new one, simply add it to the PS file, save, export, replace in WF
Then your load time will be significantly reduced, with one major advantage - if someone wants to jack or steal your images, they get a small grouped image, one big collage. To protect your images without custom code.
