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.