This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder – like Pinterest or Google Images.

manuelwieser

<p>This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder – like Pinterest or Google Images. It also enables you to use tiny thumbnails as placeholders. If you want to know how it works read the article <a href="https://manu.ninja/dominant-colors-for-lazy-loading-images" rel="nofollow ugc">Dominant Colors for Lazy-Loading Images</a>, where I explain the general concept.</p>
<p>To ensure the quality of the plugin please let me know if you encounter any issues. I will reply swiftly and fix them as soon as possible!</p>
<h3>Features</h3>
<ul>
<li>The plugin calculates the dominant color of an image upon upload.</li>
<li>All images attached to posts and pages are automatically replaced with placeholders and load as soon as they enter the viewport to save bandwidth.</li>
<li>Galleries added via the default <code>[gallery]</code> shortcode are also replaced and loaded as soon as they appear in the viewport.</li>
<li>A custom filter for lazy-loading thumbnails or featured images can be used in templates and themes (<code>apply_filters( 'dominant_colors', $image, $id )</code>).</li>
<li>Dominant colors can be calculated for all existing attachments in the plugin settings.
<ul>
<li>This has already been tested with thousands of images.</li>
<li>Until the calculation is done you can specify a fallback color for your placeholders.</li>
<li>All files that can’t be processed are listed during calculation and link to the particular attachment in the media library.</li>
</ul>
</li>
<li>You can choose between GIF and SVG placeholders.
<ul>
<li>SVG placeholders have the same pixel size and aspect ratio as the original images, instead of being a single square pixel. This way responsive images do not need a wrapper for preserving the original aspect ratio.</li>
<li>GIF placeholders are small and have great browser compatibility. They also enable you to use tiny thumbnails as described on <a href="https://manu.ninja/dominant-colors-for-lazy-loading-images" rel="nofollow ugc">manu.ninja</a> for your images.</li>
<li>You can set the resolution of tiny thumbnails to 3×3 pixels (120 bytes), 4×4 pixels (128 bytes) or 5×5 pixels (204 bytes).</li>
</ul>
</li>
<li>The plugin is compatible with <a href="https://co.wordpress.org/plugins/ricg-responsive-images/" rel="nofollow ugc">RICG Responsive Images</a>, which has been added to WordPress 4.4 as default functionality.</li>
</ul>
<h3>Demo</h3>
<p>You can see the plugin live at <a href="http://www.karriere.at/blog/" rel="nofollow ugc">http://www.karriere.at/blog/</a>.</p>


Alternatives to Dominant Colors Lazy Loading

Top alternatives