Imageswap

In the top navigation links to this site you may see "+/- Img". This is a toggle button to swap the default lower resolution dithered images for higher resolution full-color ones. This feature is enabled if Javascript support for it is identified. The functionality exists in this stand-alone vanilla javascript file.

Please keep in mind, that by sharing about this, I'm not recommending my solution here - but at least I'll explain my thinking. This little script looks for feature support it needs, and if found adds the link, which when clicked performs DOM manipulation to swap which images are shown. A flag is also saved to session variables so that you don't have to keep clicking the toggle as you navigate from page to page. The script is not written in a modern way, in fact it's specifically using old syntaxes for looping in the hopes of being usable in older browsers on older devices. Since this is the most javascript I intend to use, it is not encapsulated well or particularly concise. It's just a few functions and a tiny initialization.

In order to support the swapping, (and an alternate high-res download available under each image) I use an image processing bash script which takes any unprocessed "source" images from a folder and generates four variations to an output folder:

This solution has served me well so far. Importantly it provides a very backwards compatible and optimized "default" view which loads quickly over low-bandwidth and requires only the most basic of web browser functionality to display.

Previous versions

There used to be a no-js solution to image swapping that used :target in CSS selectors, but it turns out there was a negative accessibility impact to that solution.

Then there was a JS solution, but it didn't persist across pages and rendered a button even if support for the functionality wasn't present.

The current and live solution is v3.