Thumbnail best practice

[Macker (Chris MacDonald)]

Hey guys,

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.

Here’s a link to the live site: http://roberts-limbrick.webflow.io/projects/surbiton-healthcare-building

And to the read only: https://preview.webflow.com/preview/roberts-limbrick?preview=17cf1ed66cc0eb6e9c6cc667f77ae01f

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?

[Maurice]

Hi @Macker,

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.

If the images then still to big try this site:

TinyPNG – Compress PNG images while preserving transparency

It does a really great job on PNG and JPEG.

Greetings Maurice

[garymichael1313 (G.J.)]

Hey Macker,

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.

Just thinking outside the box. Whaaa.