webp images issue

  • 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 Richard Vencu

    (@rvencu)

    and this is the problem:

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

    Thread Starter Richard Vencu

    (@rvencu)

    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)

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

    Thread Starter Richard Vencu

    (@rvencu)

    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)
  • The topic ‘webp images issue’ is closed to new replies.