How to Use Gradients as an Image Placeholder

Published December 14, 2016 by CSS Newbies.

The Gradify module is one that was created specifically for the purpose of using gradients as a placeholder for an image. The plugin finds the most prominent color in any image and uses them to create a responsive gradient that can be used as an image placeholder. If you’re not a huge fan of gradients, the module also gives you the option to use a single color (again, the color that is most prominent in the image) as an image placeholder.

Screen Shot 2016-12-11 at 4.08.29 PM

 

Gradify exists because of the long load time that can occur when loading images (particularly large, hi-res images). If the image placeholder that appears before the image is fully loaded reflects the main colors of the image, it’s less jarring for the user when the image finally loads. Additionally, it makes for a better user experience. By using a module like Gradify to achieve this effect rather than writing it yourself, you’re going to save a lot of time (if you’ve ever written code for a gradient, you know how much of a pain it can be). If you’re looking for a nice finishing touch to add to any of your projects, this module could be it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>