webp images issue

Resolved Richard Vencu
(@rvencu)

4 years, 11 months ago

I am using ShortPixel plugin to optimize my images and also generate and replace them in frontend with WebP versions for compatible browsers.

I noticed that the PICTURE element gets new classes as lazy and lazyy-hidden but wrongfully are not converted to lazy-loaded when they enter viewport. The inner IMG element is properly processed when scrolled into view but unfortunately the modern browsers will just ignore and display nothing.

This is a sample structure generated by the above plugin:

<picture width="70" height="70" class="sp-no-webp"><source srcset="https://dentfix.ro/wp-content/uploads/2018/09/ivory-implanturi.webp" type="image/webp"><source srcset="https://dentfix.ro/wp-content/uploads/2018/09/ivory-implanturi.png"><img src="https://dentfix.ro/wp-content/uploads/2018/09/ivory-implanturi.png" width="70" height="70" class="sp-no-webp" alt="icon implant dentar" srcset="https://dentfix.ro/wp-content/uploads/2018/09/ivory-implanturi.png"></picture>

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

(@rvencu)

and this is the problem:

Thread Starter

Richard Vencu

(@rvencu)

4 years, 11 months ago

Changing the following function to add picture element seems to solve the issue:

(function($) {
    var options = $.lazyLoadXT;

    options.selector += ',picture,video,iframe[data-src],embed[data-src]';
    options.videoPoster = 'data-poster';

    $(document).on('lazyshow', 'video', function(e, $el) {
        var srcAttr = $el.lazyLoadXT.srcAttr,
            isFuncSrcAttr = $.isFunction(srcAttr),
            changed = false;

        $el.attr('poster', $el.attr(options.videoPoster));
        $el.children('source,track')
            .each(function(index, el) {
                var $child = $(el),
                    src = isFuncSrcAttr ? srcAttr($child) : $child.attr(srcAttr);
                if (src) {
                    $child.attr('src', src);
                    changed = true;
                }
            });

        // reload video
        if (changed && typeof $(this).attr('preload') !== 'undefined' && 'none' != $(this).attr('preload')) {
            this.load();
        }
        $(this).removeClass('lazy-hidden');
    });

    $(document).on('lazyshow', 'embed', function(e, $el) {
        $(this).removeClass('lazy-hidden');
    });

    $(document).on('lazyshow', 'picture', function(e, $el) {
        $(this).removeClass('lazy-hidden');
    });

})(window.jQuery || window.Zepto || window.$);

Thread Starter

Richard Vencu

(@rvencu)

4 years, 11 months ago

it works in desktop and emulated mobiles but actually on real iPhone it still does not work…

Thread Starter

Richard Vencu

(@rvencu)

4 years, 11 months ago

Also some items were still generating problems. therefore I moved to Cloudflare Pro subscription to solve the WebP delivery problem.

Viewing 4 replies - 1 through 4 (of 4 total)