Use image and lazy-loading helpers

POM's loading helpers prevent contradictory combinations such as a high-priority image that remains lazy.

Example:

$attributes = array_merge(
    array(
        'src'      => esc_url( $url ),
        'alt'      => $alt,
        'width'    => $width,
        'height'   => $height,
        'decoding' => 'async',
    ),
    pom_get_image_loading_attributes( array(), 'eager', 'high' )
);

Use high priority only for a genuinely critical image, normally the principal above-the-fold image. Applying it to many images defeats browser prioritization.

Outside POM carousel cells, an image with data-src, nolazy, explicit loading or explicit fetchpriority is treated as already owning its loading strategy. Do not pass it through another lazy-loading transformer. Carousel source deferral, described below, takes precedence over native eager/lazy hints so off-screen cells cannot start downloads early. Images already owned by another data-src loader remain with that loader.

Always output width/height when known, choose a suitable WordPress image size, preserve srcset/sizes where possible and write contextual alternative text.

Media inside Flickity slides

Keep lazy backgrounds on the element that paints them, using class="lazy" and data-bg (or the supported high-density and multiple-background variants). POM waits for Flickity to position its cells, then loads backgrounds as they enter the visible area. Partially visible cells count; fully clipped cells, hidden panels and inactive fade slides remain deferred. Enclosing carousel cells and the browser viewport also participate in the visibility check.

The same behavior applies to Page Builder row background slideshows and Gutenberg Section background slideshows. When theme Lazy Load is enabled, an eager background setting loads the first image immediately and leaves later slideshow images deferred. Disabling theme Lazy Load retains immediate background loading. Preload only the initial critical image: an explicit preload starts its request independently of slide visibility.

Flickity initializes using the available dimensions and remeasures when images finish loading. It does not download every image to establish media readiness. When theme Lazy Load is enabled, the existing content loading pass moves image src and srcset URLs to data-src and data-srcset inside POM carousel cells. It also defers each picture > source candidate set. The existing LazyLoad library restores these attributes only when the image is visible in its cell, then the browser chooses the responsive candidate using the preserved sizes, media and type. Images retain loading="lazy" as a browser hint; the source deferral supplies the strict visibility boundary that the native hint lacks.

This covers core Image and dynamic POM Image blocks inside Gutenberg Carousel items, nested carousels, and legacy carousel/slider content rendered through WordPress content filters. Custom templates that bypass those filters must provide deferred source attributes through their own rendering integration; calling a frontend refresh cannot undo a request already started from src. Do not initialize a second general-purpose image loader over these cells.

Keep accurate width and height, or an explicit CSS aspect ratio, to reserve space. Transparent placeholders preserve known intrinsic dimensions, including sizes on art-directed picture sources. Unknown dimensions cannot reserve the final image's aspect ratio. Original image/picture markup is retained in noscript; this does not add carousel navigation without JavaScript.

Strict deferral trades advance loading for fewer image requests. An uncached slide may briefly show its reserved space as it enters view. An initial critical carousel image also waits for JavaScript unless preloaded separately; preload only the resource actually needed in the initial view. With theme Lazy Load disabled, normal image sources remain in the HTML.

The source transformation reuses the theme's existing DOM pass and adds no second content parser or attachment queries. It adds per-image attribute and ancestry work, placeholder/fallback HTML, and browser visibility checks while media remains pending. The JavaScript loader is shared by both editors.