Dominant Colors for Lazy-Loading Images

Dominant Colors for Lazy-Loading Images(manu.ninja)

5 points by alchemical 10 years ago | 2 comments

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 10 years ago | |

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=