Фоновое изображение с отступлением WebP и data-src

Question

Поэтому я занимаюсь оптимизацией на своем веб-сайте, чтобы улучшить оценки Page Insights. Вот два момента, на которые я могу обратить внимание:

• Подавать изображения в форматах следующего поколения
• Отложить закадровые изображения

Так что изображения в форматах следующего поколения, я решил использовать WebP, но нужно включить запасные варианты, чтобы они работали во всех браузерах / устройствах.

Откладывать закадровые изображения; я использую data-src с небольшим количеством JS-скрипта, чтобы установить фоновое изображение как data-src, JS заменяет начальный SRC, который src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

Если взять в качестве примера приведенное ниже, как мне использовать встроенное фоновое изображение с 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 для data-src

<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, которое заботится как об изображениях, так и о фоновых изображениях. Для background-image вы можете пропустить установку начального встроенного стиля, так как для элемента установлен размер, и он не будет вызывать перекомпоновку при загрузке изображения. За <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, который все еще не поддерживает браузер, поэтому обязательно добавьте полифилл.

Удачи!

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>

Отложить закадровые изображения:

Добавить атрибут load =lazy в <img> элементы.

Answer 4

Вот мое решение. Это немного отличается от ответа Тамаша. С дополнительным классом вы можете установить размер изображения. Событие onload обеспечивает возможность конечного изображения. Вы загружаете изображение со скрытым элементом изображения и загружаете загруженное изображение с помощью js (с возвратом к jpg или png). Наконец, вы устанавливаете загруженное изображение с помощью jquery в качестве фона родительского div. Может быть, есть лучшее решение в этой области, но это работает для меня.