Earth Notes: On Website Technicals (2021-02)

Updated 2021-02-09 20:50 GMT.
Tech updates: image preview tweak for dark mode...

2021-02-06: Dark Mode Image Tweaks

As a super-fast super-simple super-low-bandwidth preview / progressive view for images, I generally set the width and height attributes and also something like style=background:#933 and some form of lazy or async load and render.

This renders the whole area of the image in a single representative colour. Currently this is the image 'average' mapped to a nearby #xxx from the Netscape 'safe' 216 colour cube.

I don't do this for images with transparency, as I want the background to show through.

Until now I haven't done this either when the representative colour was the (white #fff) background colour, since it would likely consume a few bytes to achieve no visual effect.

As of today I also decline to use this background when it would be black (#000), since that would have no visual effect for dark mode. It turns out that that only affected at most about eight images!

Just before this change I did a census of all the existing cached image background values (including #000), by count and colour:

countcolour
8#000
2#303
4#330
103#333
7#336
23#363
12#366
3#369
1#39c
54#633
12#636
64#663
431#666
43#669
8#696
30#699
5#69c
2#930
4#933
2#936
5#963
67#966
10#969
6#993
86#996
287#999
17#99c
4#99f
6#9c9
21#9cc
2#c36
9#c63
6#c69
9#c93
5#c96
39#c99
16#c9c
17#cc9
148#ccc
9#ccf
4#cfc
8#cff
2#f69
3#f96
9#fcc
6#fcf
4#ffc

So, 47 out of the possible 215 (#fff having been excluded), 1623 images total. This may include several size/shape variants of each source. For example, those that did have a black 'average' colour cached were:

img/a/b/dded2a9b8bddb768e012ba8040f4536d.l178481.576x473.m.png
img/a/b/dded2a9b8bddb768e012ba8040f4536d.l178481.720x591.png
img/a/b/low-8200111b64762a96c5f79ca0074baa71.l3097053.211x158.m.jpg
img/a/b/low-8200111b64762a96c5f79ca0074baa71.l3097053.264x198.jpg
img/a/b/low-8200111b64762a96c5f79ca0074baa71.l3097053.43x32.jpg
img/a/b/low-8200111b64762a96c5f79ca0074baa71.l3097053.43x32.m.jpg
img/a/b/low-energy-LED-fairy-light-9m-50-lamp-string-cool-white-solar-PV-powered-Maplin-N34HN-5-DHD.l3097053.43x32.jpg
img/a/h/G-DRIVE-2TB-landscape-letterbox-800w.l9005.248x177.jpg

The most common colours seem to be various shades of grey, plausible given the automatic white balance of most pictures when taken.