Gradify
→
Gradify
Gradify is a module which finds the most prominent colors in any image, and produces a scalable, responsive CSS gradient.
This can provide a less jarring experience as image placeholders.
Gradify
4-color placeholders
1-color placeholders
The delay between HTTP objects being requested/recieved leaves
a timeframe where a webpage can look incomplete. Inspired by Soundclouds's use of random gradients, Gradify
can analyse an image for the 4 most common colors and create a gradient (or solid color) to act as a placeholder image.
Gradify can serve CSS rules, or the RGB vals and their directions.
NOTE: When modern browsers implement data-* and attr() in CSS3, a general rule can cover all the gradients, with any web framework supplying the required colors/directions directly onto an element, and should be less than 100B.
Gradify can serve CSS rules, or the RGB vals and their directions.
NOTE: When modern browsers implement data-* and attr() in CSS3, a general rule can cover all the gradients, with any web framework supplying the required colors/directions directly onto an element, and should be less than 100B.