I am looking for advice on how to include an image gallery, while being low-bandwidth friendly.

I am working on and my dithered images just don't give the full effect.

Right now it's my best idea is a sub-page for gallery, with an "image-heavy" disclaimer. Not great for file organization with 11ty

I like @hxii 's approach - a tiny .js script for "click to load image" (see here:, but I don't want to start adding js to my site.

· · Web · 2 · 0 · 1

@FredBednarski @hxii you may know all these things, but worth revisiting possibly. Check the "Optimise your Images for Size" section:

@exquisitecorp Thanks! Yeah, I know those things - I try to be even more bandwidth conscious than what the site advises ;)

Hosting even a lazy-loading, optimized jpg somewhere on the website where a user can just stumble upon it is a no-no for me :P My unwritten rule is to only allow images under 32kb in those circumstances, but shoot for smaller (I know it might sound silly, but it is a part of my philosophy of this site, and a fun challenge from both graphic, and web design perspective).

@exquisitecorp Love both, but I also have an unwritten rule of no color in the main text 🤣

Anyway, I will go and research more about 11ty, see if I can force it to let me organize subpages on the directory level a bit better, because I think the best approach is to have a sub-page of images with a "warning" before you click it.

@FredBednarski @exquisitecorp I feel like marking the image w/ lazy loading + using a <details> tag should work, but somehow doubt it actually would.

@yoshiki Yeah, I did some research on it, but didn't find any solid answer.

The best I found was a stackexchange from 2017 confirming that things inside <details> load at init. No mention of lazy loading. It's possible lazy loading became a thing later.

Might look into it more tomorrow, see if I can find a way to check exactly what the website has loaded at any given time (fingers crossed there is a way to do it without installing yet another software/framework with bunch of dependencies).

@FredBednarski You could maybe force a large page break with a warning and set all images to be lazy loaded, this way nothing is loaded until the user scrolls. :)

Sign in to participate in the conversation

Revel in the marvels of the universe. We are a collective of forward-thinking individuals who strive to better ourselves and our surroundings through constant creation. We express ourselves through music, art, games, and writing. We also put great value in play. A warm welcome to any like-minded people who feel these ideals resonate with them.