具有 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>