Question

我已使用gulp-webp将所有图像转换为WebP，并且正在使用Modernizr检查是否启用了webp，如果启用了此功能，请使用webp url创建一个新的img标签。据我在Google Page Speed上所看到的，它可以在台式机上正常工作，但是在移动设备上，它仍然显示Serve images in next-gen formats。

要在移动设备上工作还需要采取其他步骤吗？我在任何地方都找不到任何有关它的信息，而且我已经按照Modernizr所说的完全设置了Webp。

任何帮助将不胜感激。

Modernizr.on('webp', function (result) {
    $('.noscript').each(function() {
        let img = document.createElement('img');
        img.alt = this.getAttribute('data-alt');
        img.className = this.getAttribute('data-class');

        if (result) {
            img.src = this.getAttribute('data-webp');
        } else {
            img.src = this.getAttribute('data-original');
        }

        this.parentNode.insertBefore(img, this.nextSibling);
    });
});

然后我将在HTML中执行此操作

<noscript data-alt="Payment Logos" data-original="/images/common/payment-foot.png" data-webp="/dist/images/common/payment-foot.webp" data-class="mobileHide lazyload" class="noscript"> 
    <img src="/images/common/payment-foot.png" alt="" class="mobileHide">
</noscript>

WebP无法在移动设备上运行，但可以在台式机上运行吗？

0 个答案: