Description
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
srcsetdata 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 underpublic/vendor/vanilla-lazyload/lazyload.min.js.
Screenshots
Installation
- Install the plugin ZIP through Plugins > Add New > Upload Plugin.
- Activate Lazyload with Low Quality Placeholder.
- Open Settings > LQIP.
- The plugin automatically detects your active lazy-load plugin, or defaults to the built-in vanilla-lazyload engine.
- Configure placeholder width and compression quality.
- Run the backfill tool if the Media Library contains images uploaded before activation.
FAQ
-
Does this replace my existing lazy-load plugin?
-
No. If you use WP Rocket, Rocket Lazy Load, Optimole, Smush, or a3 Lazy Load, this plugin enhances their existing output by inserting LQIP previews into their placeholders. If you don’t use any of them, the plugin’s built-in vanilla-lazyload engine handles lazy loading automatically.
-
What happens if I activate or deactivate a lazy-load plugin?
-
The plugin automatically detects the change, switches to the appropriate engine, and displays a one-time admin notice explaining which adapter was selected.
-
What problem does LQIP solve?
-
Standard lazy loading can leave an empty or generic placeholder before an image enters the viewport. LQIP displays a recognizable, lightweight preview during that interval.
-
Are placeholders generated for existing images?
-
Use the backfill tool under Settings > LQIP. It processes the Media Library in small batches to avoid timeouts.
-
Does it work with CDN or resized image URLs?
-
Yes. The plugin resolves WordPress intermediate sizes,
-scaledoriginals, and upload paths served from CDNs (such as Optimole CDN, Cloudflare, or Jetpack). -
Can developers customize the output?
-
Use
lqip_final_image_html(or legacywrlqip_final_image_html) to filter completed image markup. Uselqip_pre_attachment_id_from_url(or legacywrlqip_pre_attachment_id_from_url) to provide an attachment ID for custom CDN or offload URLs.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“PixelFade – Lazyload with Low Quality Placeholder” is open source software. The following people have contributed to this plugin.
Contributors
Translate “PixelFade – Lazyload with Low Quality Placeholder” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0
- Rewrote the built-in lazy-load engine to use the WordPress 6.9 template enhancement output buffer, so the plugin no longer opens its own output buffer.
- Changed the text domain to
pixelfade-lazyload-with-low-quality-placeholderso it matches the plugin slug. - Requires WordPress 6.9 or later.
- Product rename to Lazyload with Low Quality Placeholder.
- Multi-plugin architecture: added native adapters for WP Rocket, Rocket Lazy Load, Optimole, Smush, and a3 Lazy Load.
- Added built-in standalone lazy-load engine using vanilla-lazyload.
- Automatic engine switching on plugin activation/deactivation with admin notices.
- Added canonical filters
lqip_final_image_htmlandlqip_pre_attachment_id_from_urlwith legacywrlqip_*aliases. - Updated settings page with active engine and multi-plugin status checks.
- Initial release.
- Added image LQIP generation, backfill, native lazy-load support, optional first-image handling, fade transitions, and YouTube previews.