HTML-Bilder oder CSS-Hintergrundbilder: Wann du was nutzt | We.Inc
Wähle zwischen <img> und background-image, schreibe Alt-Texte, verhindere Layout Shift, baue srcset und sizes, lade Bilder lazy und liefere WebP oder AVIF mit <picture> aus.
HTML-Bilder und CSS-Hintergrundbilder
Verwende ein <img>, wenn das Bild Inhalt ist: ein Produktfoto, ein Diagramm, ein Porträt. Gib ihm Alt-Text, width und height. Verwende ein CSS background-image, wenn das Bild Dekoration hinter Text ist. Ergänze srcset und sizes, damit Smartphones kleinere Dateien laden, und loading="lazy" für Bilder unterhalb des ersten Bildschirms, niemals für das Hero-Bild.
<img> oder background-image?
Frage
<img>
Trägt das Bild eine Bedeutung?
Ja, mit Alt-Text
Nein, nur Dekoration
Sollen Suchmaschinen es indexieren?
Ja
Wird selten erfasst
Responsive Dateien
srcset und sizes
image-set() oder Media Queries
Lazy Loading
loading="lazy"
Braucht ein Skript
Zuschnitt, um eine Box zu füllen
object-fit: cover
background-size: cover
Standardmäßig gedruckt
Ja
Meist nicht
Eine Entscheidungstabelle, ein srcset-Builder, der zeigt, welche Datei ein Smartphone oder Laptop laden würde, und bearbeitbare Beispiele für jedes Muster: Alt-Text, feste Abmessungen, Lazy Loading, ein schnelles Hero-Bild, Zuschnitt mit object-fit neben background-size, moderne Formate mit <picture> und responsive Hintergründe mit image-set().
Beginne mit der Entscheidungstabelle, um zwischen einem <img> und einem CSS-Hintergrund zu wählen.
Wenn du <img> verwendest, gib deine Bildbreiten in den srcset-Builder ein und wähle das Layout. Kopiere das erzeugte Tag.
Bewege die Regler für Bildschirmbreite und Pixeldichte, um zu sehen, welche Datei der Browser für jedes Gerät wählen würde.
Kopiere jedes weitere Muster, das du brauchst, aus den Beispielen, die alle live neben ihrem Code dargestellt werden.
Setze die Attribute width und height immer auf die echte Pixelgröße des Bildes. CSS kann es trotzdem skalieren; die Attribute lassen den Browser den richtigen Platz reservieren, bevor die Datei ankommt.
Markiere das größte Bild im ersten Bildschirm mit fetchpriority="high" und lass es eager. Lazy Loading für dieses Bild verzögert das größte Rendering der Seite.
Lass alt bei rein dekorativen Bildern leer (alt=""), damit Screenreader sie überspringen, statt alt ganz wegzulassen, denn dann lesen manche Screenreader den Dateinamen vor.
Exportiere Fotos in zwei oder drei Breiten, etwa 480, 960 und 1600 Pixel. Mehr Größen helfen selten und machen Builds langsamer.
Häufige Fragen
Ist background-image schlecht für SEO?
Suchmaschinen indexieren Bilder in <img>-Elementen weit zuverlässiger als solche, die per CSS gesetzt sind. Wenn ein Bild in der Bildersuche erscheinen oder deinen Inhalt beschreiben soll, setze es in ein <img> mit gutem Alt-Text. Dekorative Hintergründe verlieren nichts dadurch, dass sie in CSS stehen.
Was sollte im Alt-Text stehen?
Beschreibe in einem kurzen Satz, was das Bild zeigt und in diesem Zusammenhang wichtig ist. Bei einem Produktfoto kann das das Produkt und seine Farbe sein, bei einem Diagramm die wichtigste Erkenntnis. Lass Formulierungen wie Bild von weg. Ist das Bild ein Link, beschreibe, wohin der Link führt.
Was ist der Unterschied zwischen srcset mit w und mit x?
Breitenangaben (480w, 960w) nennen die echte Breite jeder Datei und lassen den Browser anhand des Attributs sizes und der Pixeldichte des Bildschirms wählen. Dichteangaben (1x, 2x) passen zu Bildern, die immer in einer festen Größe angezeigt werden, etwa einem Logo.
Sollte ich loading="lazy" auch mit einem Framework verwenden?
Natives Lazy Loading funktioniert in allen aktuellen großen Browsern, für die meisten Bilder reicht also ein einfaches Attribut. Bildkomponenten von Frameworks ergänzen es oft für dich; prüfe, dass sie nicht auch das Hero-Bild lazy laden.
Brauche ich sowohl WebP als auch AVIF?
Nicht immer. Beide Formate werden von den aktuellen großen Browsern unterstützt. AVIF ist bei Fotos oft kleiner, aber langsamer zu kodieren. Ein <picture>-Element mit einer AVIF-Quelle, einer WebP-Quelle und einem JPEG-Fallback deckt alle ab, aber nur WebP mit JPEG-Fallback ist eine vernünftige, einfachere Wahl.
Inhalt oder Dekoration
Die Frage, die die meisten Bildentscheidungen klärt, lautet: Würde ein Besucher Informationen verlieren, wenn das Bild nicht lädt? Ein Teamfoto auf einer Über-uns-Seite, ein Screenshot in einem Tutorial und eine Produktaufnahme in einem Shop tragen alle eine Bedeutung und gehören daher mit Alt-Text ins HTML.
Eine verschwommene Textur hinter einer Überschrift, ein Muster im Footer oder ein Foto, das nur Stimmung erzeugt, kann in CSS stehen. Das hält das HTML sauber und lässt dich das Bild je nach Bildschirmgröße austauschen, ohne das Markup anzufassen. Liegt Text darüber, sorge dafür, dass er auch ohne Bild lesbar bleibt, indem du zusätzlich eine Hintergrundfarbe setzt.
Wie der Browser aus srcset auswählt
Bei Breitenangaben liest der Browser zuerst sizes, um zu erfahren, wie breit das Bild gezeichnet wird, zum Beispiel 100vw auf Smartphones und 50vw auf breiteren Bildschirmen. Diesen Wert multipliziert er mit dem Pixelverhältnis des Geräts und wählt die kleinste Datei, die mindestens so breit ist. Browser können bei langsamer Verbindung auch eine kleinere Datei wählen oder eine größere, die bereits im Cache liegt.
Ein korrektes sizes ist wichtiger als mehr Breiten. Wenn sizes 100vw angibt, das Bild auf dem Desktop aber nur ein Drittel des Bildschirms füllt, lädt der Browser eine dreimal zu breite Datei.
Layout Shift und das Hero-Bild
Wenn ein Bild ohne Abmessungen lädt, springt alles darunter nach unten. Die Attribute width und height lassen den Browser das Seitenverhältnis im Voraus berechnen. Das beseitigt diesen Sprung und verbessert den Cumulative Layout Shift.
Das Hero-Bild ist meist das Element für den Largest Contentful Paint. Lass es eager, gib ihm fetchpriority="high", liefere es von deiner eigenen Domain oder einem schnellen Bild-Host aus und versteck es nicht hinter einem Skript, das es erst später setzt.
Ein vollständiges <img>
alt, width, height und Lazy Loading
Die Attribute geben die echte Größe an; CSS macht das Bild flexibel. Dank width und height ist die Box reserviert, bevor die Datei lädt. Die Demobilder sind kleine Inline-SVGs.
Das Hero-Bild: eager und mit hoher Priorität
Verwende das für das eine große Bild oben auf der Seite. Alles unterhalb des ersten Bildschirms bekommt stattdessen loading="lazy".
Regeln für Alt-Texte
Alt-Text nach Bildtyp
Bild
Produktfoto
Beschreibe den Artikel und das wichtige Detail: Beistelltisch aus Eiche mit zwei Schubladen
Diagramm oder Schaubild
Nenne die Kernaussage: Der Umsatz hat sich zwischen März und Juni verdoppelt
Bild, das ein Link ist
Nenne das Ziel: Startseite
Dekoratives Muster oder Trenner
Leer: alt=""
Foto mit derselben Bildunterschrift daneben
Leer oder eine kurze Bezeichnung, damit es nicht doppelt vorgelesen wird
Text in einem Bild
Derselbe Text
object-fit: cover neben background-size: cover
Beide schneiden ein Bild zu, um eine Box ohne Verzerrung zu füllen. object-position und background-position legen fest, welcher Teil sichtbar bleibt.
Derselbe Zuschnitt auf zwei Arten
Links ein <img> mit object-fit, rechts ein div mit Hintergrund. Sie sehen gleich aus; nur das linke hat Alt-Text und Lazy Loading.
CSS-Hintergrundbilder
Ein Hintergrund hinter Text mit Ersatzfarbe
Der dunkle Overlay-Verlauf hält den weißen Text auf jedem Foto lesbar, und die Hintergrundfarbe erscheint, wenn das Bild nicht lädt.
Responsive Hintergründe mit image-set()
image-set() lässt den Browser nach Pixeldichte oder Dateityp wählen. Behalte für ältere Browser zuerst eine einfache url()-Zeile.
WebP und AVIF mit <picture>
Moderne Formate mit JPEG-Fallback
Der Browser nutzt die erste <source>, deren type er unterstützt. Das <img> darin trägt den Alt-Text, die Größe und die Fallback-Datei und ist das Element, das du stylst.
Volle Breite auf jedem Bildschirm
Volle Breite auf Smartphones, halbe ab 768px
Kartenraster: 1, 2 oder 3 Spalten
Inhaltsspalte mit maximal 720px
Builder für srcset und sizes
Breiten, die du exportierst (px)
Dateipfad ohne Breite
Endung
Wie breit wird das Bild gezeichnet?
Gib mindestens eine Breite ein.
Kopieren
Welche Datei würde ein Gerät laden?
Kleines Smartphone
Großes Smartphone
Tablet
Laptop
Retina-Laptop
Bildschirmbreite: {vw}px
Pixeldichte: {dpr}x
Das Bild wird {slot}px breit gezeichnet, der Browser braucht also etwa {px} Geräte-Pixel und würde normalerweise Folgendes laden:
noch nichts
(die größte Datei, die kleiner als ideal ist: exportiere am besten eine breitere)
Browser können bei langsamer Verbindung eine kleinere Datei wählen oder eine größere, die sie bereits im Cache haben; hier siehst du die übliche Wahl.