I don't think mask would work so well, because the images he wants to use aren't single colour images (which is what mask works best with). Setting up the background colours to mask could be tricky with what he wants.A more flexible alternative would be to use a neutral SVG as the image in the HTML, and apply the colours (via mask, fill or stroke) with CSS. This would make it possible to have just one base image, avoiding the need to create new ones for each colour initialised in the array.
Doing it with an inline SVG and path classes/ID's would work though. The catch there is that it's not a simple image, so putting the SVG inline might be more bother than it's worth. Inline stuff isn't cached, for one thing.
One easy performance boost would be to compress the PNG's.
The default.png is 94.5 kB, and https://tinypng.com/ on default settings compresses it to 33 kB.
https://www.freeconvert.com/compress-png does even better, giving 17.7 Kb. The image quality is as good as the original too (I checked them both at full size). This seems to be the best option. I had a quick play with converting it to .avif, but the results weren't better.
Statistics: Posted by Gumboots — Wed Apr 23, 2025 9:10 pm