Фоновое изображение с запасным вариантом WebP и data-src
Итак, я занимаюсь оптимизацией своего веб-сайта, чтобы улучшить показатели Page Insights, два момента, на которые я могу обратить внимание:
- Подавайте изображения в форматах нового поколения
- Отложить закадровые изображения
Поэтому изображения в форматах следующего поколения я решил использовать WebP, но мне нужно включить запасные варианты, чтобы они работали во всех браузерах/устройствах.
Отложите закадровые изображения; Я использую data-src с небольшим количеством JS-скрипта, чтобы установить фоновое изображение в качестве источника данных, 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 для источника данных
<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>
Заранее спасибо!
Ответы 3
Подавайте изображения в формате следующего поколения: Используйте 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, который до сих пор не поддерживается браузером, поэтому обязательно добавьте полифилл.
Удачи!
Я только что придумал решение, которое может сработать
Тег уже выполняет свою работу, поэтому нам нужно немного 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>
Подавайте изображения в формате следующего поколения:
Преобразуйте изображения *.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>
Отложить закадровые изображения:
Добавьте атрибут loading=lazy к элементам <img>.