Title: Dominant Colors Lazy Loading
Author: manuelwieser
Published: <strong>April 5, 2016</strong>
Last modified: December 13, 2018

---

Search plugins

![](https://ps.w.org/dominant-colors-lazy-loading/assets/banner-772x250.jpg?rev=
1387288)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://s.w.org/plugins/geopattern-icon/dominant-colors-lazy-loading_723f22.
svg)

# Dominant Colors Lazy Loading

 By [manuelwieser](https://profiles.wordpress.org/manuelwieser/)

[Download](https://downloads.wordpress.org/plugin/dominant-colors-lazy-loading.0.8.0.zip)

 * [Details](https://pcd.wordpress.org/plugins/dominant-colors-lazy-loading/#description)
 * [Reviews](https://pcd.wordpress.org/plugins/dominant-colors-lazy-loading/#reviews)
 *  [Installation](https://pcd.wordpress.org/plugins/dominant-colors-lazy-loading/#installation)
 * [Development](https://pcd.wordpress.org/plugins/dominant-colors-lazy-loading/#developers)

 [Support](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/)

## Description

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 [Dominant Colors for Lazy-Loading Images](https://manu.ninja/dominant-colors-for-lazy-loading-images),
where I explain the general concept.

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!

### Features

 * The plugin calculates the dominant color of an image upon upload.
 * All images attached to posts and pages are automatically replaced with placeholders
   and load as soon as they enter the viewport to save bandwidth.
 * Galleries added via the default `[gallery]` shortcode are also replaced and loaded
   as soon as they appear in the viewport.
 * A custom filter for lazy-loading thumbnails or featured images can be used in
   templates and themes (`apply_filters( 'dominant_colors', $image, $id )`).
 * Dominant colors can be calculated for all existing attachments in the plugin 
   settings.
    - This has already been tested with thousands of images.
    - Until the calculation is done you can specify a fallback color for your placeholders.
    - All files that can’t be processed are listed during calculation and link to
      the particular attachment in the media library.
 * You can choose between GIF and SVG placeholders.
    - 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.
    - GIF placeholders are small and have great browser compatibility. They also
      enable you to use tiny thumbnails as described on [manu.ninja](https://manu.ninja/dominant-colors-for-lazy-loading-images)
      for your images.
    - 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).
 * The plugin is compatible with [RICG Responsive Images](https://co.wordpress.org/plugins/ricg-responsive-images/),
   which has been added to WordPress 4.4 as default functionality.

### Demo

You can see the plugin live at [http://www.karriere.at/blog/](http://www.karriere.at/blog/).

## Screenshots

[[

[[

[[

[[

## Installation

 1. Upload `dominant-colors-lazy-loading` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.

## FAQ

  Why are no dominant colors and tiny thumbnails calculated?

Please make sure that you have installed and activated the `imagick` PHP extension.

  How do I use the custom filter in my themes?

`$image = get_the_post_thumbnail( $post_id );
 $image = apply_filters( 'dominant_colors',
$image, get_post_thumbnail_id ( $post_id ) ); echo $image;

There is an optional third argument, you can use to specify the format. The available
formats are stored as constants in the `Dominant_Colors_Lazy_Loading` class. If 
you do not specify a format the filter will use the format you have chosen in the
plugin settings.

 * `FORMAT_GIF` will output GIF placeholders.
 * `FORMAT_SVG` will output SVG placeholders.
 * `FORMAT_WRAPPED` will output GIF placeholders with wrappers to preserve the aspect
   ratio of responsive images.
 * `

<

div class=”dcll-wrapper” style=”padding-top: 56.25%;”>
 <img class="dcll-image"…

 “

## Reviews

![](https://secure.gravatar.com/avatar/83bdcc45478c24eda86132fb5feafe363ab2055758e427785fda7f4a0064121e?
s=60&d=retro&r=g)

### 󠀁[Perfect](https://wordpress.org/support/topic/perfect-3095/)󠁿

 [Gemma](https://profiles.wordpress.org/gemmabusquets/) September 3, 2016

This is what I was searching for months! Thanks

![](https://secure.gravatar.com/avatar/496550474fbc71c05aa8a1c07b0650a5004b130fe2ad53bd173c93ed66a484d2?
s=60&d=retro&r=g)

### 󠀁[Working Well](https://wordpress.org/support/topic/working-well-43/)󠁿

 [spacetoast](https://profiles.wordpress.org/spacetoast/) September 3, 2016

Running it for about two weeks. So far no issues spotted.

 [ Read all 2 reviews ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/)

## Contributors & Developers

“Dominant Colors Lazy Loading” is open source software. The following people have
contributed to this plugin.

Contributors

 *   [ manuelwieser ](https://profiles.wordpress.org/manuelwieser/)

“Dominant Colors Lazy Loading” has been translated into 2 locales. Thank you to 
[the translators](https://translate.wordpress.org/projects/wp-plugins/dominant-colors-lazy-loading/contributors)
for their contributions.

[Translate “Dominant Colors Lazy Loading” into your language.](https://translate.wordpress.org/projects/wp-plugins/dominant-colors-lazy-loading)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/dominant-colors-lazy-loading/),
check out the [SVN repository](https://plugins.svn.wordpress.org/dominant-colors-lazy-loading/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/dominant-colors-lazy-loading/)
by [RSS](https://plugins.trac.wordpress.org/log/dominant-colors-lazy-loading/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

### 0.8.0

 * Added an option for `<noscript>` tags to the admin interface. The tags add a 
   lot of HTML, but they’re great for users with JavaScript disabled and can be 
   good for SEO (your mileage may vary).

### 0.7.0

 * Added a fallback for images without `wp-image-*` classes. The plugin can now 
   determine the attachment ID from the image URL, using `attachment_url_to_postid`.
   This should add support for plugins like WooCommerce, who don’t output their 
   images with `wp-image-*` classes. Thanks, [@ecksite](https://github.com/Lorti/dominant-colors-lazy-loading-wordpress-plugin/pull/21)!

### 0.6.3

 * The first user interaction triggers a viewport check, that means the first `keydown`,`
   mousedown`, `mousemove` or `touchstart` event. Each `scroll` and `resize` events
   still triggers a viewport check.

### 0.6.2

 * All filters are now disabled for Accelerated Mobile Pages when using Automattic’s
   [AMP](https://wordpress.org/plugins/amp/) plugin.

### 0.6.1

 * Style attributes set for SVG placeholders are now purged after loading the original
   images. This fixes an issue where the background color is visible behind transparent
   PNGs.

### 0.6.0

 * Added all the functionality needed for tiny thumbnails, including tests. Looking
   forward to any issues that will inevitably occur 😉

### 0.5.7

 * Prior to this version wrappers created by the custom filter via `FORMAT_WRAPPED`
   were removed from the page after image load. This caused some page jumping, which
   is why they are now left untouched.

### 0.5.6

 * Added an optional argument for specifying the placeholder format the custom filter
   returns.
 * Added a third format (only available via the custom filter) that automatically
   wraps responsive images so that the placeholder has the right aspect ratio.

### 0.5.5

 * All files that can’t be processed are now listed during calculation and link 
   to the particular attachment in the media library.

### 0.5.4

 * Calculation of missing colors should now be able to scale up to millions of images.
 * Admin interface is now split into a tab for placeholder settings and a tab for
   calculation of missing colors.
 * Replaced placeholders now trigger a viewport check, to see if relayout affected
   the position of any images.

### 0.5.3

 * Fixed a bug in displaying whether calculation of an image failed or succeeded.

### 0.5.2

 * Portuguese translation added by Pedro Mendonça.
 * Simple test suite for admin functions added.
 * Changed all `[]` array literals to the classic `array()` for compatibility.

### 0.5.1

 * Admin interface now shows an error if no ImageMagick PHP extension was found.
 * Admin interface is now ready for translation. There is a `.pot` file, go crazy
   😉
 * German translations for the admin interface added.

### 0.5.0

 * Added a bulk operation in the settings for calculating missing dominant color
   meta values for existing images. Until recently colors were only calculated upon
   initial upload of an image.

### 0.4.0

 * Filter for lazy-loading images in custom templates and themes added.
 * Added an option to specify a fallback color if no dominant color was found.

### 0.3.0

 * Added an option to use SVG placeholders as described by [Shaw](http://codepen.io/shshaw/post/responsive-placeholder-image).
   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.
 * Images with no dominant color stored in the database are now automatically skipped.

### 0.2.2

 * Fixed a bug where responsive images weren’t revealed properly.

### 0.2

 * Galleries added via the default `[gallery]` shortcode are now also lazy loaded
   while showing the dominant color of each image as a placeholder.

### 0.1

 * Initial release — plugin seems to work 😉

## Meta

 *  Version **0.8.0**
 *  Last updated **8 years ago**
 *  Active installations **100+**
 *  WordPress version ** 4.4 or higher **
 *  Tested up to **5.0.30**
 *  Languages
 * [English (US)](https://wordpress.org/plugins/dominant-colors-lazy-loading/), 
   [German](https://de.wordpress.org/plugins/dominant-colors-lazy-loading/), and
   [Portuguese (Portugal)](https://pt.wordpress.org/plugins/dominant-colors-lazy-loading/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/dominant-colors-lazy-loading)
 * Tags
 * [images](https://pcd.wordpress.org/plugins/tags/images/)[javascript](https://pcd.wordpress.org/plugins/tags/javascript/)
   [Lazy Loading](https://pcd.wordpress.org/plugins/tags/lazy-loading/)[Pinterest](https://pcd.wordpress.org/plugins/tags/pinterest/)
 *  [Advanced View](https://pcd.wordpress.org/plugins/dominant-colors-lazy-loading/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  2 5-star reviews     ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/reviews/)

## Contributors

 *   [ manuelwieser ](https://profiles.wordpress.org/manuelwieser/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/dominant-colors-lazy-loading/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://manu.ninja/)