Baggrundsbilleder er onde

Lær hvorfor du bør undgå baggrundsbilleder på din hjemmeside, hvordan du hurtigt finder baggrundsbilleder, og hvordan du løser dette problem

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

Baggrundsbilleder er onde

De af jer, der kender mig eller har hørt mig tale, har måske hørt mig snakke om baggrundsbilleder. De af jer, der ikke har: Jeg bryder mig virkelig virkelig ikke om baggrundsbilleder. I denne artikel vil jeg hurtigt forklare, hvorfor jeg ikke kan lide baggrundsbilleder, hvordan man hurtigt finder sider med baggrundsbilleder, og hvordan man løser dem!

Hvorfor baggrundsbilleder er dårlige for Core Web Vitals

Når man indlæser en webside, har hvert element sin tid og sin plads. Med nogle moderne teknikker som deferring, preloading, async loading, scheduling, definition af fetchpriority osv. osv. kan vi få alle kritiske ressourcer nogenlunde under kontrol. Undtagen baggrundsbilleder! 

Overvej dette eksempel fra den virkelige verden:

Dagligt, hovedsageligt på WordPress-sider, ser jeg dette mønster. Alle de normale billeder er lazy loaded, og nogle billeder (i dette tilfælde de sociale ikoner i footeren) er baggrundsbilleder. Kan du gætte, hvad der sker?

<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 måske gættet det: de offscreen baggrundsbilleder sættes i kø til download før det langt vigtigere 'hero.jpg' billede som normalt bliver Largest Contentful Paint-elementet på siden.

lazy lcp with bg img

Men det er ikke alt!

Som jeg sagde, baggrundsbilleder er onde! Det skyldes, at udover den mærkelige prioritet, de nogle gange får, mangler baggrundsbilleder de smarte funktioner, som normale billeder får!

  • Ingen lazy loading: der er ingen loading-attribut for baggrundsbilleder
  • Ingen async decoding: der er ingen decoding-attribut for baggrundsbilleder
  • Ingen fetchpriority: der er ingen fetchpriority -attribut for baggrundsbilleder
  • Responsive billedkilder: image-set()-attributten for baggrundsbilleder har ikke den samme kraft af funktioner, som du får med godt responsivt design.
  • Ingen width- og height-attribut. Ikke at kunne sætte den simple width- og height-attribut vil tvinge dig til at bruge workarounds, der kræver kode (mere kode er altid langsommere end mindre kode med samme kompleksitet!)
  • Ingen alt-tekst: selvom dette ikke g

Find hurtigt alle baggrundsbilleder på en side

Så hvordan finder vi ud af, om en webside har baggrundsbilleder? Du kan tjekke netværksinspektøren, filtrere på billeder, højreklikke på menulinjen, aktivere initiator-kolonnerne og tjekke initiatoren, men det er langt nemmere at indsætte denne kode i devconsolen.

Åbn blot devconsolen med Ctrl-Shift-I, naviger til console-fanen og indsæt denne kode. Den vil vise dig alle baggrundsbillederne 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 dig en pænt formateret tabel med alle baggrundsbilledernes navne og initiatorer

background img console table

Hvordan man undgår baggrundsbilleder

Baggrundsbilleder kan nemt undgås. Hvordan man gør det, afhænger af selve billedet. Der er groft sagt 2 metoder.

I tilfælde af 'normale billeder'

Du ville ikke tro det, hvis jeg fortalte dig det, men i størstedelen af tilfældene, hvor jeg finder baggrundsbilleder, har baggrundsdelen af billedet ikke engang et formål. Billederne skal bare 'være et sted på siden', og background-image:url() misbruges til dette formål.
Hvis dette er tilfældet, skal du bare tilføje et normalt image-tag og fjerne baggrundsbilledet fra stylesheetet.

I tilfælde af cover-billeder:

Cover-billeder er billeder, der fuldstændigt dækker en overordnet container. At bruge baggrundsbilleder som cover-billeder giver på en måde mening, fordi det for lang tid siden plejede at være den eneste måde at lave cover-billeder på, og folk holder vel bare fast i det, de kender. Heldigvis er der bedre muligheder tilgængelige for os. Så lad os fikse det!
I tilfælde af cover-billeder skal du bare fjerne stilen   background-image: url(hero.jpg);background-size: cover; og placere et normalt billede i den samme container og redigere CSS'en, så den ser sådan ud:

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


Make decisions with Data.

You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.

Create Free Account >>

  • 100% Capture
  • Data Driven
  • Easy Install
Baggrundsbilleder er ondeCore Web Vitals Baggrundsbilleder er onde