XeroWP
PixelFade – Lazyload with Low Quality Placeholder
PixelFade – Lazyload with Low Quality Placeholder

PixelFade – Lazyload with Low Quality Placeholder

0/5 (0 ratings) — active installs Updated Nov 10, 2026
imagesLazy Loadinglqipperformancevanilla-lazyload
Download v1.0
Image placeholder settings, including width, quality, and first-image controls.

Image placeholder settings, including width, quality, and first-image controls.

Lazy loading keeps pages fast, but it often leaves blank boxes where images will appear. Visitors can mistake those gaps for broken layout or slow loading. Lazyload with Low Quality Placeholder shows a recognizable, lightweight preview in each slot until the full image arrives.

Each preview is a Low Quality Image Placeholder (LQIP): a tiny version of the image from your Media Library, generated on upload, stored as a compact base64 data URI, and served through your lazy-load setup. When the full file loads, the preview fades into the sharp image so the change feels smooth rather than abrupt.

It integrates seamlessly with popular lazy loading plugins—including WP Rocket, Rocket Lazy Load, Optimole, Smush, and a3 Lazy Load—and includes a built-in standalone engine powered by the open-source vanilla-lazyload library whenever no third-party lazy-load plugin is present.

Features

  • Automatically generates LQIP data for new Media Library images.
  • Backfills placeholders for images uploaded before activation.
  • Multi-plugin support: automatically integrates with WP Rocket, Rocket Lazy Load, Optimole, Smush, or a3 Lazy Load.
  • Bundled standalone lazy-load engine using vanilla-lazyload when no host plugin is present.
  • Automatic engine auto-switching when supported plugins are activated or deactivated.
  • Supports JPEG, PNG, GIF, and WebP attachments.
  • Resolves responsive sizes, scaled originals, and CDN-hosted uploads.
  • Optionally adds a placeholder to the first above-the-fold image.
  • Preserves responsive srcset data and provides no-JavaScript fallbacks.
  • Applies an accessible reduced-motion-safe fade from preview to full image.
  • Caches local LQIP previews for YouTube placeholders (WP Rocket & Rocket Lazy Load).
  • Provides coverage statistics, engine detection checks, and a live preview.
  • Developer filters for custom attachment resolution and final image markup.

SEO and user experience

Lazy loading helps reduce initial page weight, but an empty placeholder can make a page feel unfinished. LQIP keeps the layout visually populated while deferred images load, helping users understand the page sooner.

The plugin preserves image dimensions and responsive sources. The optional first-image setting is disabled by default because replacing an above-the-fold image can affect Largest Contentful Paint (LCP). Test that option against your own Core Web Vitals data before enabling it in production.

Requirements

  • WordPress 6.9 or later. The built-in lazy-load engine rewrites the page through WordPress’s template enhancement output buffer, which shipped in 6.9.
  • PHP 7.4 or later.
  • Any supported lazy-load plugin (WP Rocket, Rocket Lazy Load, Optimole, Smush, or a3 Lazy Load), or use the built-in standalone engine.

Third-party software

  • vanilla-lazyload by Andrea Verlicchi (verlok)
    Source: https://github.com/verlok/vanilla-lazyload
    License: MIT License (https://opensource.org/licenses/MIT)
    Included under public/vendor/vanilla-lazyload/lazyload.min.js.