具有 WebP 回退和数据源的背景图像

Question

因此，我正在对我的 web 网站进行一些优化工作以提高 Page Insights 分数，我可以解决的两点是：-

• 以下一代格式提供图像
• 延迟屏幕外图像

所以下一代格式的图像，我决定使用 WebP，但需要包含回退，以便它们在所有浏览器/设备中工作。

延迟屏幕外图像； 我正在使用带有一些 JS 脚本的数据源来将背景图像设置为数据源，JS 替换了初始 SRC，即data-src src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

以下面为例，我 go 如何将内联背景图像与 WebP 结合使用，同时延迟离屏图像？

HTML

<div id="working-bg" class="parallax" data-src="/wp-content/uploads/2016/08/silva-planning-parralax.jpg" style="background-image: url(/wp-content/uploads/2016/08/silva-planning-parralax.jpg)"></div>

用于数据源的 JS

<script>
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    } }

    var imgDeferSpan = document.querySelectorAll('span[data-src]');
    var styleSpan = "background-image: url({url})";
    for (var i = 0; i < imgDeferSpan.length; i++) {
        imgDeferSpan[i].setAttribute('style', styleSpan.replace("{url}", imgDeferSpan[i].getAttribute('data-src')));
    }

    var imgDeferDiv = document.querySelectorAll('div[data-src]');
    var styleDiv = "background-image: url({url})";
    for (var i = 0; i < imgDeferDiv.length; i++) {
        imgDeferDiv[i].setAttribute('style', styleDiv.replace("{url}", imgDeferDiv[i].getAttribute('data-src')));
    }

}

window.onload = init;

</script>

提前致谢！

Answer 1

以下一代格式提供图像：使用像 imagekit.io 这样的图像 CDN 并自动为您完成。 大多数图像 CDN 都有一个免费计划，非常适合测试和小型站点。

延迟屏幕外图像：使用现成的解决方案，如 lozad.js，它同时处理图像和背景图像。 对于背景图像，您可以跳过设置初始内联样式，因为元素已设置其大小，并且在图像加载时不会导致任何回流。 对于<img> s 使用一个空的<svg>作为初始src值，其中下面的viewBox中的6 9定义了宽度 (6) 和高度 (9) 之间的关系 => 更改这些值以适应您的上下文。

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E

请注意，lozad.js 使用的 Intersection Observer API 仍然缺乏浏览器支持，因此请务必添加 polyfill。

祝你好运！

Answer 2

我刚刚想出了一个可能有效的解决方案标签已经完成了工作，所以我们只需要一点点 js。 只需将标签放置在您想要显示背景图像的对象内display: none; 并做魔术：

<div id="bghere" style="height: 400px; width: 400px;">
    <h1>Some content</h1>
    <picture style="display:none;">
        <source srcset="picture.webp"/>
        <img src="picture.jpg"/>
    </picture>
</div>
<script>
function init(){
    var bghere = document.getElementById('bghere');
    bghere.style.backgroundImage = "url("+bghere.getElementsByTagName('picture')[0].getElementsByTagName('img')[0].currentSrc.toString()+")";
}
</script>

Answer 3

以下一代格式提供图像：

将 *.jpeg 或 *.png 图像转换为 *.jpeg.webp 或 *.png.webp 并配置服务器以有条件地交付 webp。

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} (?i)(.*)\.(jpe?g|png)$
    RewriteCond %{DOCUMENT_ROOT}%1\.%2.webp -f
    RewriteRule (?i)(.*)\.(jpe?g|png)$ %1\.%2\.webp [T=image/webp,E=webp:1,L]
    <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_webp
    </IfModule>
</IfModule>

延迟屏幕外图像：

为<img>元素添加 loading=lazy 属性。

Answer 4

这是我的解决方案。 这与 Tamás 的回答有点不同。 使用可选的 class 包含您可以设置图像的大小。 onload 事件确保了最终图像的能力。 您加载带有隐藏图片元素的图像，并使用 js 获取加载的图像（回退为 jpg 或 png）。 最后，您将带有 jquery 的加载图像设置为父 div 的背景。 也许该领域有更好的解决方案，但这对我有用。

 function makeBgImage( img ){ let srcImage; if ( typeof img.currentSrc === "undefined" ){ //Old browser srcImage = img.src; }else{ //Modern browser srcImage = img.currentSrc; } let ref = $(img).parents('div:first'); ref.css('background', 'url(' + srcImage + ')'); if( ref.hasClass('contain') ){ ref.css('background-size', 'contain'); }else{ ref.css('background-size', 'cover'); } ref.css('background-position', 'center'); ref.css('background-repeat', 'no-repeat'); }

 .hidden{display: none;}.img-container{ width: 100%; padding-top: 62.5%; /* 8:5 Aspect Ratio */ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="img-container"> <picture class="hidden"> <source srcset="image.webp" type="image/webp"> <img onload="makeBgImage(this)" alt="Image" src="image.png"> </picture> </div>