Lazy Load with Generic Placeholder

By default, for lazy loading, we use a  low-quality representation of the image being lazy-loaded. 

If this behavior is  not desired, you can toggle this option ON. This will replace the low-quality image with a generic placeholder.

🔌 Enable the Feature

To enable this feature, navigate to WP  Dashboard > Optimole.

1

Open the Settings tab.

2

Expand the Advanced accordion and open the Lazyload panel.

3

Use the toggle to  enable Lazy Load with Generic Placeholder.

🚀 User Site and Image Impact

The default lazy load placeholder is transparent, which means that until the images are loaded, you cannot see exactly where the image appears. Using the color options for the placeholder, you can adjust the color and obtain a visible placeholder.

💡Result

🔄 Benefits and Trade-offs

Benefits

• Enhanced appearance of your website - instead of empty places on the page, users will see the colored placeholder.
• Hint on where images will appear - even if you're not using the colored placeholder, the default one will emphasize the presence of images.

Trade-offs

• Inaccurate size -  if this option is enabled could cause wrong size calculation for the final optimized images with some themes.

🧩 Use Cases

The feature can be very advantageous for multiple use cases, such as:

• Websites with Many Images - websites that feature numerous images, such as e-commerce platforms, galleries, or portfolios, can significantly benefit from lazy loading.
• Long-Scrolling Pages - websites with long-scrolling pages, like articles or social media feeds, can use lazy loading to optimize the loading of images below the initial viewport.
• Multimedia-Rich Websites - websites that include multimedia elements, such as videos, slideshows, or interactive graphics, can use lazy loading to prioritize the loading of visible content while delaying the loading of off-screen multimedia elements until the user scrolls to them.

⚙️ Related Settings

• Scale images & Lazy loading - doc
• Bypass Lazy Load for First Images - doc
• CSS Background Lazy Load - doc

🗂Useful Resources

You may find useful these guides:

• Website Speed Optimization: How to Do It in 2023 #Step-by-Step
• Lazy Loading Images: Complete Guide Plus 3 Ways to Implement It

🎥 Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed

Still looking for an answer? Contact us!