Question

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

以下一代格式投放图像
推迟屏外图像

因此，以下一代格式的图像，我决定使用WebP，但需要包括后备功能，以便它们可在所有浏览器/设备中使用。

推迟屏幕外图像；我使用data-src和一些JS脚本将背景图像设置为data-src，JS替换了初始src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

的SRC

以下面的示例为例，如何将内联背景图像与带有回退功能的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

以下一代格式投放图像：使用图像CDN（例如imagekit.io），自动为您完成。大多数图像CDN都有免费的计划，非常适合测试和小型站点。

推迟屏外图像：使用现成的解决方案，例如lozad.js，可同时处理图像和背景图像。对于背景图像，您可以跳过设置初始内联样式的设置，因为元素已设置大小，并且在加载图像时不会引起任何重排。对于<img>，请使用空的<svg>作为初始src值，其中下面6 9中的viewBox定义了宽度（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 属性。

具有WebP后备和data-src的背景图片

3 个答案: