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 · 3 · 0 · 0

@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. :)

@FredBednarski @hxii in case you're unaware: lazy loading works without any js now if you add an attribute to the img element, like this: loading="lazy". (will only work on modern browsers unfortunately)

@Ludonaut @FredBednarski BTW, it just hit me you can hack this up using checkboxes without using JS.
Here's a quick demo:

@hxii @Ludonaut

Oh, this is really clever! It is definitely a contender. Thanks Paul!

Sign in to participate in the conversation

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.