How do you do these placeholder for loading images based on color?

• blurhash

  41 14,997 5.5 C

  A very compact representation of a placeholder for an image.

  

There's also a cool lib by Wolt that creates a bit more fancy placeholders: https://github.com/woltapp/blurhash

• js-cloudimage-responsive

  1 69 2.9 JavaScript

  Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-responsive/issues

  

I can also recommend cloudimage.io (an image CDN - and a good free tier :-) which has their own little JS package with a version that uses Blurhash.https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-BLUR-HASH.md

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• color-thief

  17 12,185 0.0 JavaScript

  Grab the color palette from an image using just Javascript. Works in the browser and in Node.

I did this on a project (almost 10 years ago) using Color Thief ( https://lokeshdhakar.com/projects/color-thief/ ), but I couldn't tell you if it's the best way to do it now.

Suggest a related project