Bilder einbinden

Zuletzt geprüft am 7. September 2026 von Daniel Weihmann

Ein Bild einzubinden ist eine Zeile HTML. Ein Bild richtig einzubinden heißt: Es hat einen Alternativtext, es reserviert seinen Platz, bevor es da ist, es lädt in einer Größe, die zum Gerät passt, und es blockiert nicht den Aufbau der Seite. Alle vier Punkte lassen sich mit Attributen am <img>-Element erledigen.

Die Grundform

<img src="/bilder/werkstatt.jpg"
     alt="Zwei Mitarbeiter montieren ein Fensterelement"
     width="1200" height="800"
     loading="lazy" decoding="async">

Fünf Attribute, die praktisch immer zusammengehören.

<img> ist ein leeres Element, es hat kein schließendes Tag. Der Schrägstrich am Ende (<img … />) stammt aus XHTML, ist in HTML5 erlaubt und ohne Wirkung.

Der Alternativtext

Der alt-Text ersetzt das Bild, er beschreibt es nicht von außen. Die Frage lautet also nicht „was ist zu sehen", sondern „was stünde hier, wenn das Bild fehlte". Er wird gebraucht, wenn ein Bild nicht lädt, wenn jemand einen Screenreader nutzt, und er ist der Text, den Suchmaschinen dem Bild zuordnen.

Dekoration bekommt alt="". Ein leeres Attribut heißt „hier ist nichts zu holen", das Bild wird übersprungen. Das Attribut ganz wegzulassen ist etwas anderes: Dann liest der Screenreader ersatzweise den Dateinamen vor.
Verlinkte Bilder beschreiben das Ziel, nicht das Motiv.
Kein „Bild von" am Anfang – dass es ein Bild ist, sagt der Screenreader selbst.
Text im Bild gehört in den Alternativtext, und zwar vollständig. Besser noch: Text nicht ins Bild legen.

width und height verhindern Layoutsprünge

Ohne Maßangaben weiß der Browser erst beim Eintreffen des Bildes, wie viel Platz es braucht – und schiebt in dem Moment alles darunter nach unten. Wer schon zu lesen begonnen hatte, verliert die Zeile. Google misst diesen Effekt als Cumulative Layout Shift und rechnet ihn in die Bewertung der Seite ein.

Die Lösung ist alt und einfach: width und height mit den tatsächlichen Pixelmaßen der Datei angeben. Moderne Browser errechnen daraus das Seitenverhältnis und halten den Platz frei, noch bevor ein Byte des Bildes da ist.

Der Haken, in den fast jeder einmal läuft: Sobald im CSS img { max-width: 100% } steht, skaliert die Breite mit – die Höhe aber bleibt beim Attributwert stehen, und das Bild wird gestaucht. Deshalb gehört height: auto zwingend dazu:

img { max-width: 100%; height: auto; }

Welches Format

JPEG: Fotos. Universell lesbar, deshalb weiterhin die sichere Wahl für Vorschaubilder, die in fremden Systemen landen – etwa als og:image für geteilte Links.
PNG: Grafiken mit harten Kanten, Screenshots und alles mit Transparenz. Bei Fotos unnötig groß.
WebP: Deutlich kleiner als JPEG bei gleicher Qualität, kann Transparenz und wird von allen aktuellen Browsern angezeigt. Für Bilder auf der eigenen Seite heute der Normalfall.
AVIF: Noch einmal spürbar kleiner als WebP, dafür langsamer beim Kodieren. Sinnvoll als erste Wahl in <picture>, mit WebP oder JPEG als Rückfallebene.
SVG: Logos, Symbole, Diagramme. Skaliert verlustfrei und bleibt bei einfachen Formen winzig. SVG kann Skripte enthalten – Dateien aus fremder Quelle also nicht ungeprüft einbinden.

Responsive Bilder mit srcset

Ein Bild, das auf dem Desktop 1200 Pixel breit dargestellt wird, ist auf einem Telefon dreimal zu groß. Mit srcset hinterlegt man mehrere Fassungen und überlässt dem Browser die Wahl – der kennt Bildschirmbreite, Pixeldichte und teils auch die Verbindungsqualität.

<img src="/bilder/halle-800.jpg"
     srcset="/bilder/halle-400.jpg   400w,
             /bilder/halle-800.jpg   800w,
             /bilder/halle-1600.jpg 1600w"
     sizes="(min-width: 60rem) 40rem, 100vw"
     alt="Blick in die Montagehalle"
     width="800" height="533">

Die w-Angaben nennen die echte Pixelbreite der jeweiligen Datei, nicht die Darstellungsgröße. sizes beschreibt, wie breit das Bild im Layout sein wird – hier ab 60 rem Fensterbreite 40 rem, sonst die volle Breite. Ohne sizes nimmt der Browser 100vw an und lädt regelmäßig zu große Dateien.

Das src-Attribut bleibt als Rückfallebene stehen. Es gehört weiterhin dazu, auch wenn kein aktueller Browser mehr darauf angewiesen ist.

picture für Formate und Ausschnitte

<picture> wird gebraucht, wenn nicht nur die Größe variiert, sondern das Bild selbst. Zwei Fälle:

<picture>
  <source srcset="/bilder/team.avif" type="image/avif">
  <source srcset="/bilder/team.webp" type="image/webp">
  <img src="/bilder/team.jpg" alt="Das Team vor dem Bürogebäude"
       width="1200" height="800">
</picture>

Formatwahl: Der Browser nimmt die erste Quelle, die er versteht.

<picture>
  <source media="(min-width: 48rem)" srcset="/bilder/panorama.jpg">
  <img src="/bilder/hochformat.jpg" alt="Marktplatz mit Rathaus"
       width="600" height="800">
</picture>

Bildausschnitt: auf schmalen Geräten ein anderer Beschnitt statt eines winzigen Panoramas.

Wichtig ist die Reihenfolge: Der Browser nimmt die erste passende Quelle und schaut nicht weiter. Das <img> steht immer zuletzt und trägt alt, width und height – die <source>-Elemente tun das nicht.

Ladeverhalten steuern

loading="lazy": Das Bild wird erst geladen, wenn es in die Nähe des sichtbaren Bereichs kommt. Für alles unterhalb des ersten Bildschirms sinnvoll. Nicht am ersten großen Bild verwenden – dort verzögert es genau die Anzeige, auf die gemessen wird.
decoding="async": Erlaubt dem Browser, das Bild nebenher zu dekodieren, statt den Seitenaufbau dafür anzuhalten. Schadet nirgends.
fetchpriority="high": Zieht ein Bild in der Warteschlange nach vorn. Gedacht für das eine große Bild oben auf der Seite, üblicherweise zusammen mit loading="eager". Wer es überall setzt, hat wieder keine Priorität vergeben.

Bildunterschriften

Gehört eine Erläuterung sichtbar zum Bild, ist <figure> mit <figcaption> das richtige Gespann. Die Unterschrift ersetzt den Alternativtext nicht: Sie steht für alle da, der alt-Text nur für die, die das Bild nicht sehen. Beide sollten deshalb nicht wortgleich sein. Wo <figure> im Seitenaufbau steht, erklärt die Seite zu den semantischen Elementen.

Häufige Fehler

Riesenbild per CSS verkleinert. Ein 4000-Pixel-Foto, das in einer 400-Pixel-Spalte steht, überträgt trotzdem die volle Datenmenge.
width und height in CSS statt als Attribut. Die Reservierung des Platzes funktioniert nur über die Attribute, weil sie schon beim Parsen bekannt sind.
Falsche Maße in den Attributen. Stimmen sie nicht mit der Datei überein, wird das Bild verzerrt dargestellt – CSS schlägt dabei die Attribute.
loading="lazy" am obersten Bild. Kostet messbar Ladezeit statt sie zu sparen.
Text als Grafik. Nicht durchsuchbar, nicht kopierbar, beim Vergrößern unscharf, und für den Screenreader nur so gut wie sein Alternativtext.
Fremde Bilder direkt verlinkt. Ein src auf eine fremde Domain überträgt die IP jedes Besuchers dorthin und kann jederzeit ins Leere laufen. Bilder gehören auf den eigenen Server.