
Dominant Colors for Lazy-Loading Images - alchemical
https://manu.ninja/dominant-colors-for-lazy-loading-images
======
ChrisGranger
I really like this dominant color placeholder idea. I think I first noticed it
in use on Designspiration, but it seems to be gaining popularity and will
probably be standard operating procedure soon.

The difference between using a single color and a resized 3x3-pixel image is
subtle. I'd like to see 5x5 and 7x7 examples as well, assuming the file size
remains small enough. I wouldn't expect _too_ great an increase in bits, but
the amount of extra detail available might be worth it.

~~~
lorti
I've just ran your sizes through Node.js and a 5x5 GIF is just a bit larger
than a 3x3 GIF, but the 7x7 is already quite large as a data URI:

3x3
data:image/gif;base64,R0lGODlhAwACAPIFADEPDF0pEmouEW41JYhFNIhJMgAAAAAAACH5BAAAAAAAIf4dQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3MALAAAAAADAAIAAAMECBRTkgA7

5x5
data:image/gif;base64,R0lGODlhBQADAPMOABwEADsRDjwaG0ccClolDF4pEEwkIlo1NGguHGswF3g6H4Q6ELteLJxSQKFfTwAAACH5BAAAAAAAIf4dQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3MALAAAAAAFAAMAAAQLEISWhkBOEcPOKhEAOw==

7x7
data:image/gif;base64,R0lGODlhBwAFAPUiAB4FASEGAyIGAi8OCDgXCz4aGS8XICwbKDwdI08dCFEfC1kdEE0hEVYmD18jCFMkEFIhI1UrLmwvEWswEG8xFXEvEnUzE3g3IGJCT5RADZBEGYlLMpJOMaVPIrxbI6dWQqdhUaxpYMFpPwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAAIf4dQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3MALAAAAAAHAAUAAAYhwEBg8bEkCIABBLRxPBCRCoijmCAuHoxm8jB0RAdL5hEEADs=

