0Отзывчивый ленивый фон вместо CSS-фонового изображения

Недавно я работал над обновлением/капитальным ремонтом как моих различных веб-сайтов, так и серверной части сервера.. В рамках этого процесса я старался убедиться, что все использует новейшие стандарты для максимизации производительности и совместимости.. Одной из лучших особенностей последних версий WordPress является встроенная поддержка адаптивных изображений, где атрибут imgset="" используется для предоставления альтернативных размеров изображений в группе, чтобы браузер мог использовать наиболее подходящий.. В сочетании с асинхронной загрузкой и отложенной загрузкой это может ускорить загрузку страниц, сохраняя при этом приятный вид для всех посетителей.. Однако CSS не принял эти новые функции, поэтому с фоновыми изображениями работать гораздо сложнее.. Хотя это можно сделать…

It is pos­sible to use media quer­ies in CSS to provide an appro­pri­ately sized image for most vis­it­ors. How­ever here is no equi­val­ent of async or lazy load­ing for CSS so your (prob­ably large) image will hold up page ren­der­ing which can make a huge dif­fer­ence on a slow con­nec­tion. The pagespeed insights tool for one of my sites was see­ing a render time of around 1 second vs 4 seconds just by adding the back­ground image. 4 seconds it too long, but I did­n’t want to lose the back­ground image, so I wondered if it was pos­sible to have a div ele­ment with a nor­mal lazy loaded image in it and to fit that to the page and put it behind every oth­er element.

I did some search­ing and found a CoreWeb­Vi­tals art­icle by Arjen which talked about the exact same issues I was hav­ing. How­ever the code provided there did­n’t do what I needed, it appears to be for a div that is meant to be part of the flow of a page.
After some play­ing around on code­pen and a help­ful sug­ges­tion by luuk­vhoudt on stack­over­flow that google turned up I was even­tu­ally able to get code that worked to make a nor­mal image in html act just like a back­ground image. Like a css back­ground I was able to set all of the desir­able behaviours…

• Image fills full width of screen
• Image keeps aspect ratio
• Image is ver­tic­ally centred (so top and bot­tom are cropped)
• Image stays in pos­i­tion when scrolling page down
• Image does­n’t inter­fere with any oth­er ele­ments on the page
• Even when view­port becomes ‘por­trait’ the image still fills the whole width and height and keeps the cor­rect aspect ratio
• Благодаря HTML the image loads async and lazy so does­n’t impact performance

The code needed was actu­ally sur­pris­ingly easy. The HTML code goes imme­di­ately inside and at the top of the body tag, and then a little CSS does the rest. Note that you should put the smal­lest image in the src=”” attrib­ute. I’ve also used aria-hidden=“true” to tell screen-read­ers to ignore our image since it’s meant to be a background


<div id="bg-container">
<img src="/path/to/bg768.jpg" aria-hidden="true" alt="background" decoding="async" loading="lazy" srcset="/path/to/bg768.jpg 768w, /path/to/bg1024.jpg 1024w" >
</div>


Next the CSS

#bg-container
{
display: inline-block;
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
top: 0px;
left: 0px;
}
#bg-container img
{
width: 100%;
height: 100%;
object-fit: cover;
}