CSS-Hintergrundbilder optimieren: schön, aber nicht zum Performance-Killer

Zuerst: Deko oder Inhalt?

Die wichtigste Entscheidung fällt vor jeder Optimierung: Ist das Bild dekorativ (Textur, Muster, Farbverlauf hinter Text) oder inhaltlich (das Produkt, das Motiv, worum es geht)?

• Dekorativ → CSS-background-image ist richtig. Kein alt-Text nötig, nicht in der Bildersuche relevant.
• Inhaltlich → <img> mit alt-Text. Es gehört zum Inhalt, soll gefunden werden und lässt sich responsiv per srcset ausliefern.

Ein häufiger Fehler ist, ein inhaltliches Hero-Foto als CSS-Hintergrund zu setzen — dann fehlt der alt-Text, es ist nicht in der Bildersuche, und es lässt sich schlechter beschleunigen.

Das Größen-Problem

Der klassische Performance-Killer: ein einziges 2500-px-Hintergrundbild, das an alle ausgeliefert wird — auch an das 400-px-Handy. Dazu entdeckt der Browser CSS-Hintergrundbilder oft spät, weil er erst das Element rendern muss, bevor er das Bild anfordert. Ein großes Hero-Hintergrundbild wird so schnell zum LCP-Element und dominiert die gemessene Ladezeit.

Lösung 1: gerätegerechte Größen per Media Query

Statt ein Riesenbild für alle: kleineren Bildschirmen ein kleineres Bild geben.

.hero {
  background-image: url("hero-800.jpg");
}
@media (min-width: 800px) {
  .hero { background-image: url("hero-1600.jpg"); }
}
@media (min-width: 1600px) {
  .hero { background-image: url("hero-2400.jpg"); }
}

Das Handy lädt nur die 800-px-Variante, der große Monitor die 2400-px-Version. Die Varianten erzeugst du wie üblich mit dem Skalier-Tool und komprimierst sie — als WebP sind sie noch kleiner.

Lösung 2: moderne Formate mit image-set()

Mit image-set() bietest du dem Browser mehrere Formate an, und er nimmt das beste, das er versteht — WebP für moderne, JPG als Fallback:

.hero {
  background-image: image-set(
    "hero.webp" type("image/webp"),
    "hero.jpg" type("image/jpeg")
  );
}

Lösung 3: für das wichtige Hero-Bild lieber ein img

Wenn der Hero-Hintergrund das zentrale, große Bild der Seite ist, ist ein echtes <img> oft die bessere Wahl: Es lässt sich preloaden (der Browser lädt es früh) und per srcset responsiv ausliefern — beides verbessert das LCP spürbar. Den Text legt man mit einem absolut positionierten Overlay darüber. Wie man das LCP-Bild gezielt beschleunigt, steht im Beitrag LCP-Bild preloaden.

Weitere Feinheiten

• background-size: cover füllt den Container ohne Verzerrung — Standard für Hero-Flächen.
• Textur/Muster als kleine kachelbare Datei mit background-repeat — winzig statt riesig.
• Farbverläufe möglichst als CSS-gradient statt als Bild — null Bytes zusätzliche Ladezeit.
• Fallback-Farbe setzen (background-color), damit die Fläche schon vor dem Bild sinnvoll aussieht.

Häufige Fragen

Quellen

MDN — background-image · MDN — image-set().