Lazy Load Placeholders

By default, the lazy loader will use blank placeholders. If the plugin can determine the image dimensions, it will use either a blank PNG or SVG of the same dimensions as the original. This helps browsers avoid "content re-flow" and allows them to better choose an appropriate image size on mobile devices. This works well for the majority of sites, but some feel that it gives a poor experience for visitors as they'll just see blank space if your images don't load quite quick enough. The visitor might scroll right by without ever seeing your image.

To combat this, we apply a CSS background gradient to indicate that an image is inbound. If you would like to change this behavior, the eio_lazy_load_gradient filter is available. To completely disable it, use this code:

add_filter( 'eio_lazy_load_gradient', '__return_false' );

With ExactDN/Easy IO enabled, you can use LQIP (low-quality image placeholders). This tells the plugin to generate a very small, blurred version of each image, so that your visitors know an image is inbound. This works great when the images are larger, but what if the original images are already pretty small? The plugin will then return a blank placeholder image, which will be very tiny, and still save on bandwidth.

There is one problem you might see on GTmetrix with LQIP enabled. If you have a bunch of images that are smallish, and all the same size, you'll get LQIPs that are all identical (blank images), but served from different urls. That means you have the same exact image being requested multiple times. While it will be fast, it's not ideal, and GTmetrix is sure to let you know if your page falls into this boat.

You can also disable LQIP via an override in your wp-config.php file (somewhere after the first line with the opening PHP tag, and before the line that says to stop editing):

define( 'EWWW_IMAGE_OPTIMIZER_USE_LQIP', false );

Still need help? Contact Us Contact Us