Smart Loading

Working with Smart Loading, Lazy Load, Lazy Load Blurred Image, and Lazy Load Color.
Learn how to improve gallery loading performance with Essential Grid's Smart Loading tools in this guide.

Table of Contents

• Smart Loading
• • Lazy Load
  • Lazy Load Blurred Image
  • Lazy Load Color

Smart Loading

The Smart Loading panel helps optimize gallery performance by controlling how images are loaded on the page.

These settings can reduce page load time, improve user experience, and decrease bandwidth usage, especially when working with large galleries.
The Smart Loading panel contains three main options:

• Lazy Load
• Lazy Load Blurred Image
• Lazy Load Color

Lazy Load

The Lazy Load option determines when gallery images should be loaded.
Two options are available:

• Off
• On

Off

When Lazy Load is disabled, all gallery images load immediately when the page opens.
Characteristics:

• All images are loaded at once.
• Higher bandwidth usage.
• Slower initial page loading for large galleries.

On

When Lazy Load is enabled, images load only when they become visible in the visitor's viewport.
Characteristics:

• Faster page loading.
• Reduced bandwidth usage.
• Better performance on mobile devices.
• Improved browsing experience for large galleries.

Example

If a gallery contains 100 images:

• With Lazy Load Off, all 100 images start loading when the page opens.
• With Lazy Load On, only the visible images load first, while the remaining images load as the user scrolls.

Lazy Load Blurred Image

The Lazy Load Blurred Image option controls whether a blurred placeholder image is displayed while the original image is loading.
Two options are available:

• Off
• On

Off

When disabled, visitors will see only the loading placeholder color until the image finishes loading.
Characteristics:

• Simple loading experience.
• Uses the selected loading color as a placeholder.

On

When enabled, a blurred preview of the image appears before the full-resolution image loads.
Characteristics:

• Creates a smoother loading transition.
• Reduces perceived loading time.
• Provides a modern user experience.

Benefits

• Improves visual continuity.
• Makes galleries feel faster.
• Reduces sudden image appearance.

Lazy Load Color

The Lazy Load Color option determines the placeholder color shown while images are loading.
A color picker is available to select the desired color.

Color Settings

You can configure:

• Hex Color Value
• RGB Values
• Opacity
• Preset Colors

Hex Color

Enter a hexadecimal color code.
Examples:

• #FFFFFF = White
• #000000 = Black
• #FF0000 = Red
• #0000FF = Blue

RGB Values

You can manually define:

• Red (R)
• Green (G)
• Blue (B)

Example:

• R: 255
• G: 255
• B: 255

Produces a white placeholder color.

Opacity

The Opacity setting controls the transparency of the loading color.

• 100% = Fully visible
• 50% = Semi-transparent
• 0% = Fully transparent

Presets

Frequently used colors can be saved as presets for future use.

Recommended Settings

For Best Performance

For Best User Experience

Expected Result

After configuring Smart Loading:

• Gallery images load more efficiently.
• Page loading performance improves.
• Bandwidth usage is reduced.
• Visitors experience smoother image loading.
• Large galleries remain responsive across desktop, tablet, and mobile devices.

Updated on: 25/06/2026