{"id":394549,"date":"2026-11-10T09:38:31","date_gmt":"2026-11-10T09:38:31","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/lazyload-with-low-quality-placeholder\/"},"modified":"2026-11-10T09:38:11","modified_gmt":"2026-11-10T09:38:11","slug":"pixelfade-lazyload-with-low-quality-placeholder","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/pixelfade-lazyload-with-low-quality-placeholder\/","author":687745,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"1.0","tested":"7.1.4","requires":"6.9","requires_php":"7.4","requires_plugins":null,"header_name":"PixelFade - Lazyload with Low Quality Placeholder","header_author":"Ali Hussain","header_description":"Replaces empty lazy-load placeholders with lightweight previews generated from the WordPress media library.","last_updated":"2026-11-10 09:38:11","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/profiles.wordpress.org\/alihs123\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":91,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"alihs123","date":"2026-11-10 09:38:11","revision":3794014}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3794014,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3794014,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3794014,"resolution":"1544x500","location":"assets","locale":"","width":1760,"height":576},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3794014,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3794014,"resolution":"1","location":"assets","locale":"","width":1280,"height":900},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3794014,"resolution":"2","location":"assets","locale":"","width":1280,"height":900},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3794014,"resolution":"3","location":"assets","locale":"","width":1280,"height":900},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3794014,"resolution":"4","location":"assets","locale":"","width":1280,"height":900}},"screenshots":{"1":"Image placeholder settings, including width, quality, and first-image controls.","2":"Media Library coverage statistics and the backfill tool.","3":"Side-by-side placeholder and full-image preview.","4":"Lazy-load engine status and integration checks."}},"plugin_section":[],"plugin_tags":[163,1464,283975,247,291774],"plugin_category":[50,54],"plugin_contributors":[283976],"plugin_business_model":[],"class_list":["post-394549","plugin","type-plugin","status-publish","hentry","plugin_tags-images","plugin_tags-lazy-loading","plugin_tags-lqip","plugin_tags-performance","plugin_tags-vanilla-lazyload","plugin_category-media","plugin_category-security-and-spam-protection","plugin_contributors-alihs123","plugin_committers-alihs123"],"banners":{"banner":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/banner-772x250.png?rev=3794014","banner_2x":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/banner-1544x500.png?rev=3794014","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/icon-128x128.png?rev=3794014","icon_2x":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/icon-256x256.png?rev=3794014","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/screenshot-1.png?rev=3794014","caption":"Image placeholder settings, including width, quality, and first-image controls."},{"src":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/screenshot-2.png?rev=3794014","caption":"Media Library coverage statistics and the backfill tool."},{"src":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/screenshot-3.png?rev=3794014","caption":"Side-by-side placeholder and full-image preview."},{"src":"https:\/\/ps.w.org\/pixelfade-lazyload-with-low-quality-placeholder\/assets\/screenshot-4.png?rev=3794014","caption":"Lazy-load engine status and integration checks."}],"raw_content":"\n

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<\/strong> shows a recognizable, lightweight preview in each slot until the full image arrives.<\/p>\n\n

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.<\/p>\n\n

It integrates seamlessly with popular lazy loading plugins\u2014including WP Rocket<\/strong>, Rocket Lazy Load<\/strong>, Optimole<\/strong>, Smush<\/strong>, and a3 Lazy Load<\/strong>\u2014and includes a built-in standalone engine<\/strong> powered by the open-source vanilla-lazyload<\/a> library whenever no third-party lazy-load plugin is present.<\/p>\n\n

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

    SEO and user experience<\/h4>\n\n

    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.<\/p>\n\n

    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.<\/p>\n\n

    Requirements<\/h4>\n\n
      \n
    • 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.<\/li>\n
    • PHP 7.4 or later.<\/li>\n
    • Any supported lazy-load plugin (WP Rocket, Rocket Lazy Load, Optimole, Smush, or a3 Lazy Load), or use the built-in standalone engine.<\/li>\n<\/ul>\n\n

      Third-party software<\/h3>\n\n
        \n
      • vanilla-lazyload<\/strong> by Andrea Verlicchi (verlok)\nSource: https:\/\/github.com\/verlok\/vanilla-lazyload\nLicense: MIT License (https:\/\/opensource.org\/licenses\/MIT)\nIncluded under public\/vendor\/vanilla-lazyload\/lazyload.min.js<\/code>.<\/li>\n<\/ul>\n\n\n
          \n
        1. Install the plugin ZIP through Plugins > Add New > Upload Plugin<\/strong>.<\/li>\n
        2. Activate Lazyload with Low Quality Placeholder<\/strong>.<\/li>\n
        3. Open Settings > LQIP<\/strong>.<\/li>\n
        4. The plugin automatically detects your active lazy-load plugin, or defaults to the built-in vanilla-lazyload engine.<\/li>\n
        5. Configure placeholder width and compression quality.<\/li>\n
        6. Run the backfill tool if the Media Library contains images uploaded before activation.<\/li>\n<\/ol>\n\n\n
          \n

          Does this replace my existing lazy-load plugin?<\/h3><\/dt>\n

          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.<\/p><\/dd>\n

          What happens if I activate or deactivate a lazy-load plugin?<\/h3><\/dt>\n

          The plugin automatically detects the change, switches to the appropriate engine, and displays a one-time admin notice explaining which adapter was selected.<\/p><\/dd>\n

          What problem does LQIP solve?<\/h3><\/dt>\n

          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.<\/p><\/dd>\n

          Are placeholders generated for existing images?<\/h3><\/dt>\n

          Use the backfill tool under Settings > LQIP<\/strong>. It processes the Media Library in small batches to avoid timeouts.<\/p><\/dd>\n

          Does it work with CDN or resized image URLs?<\/h3><\/dt>\n

          Yes. The plugin resolves WordPress intermediate sizes, -scaled<\/code> originals, and upload paths served from CDNs (such as Optimole CDN, Cloudflare, or Jetpack).<\/p><\/dd>\n

          Can developers customize the output?<\/h3><\/dt>\n

          Use lqip_final_image_html<\/code> (or legacy wrlqip_final_image_html<\/code>) to filter completed image markup. Use lqip_pre_attachment_id_from_url<\/code> (or legacy wrlqip_pre_attachment_id_from_url<\/code>) to provide an attachment ID for custom CDN or offload URLs.<\/p><\/dd>\n\n<\/dl>\n\n\n

          1.0<\/h4>\n\n
            \n
          • 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.<\/li>\n
          • Changed the text domain to pixelfade-lazyload-with-low-quality-placeholder<\/code> so it matches the plugin slug.<\/li>\n
          • Requires WordPress 6.9 or later.<\/li>\n
          • Product rename to Lazyload with Low Quality Placeholder.<\/li>\n
          • Multi-plugin architecture: added native adapters for WP Rocket, Rocket Lazy Load, Optimole, Smush, and a3 Lazy Load.<\/li>\n
          • Added built-in standalone lazy-load engine using vanilla-lazyload.<\/li>\n
          • Automatic engine switching on plugin activation\/deactivation with admin notices.<\/li>\n
          • Added canonical filters lqip_final_image_html<\/code> and lqip_pre_attachment_id_from_url<\/code> with legacy wrlqip_*<\/code> aliases.<\/li>\n
          • Updated settings page with active engine and multi-plugin status checks.<\/li>\n
          • Initial release.<\/li>\n
          • Added image LQIP generation, backfill, native lazy-load support, optional first-image handling, fade transitions, and YouTube previews.<\/li>\n<\/ul>","raw_excerpt":"Replaces empty lazy-load placeholders with lightweight, blurred previews generated from your WordPress media library.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/394549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=394549"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/alihs123"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=394549"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=394549"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=394549"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=394549"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=394549"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=394549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}