Obrazy tła to zło

Dowiedz się, dlaczego warto unikać obrazów tła na swojej stronie, jak szybko znaleźć obrazy tła i jak naprawić ten problem

Arjen Karel - linkedin

Last update: 2024-11-27

Obrazy tła to zło

Ci z was, którzy mnie znają lub słyszeli moje wystąpienia, mogli słyszeć, jak mówię o obrazach tła. Ci z was, którzy nie słyszeli: naprawdę, naprawdę nie lubię obrazów tła. W tym artykule szybko wyjaśnię, dlaczego nie lubię obrazów tła, jak szybko znaleźć strony z obrazami tła i jak je naprawić!

Table of Contents!

Obrazy tła to zło
Dlaczego obrazy tła są złe dla Core Web Vitals
- Rozważ ten przykład z życia wzięty:
- Ale to nie wszystko!
Szybko znajdź wszystkie obrazy tła na stronie
Jak unikać obrazów tła
- W przypadku „zwykłych obrazów”
- W przypadku obrazów cover:

Dlaczego obrazy tła są złe dla Core Web Vitals

Podczas ładowania strony internetowej każdy element ma swój czas i miejsce. Dzięki nowoczesnym technikom, takim jak odraczanie, preloading, ładowanie asynchroniczne, planowanie, definiowanie fetchpriority itp., możemy w dużej mierze kontrolować wszystkie krytyczne zasoby. Z wyjątkiem obrazów tła!

Rozważ ten przykład z życia wzięty:

Na co dzień, głównie na stronach WordPress, widzę ten wzorzec. Wszystkie normalne obrazy są ładowane leniwie, a niektóre obrazy (w tym przypadku ikony społecznościowe w stopce) to obrazy tła. Czy zgadniesz, co się dzieje?

<html>
<head>
    <style>
        footer {
            /* a margin of 100 vh wil make the footer off-screen !*/
            margin-top: 100vh;
            >.social {
                >.facebook {background-image: url('img/facebook.jpg');}
                >.instagram {background-image: url('img/instagram.jpg');}
                >.linkedin {background-image: url('img/linkedin.jpg');}
                >.email {background-image: url('img/email.jpg');}
            }
        }
    </style>
</head>
<body>
    <!-- yes this image is lazy loaded, because tiny mistakes happen! -->
    <img loading="lazy" src="img/hero.jpg"></img>
    <footer>
        <div class="social">
            <span class="facebook"></span>
            <span class="instagram"></span>
            <span class="linkedin"></span>
            <span class="email"></divspan
        </div>
    </footer>
</body>
</html>

Pewnie zgadłeś: obrazy tła poza ekranem są kolejkowane do pobrania przed znacznie ważniejszym obrazem 'hero.jpg' który zazwyczaj staje się elementem Largest Contentful Paint na stronie.

Ale to nie wszystko!

Jak mówiłem, obrazy tła to zło! Dzieje się tak, ponieważ oprócz dziwnego priorytetu, jaki czasami otrzymują, obrazom tła brakuje fajnych funkcji, które mają normalne obrazy!

Brak lazy loading: dla obrazów tła nie ma atrybutu loading
Brak asynchronicznego dekodowania: dla obrazów tła nie ma atrybutu decoding
Brak fetchpriority: dla obrazów tła nie ma atrybutu fetchpriority
Responsywne źródła obrazów: Atrybut image-set() dla obrazów tła nie ma takiej samej mocy funkcji, jaką uzyskujesz przy dobrym responsywnym designie.
Brak atrybutów width i height. Brak możliwości ustawienia prostych atrybutów width i height zmusi cię do stosowania obejść wymagających kodu (więcej kodu jest zawsze wolniejsze niż mniej kodu o tej samej złożoności!)
Brak tekstu alt: chociaż to nie

Szybko znajdź wszystkie obrazy tła na stronie

Jak więc dowiedzieć się, czy strona internetowa ma obrazy tła? Możesz sprawdzić inspektor sieci, przefiltrować obrazy, kliknąć prawym przyciskiem na pasku menu, włączyć kolumnę inicjatora i sprawdzić inicjatora, ale znacznie łatwiej jest wkleić ten kod do konsoli deweloperskiej.

Po prostu otwórz konsolę deweloperską za pomocą Ctrl-Shift-I, przejdź do zakładki konsoli i wklej ten kod. Pokaże ci wszystkie obrazy tła na stronie

let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

Wyświetli to czysto sformatowaną tabelę ze wszystkimi nazwami obrazów tła i inicjatorami

Jak unikać obrazów tła

Obrazów tła można łatwo uniknąć. Sposób zależy od samego obrazu. Istnieją z grubsza 2 metody.

W przypadku „zwykłych obrazów”

Nie uwierzysz, ale w większości przypadków, w których znajduję obrazy tła, część tła obrazu nie ma nawet celu. Obrazy po prostu „muszą być gdzieś na stronie”, a background-image:url() jest niewłaściwie używane w tym celu.
Jeśli tak jest, po prostu dodaj normalny tag obrazu i usuń obraz tła z arkusza stylów.

W przypadku obrazów cover:

Obrazy cover to obrazy, które całkowicie pokrywają kontener nadrzędny. Używanie obrazów tła jako obrazów cover ma pewien sens, ponieważ dawno temu był to jedyny sposób na uzyskanie obrazów cover i chyba ludzie trzymają się tego, co znają. Na szczęście mamy do dyspozycji lepsze opcje. Więc naprawmy to!
W przypadku obrazów cover po prostu usuń styl background-image: url(hero.jpg); background-size: cover; i umieść normalny obraz w tym samym kontenerze i edytuj CSS, aby wyglądał tak:

<style>
.img-container {
    position: relative;
    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       z-index: 1;
   }
}
<style>

<div class="img-container">
  <img 
       height="500" 
       width="300" 
       decoding="async" 
       loading="lazy" 
       src="hero.jpg"
       srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
       alt="alt text"
       fetchpriority="low"
  >
</div>