Earth Notes: On Website Technicals (2021-02)
Updated 2021-02-09 20:50 GMT.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:
count | colour |
---|---|
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.