Bakgrunnsbilder er onde

Lær hvorfor du bør unngå bakgrunnsbilder på nettstedet ditt, hvordan du raskt finner bakgrunnsbilder og hvordan du fikser dette problemet

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

Bakgrunnsbilder er onde

De av dere som kjenner meg eller har hørt meg snakke, har kanskje hørt meg snakke om bakgrunnsbilder. De av dere som ikke har det: Jeg liker virkelig virkelig ikke bakgrunnsbilder. I denne artikkelen vil jeg raskt forklare hvorfor jeg ikke liker bakgrunnsbilder, hvordan man raskt finner sider med bakgrunnsbilder og hvordan man fikser dem!

Hvorfor bakgrunnsbilder er dårlige for Core Web Vitals

Når en nettside lastes inn har hvert element sin tid og sin plass. Med noen moderne teknikker som utsetting, forhåndslasting, asynkron lasting, planlegging, definering av fetchpriority osv. osv. kan vi få alle kritiske ressurser ganske godt under kontroll. Bortsett fra bakgrunnsbilder! 

Se på dette eksempelet fra virkeligheten:

Daglig, hovedsakelig på WordPress-nettsteder, ser jeg dette mønsteret. Alle de vanlige bildene er lazy loaded og noen bilder (i dette tilfellet de sosiale ikonene i bunnteksten) er bakgrunnsbilder. Kan du gjette hva som skjer?

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

Du har kanskje gjettet det: bakgrunnsbildene utenfor skjermen blir satt i kø for nedlasting før det langt viktigere 'hero.jpg'-bildet som vanligvis vil bli Largest Contentful Paint-elementet på siden.

lazy lcp with bg img

Men det er ikke alt!

Som jeg sa, bakgrunnsbilder er onde! Det er fordi, i tillegg til den merkelige prioriteringen de noen ganger får, mangler bakgrunnsbilder de kule funksjonene som vanlige bilder har!

  • Ingen lazy loading: det finnes ingen loading-attributt for bakgrunnsbilder
  • Ingen asynkron dekoding: det finnes ingen decoding-attributt for bakgrunnsbilder
  • Ingen fetchpriority: det finnes ingen fetchpriority -attributt for bakgrunnsbilder
  • Responsive bildekilder: image-set()-attributten for bakgrunnsbilder har ikke den samme kraften av funksjoner som du får med godt responsivt design.
  • Ingen width- og height-attributt. Å ikke kunne sette den enkle width- og height-attributten vil gjøre at du bruker omveier som krever kode (mer kode er alltid tregere enn mindre kode med samme kompleksitet!)
  • Ingen alt-tekst: selv om dette ikke

Finn raskt alle bakgrunnsbilder på en side

Så hvordan finner vi ut om en nettside har bakgrunnsbilder? Vel, du kunne sjekke nettverksinspektøren, filtrere på bilder, høyreklikke menylinjen, aktivere initiator-kolonnen og sjekke initiatoren, men det er langt enklere å lime inn denne koden i utviklerkonsollen.

Åpne enkelt utviklerkonsollen med Ctrl-Shift-I, naviger til konsoll-fanen og lim inn denne koden. Den vil vise deg alle bakgrunnsbildene på siden
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!');

Dette vil vise deg en pent formatert tabell med alle bakgrunnsbildenavnene og initiatorene

background img console table

Hvordan unngå bakgrunnsbilder

Bakgrunnsbilder er enkle å unngå. Hvordan du gjør dette avhenger av selve bildet. Det finnes grovt sett 2 metoder.

Ved «vanlige bilder»

Du ville ikke trodd det om jeg fortalte deg, men i de fleste tilfellene hvor jeg finner bakgrunnsbilder har bakgrunnsdelen av bildet ikke engang et formål. Bildene trenger bare å «være et sted på siden» og background-image:url() brukes feilaktig til dette formålet.
Hvis dette er tilfellet, legg bare til en vanlig bilde-tag og fjern bakgrunnsbildet fra stilarket.

Ved dekkbilder:

Dekkbilder er bilder som fullstendig dekker en overordnet beholder. Å bruke bakgrunnsbilder som dekkbilder gir på en måte mening fordi dette for lenge siden var den eneste måten å få dekkbilder på, og jeg antar folk bare holder seg til det de kjenner. Heldigvis finnes det bedre alternativer tilgjengelige for oss. Så la oss fikse det!
Ved dekkbilder fjerner du bare stilen   background-image: url(hero.jpg);background-size: cover; og plasserer et vanlig bilde i den samme beholderen og redigerer CSS-en til å se slik ut:

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


Compare your segments.

Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.

Analyze Segments >>

  • Device filtering
  • Route Analysis
  • Connection Types
Bakgrunnsbilder er ondeCore Web Vitals Bakgrunnsbilder er onde