Bakgrundsbilder är onda

Lär dig varför du bör undvika bakgrundsbilder på din webbplats, hur du snabbt hittar bakgrundsbilder och hur du åtgärdar problemet

Arjen Karel - linkedin

Last update: 2024-11-27

Bakgrundsbilder är onda

De av er som känner mig eller har hört mig tala kanske har hört mig prata om bakgrundsbilder. De av er som inte har det: jag tycker verkligen verkligen inte om bakgrundsbilder. I den här artikeln kommer jag snabbt förklara varför jag inte tycker om bakgrundsbilder, hur man snabbt hittar sidor med bakgrundsbilder och hur man åtgärdar dem!

Table of Contents!

Bakgrundsbilder är onda
Varför bakgrundsbilder är dåliga för Core Web Vitals
- Betrakta detta verkliga exempel:
- Men det är inte allt!
Hitta snabbt alla bakgrundsbilder på en sida
Hur man undviker bakgrundsbilder
- I fallet med 'vanliga bilder'
- I fallet med cover-bilder:

Varför bakgrundsbilder är dåliga för Core Web Vitals

När en webbsida laddas har varje element sin tid och sin plats. Med moderna tekniker som deferring, preloading, async loading, scheduling, fetchpriority och så vidare kan vi få alla kritiska resurser ganska bra under kontroll. Förutom bakgrunds bilder!

Betrakta detta verkliga exempel:

Dagligen, mestadels på WordPress-sajter, ser jag detta mönster. Alla vanliga bilder är lazy loaded och vissa bilder (i det här fallet de sociala ikonerna i sidfoten) är bakgrundsbilder. Kan du gissa vad som händer?

<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 kanske gissade det: bakgrundsbilderna utanför skärmen köas för nedladdning före den mycket viktigare 'hero.jpg'-bilden som vanligtvis blir Largest Contentful Paint-elementet på sidan.

Men det är inte allt!

Som jag sa, bakgrundsbilder är onda! Det beror på att bakgrundsbilder, förutom den konstiga prioritet de ibland får, saknar de smarta funktionerna som vanliga bilder har!

Ingen lazy loading: det finns inget loading-attribut för bakgrundsbilder
Ingen async decoding: det finns inget decoding-attribut för bakgrundsbilder
Ingen fetchpriority: det finns inget fetchpriority -attribut för bakgrundsbilder
Responsiva bildkällor: Attributet image-set() för bakgrundsbilder har inte samma kraftfulla funktioner som du får med bra responsiv design.
Inget width- och height-attribut. Att inte kunna ställa in de enkla width- och height-attributen gör att du måste använda workarounds som kräver kod (mer kod är alltid långsammare än mindre kod med samma komplexitet!)
Ingen alt-text: även om detta inte

Hitta snabbt alla bakgrundsbilder på en sida

Så hur tar vi reda på om en webbsida har bakgrundsbilder? Jo, du kan kolla nätverksinspektören, filtrera på bilder, högerklicka på menyraden, aktivera initiator-kolumnen och kontrollera initiatorn, men det är mycket enklare att klistra in den här koden i dev-konsolen.

Öppna helt enkelt dev-konsolen med Ctrl-Shift-I, navigera till konsol-fliken och klistra in den här koden. Den visar dig alla bakgrundsbilder på sidan

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!');

Detta visar dig en snyggt formaterad tabell med alla bakgrundsbilders namn och initiatorer

Hur man undviker bakgrundsbilder

Bakgrundsbilder kan enkelt undvikas. Hur du gör detta beror på själva bilden. Det finns ungefär 2 metoder.

I fallet med 'vanliga bilder'

Du skulle inte tro det om jag berättade, men i majoriteten av fallen där jag hittar bakgrundsbilder har bakgrundsdelen av bilden inte ens ett syfte. Bilderna behöver bara 'finnas någonstans på sidan' och background-image:url() missbrukas för detta ändamål.
Om detta är fallet, lägg helt enkelt till en vanlig bild-tagg och ta bort bakgrundsbilden från stilmallen.

I fallet med cover-bilder:

Cover-bilder är bilder som helt täcker en överordnad container. Att använda bakgrundsbilder som cover-bilder är på sätt och vis logiskt eftersom detta länge var det enda sättet att få cover-bilder och jag antar att folk håller sig till det de kan. Lyckligtvis finns det bättre alternativ tillgängliga för oss. Så låt oss fixa det!
I fallet med cover-bilder, ta helt enkelt bort stilen background-image: url(hero.jpg);background-size: cover; och placera en vanlig bild i samma container och redigera CSS:en så att den ser ut så här:

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