Bilder einbinden

Text kann viel – aber manche Dinge muss man einfach sehen. Das Produktfoto im Onlineshop, das Diagramm im Nachrichtenartikel, das Urlaubsbild im Blog: Bilder machen aus einer Textwüste eine lebendige Seite. In dieser Lektion lernst du, wie du Bilder technisch sauber einbindest – und was gut eingebundene Bilder von schlecht eingebundenen unterscheidet: ein durchdachter Alternativtext, das passende Format und eine echte Bildunterschrift, wo sie gebraucht wird. Am Ende weißt du außerdem, welche Bilder du überhaupt verwenden darfst.

Bilder bindest du mit dem Element <img> ein. Erinnerst du dich an die leeren Elemente aus der allerersten Lektion? <img> ist das wichtigste von ihnen: Es hat keinen Inhalt und deshalb auch kein schließendes Tag. Alles, was der Browser wissen muss, steckt in seinen Attributen. Das erste heißt src (für source, „Quelle“) und enthält die Adresse der Bilddatei:

Wichtig zu verstehen: Das Bild steckt nicht in der HTML-Datei. Deine Seite bleibt eine reine Textdatei – im src-Attribut steht nur die Adresse, unter der die Bilddatei liegt. Der Browser lädt sie separat und setzt sie an die richtige Stelle. Deshalb funktionieren hier exakt dieselben relativen Pfade, die du aus der Link-Lektion kennst:

• foto.jpg – die Datei liegt im selben Ordner wie deine HTML-Datei.
• bilder/foto.jpg – die Datei liegt im Unterordner bilder. So organisieren die meisten Projekte ihre Bilder: Ein eigener Ordner hält das Projekt aufgeräumt.
• ../foto.jpg – die Datei liegt einen Ordner weiter oben.

Stimmt der Pfad nicht – ein Tippfehler, ein falscher Ordner, groß statt klein geschrieben –, zeigt der Browser statt des Bildes nur ein Symbol für ein kaputtes Bild. Und genau in diesem Moment tritt das zweite Pflicht-Attribut auf den Plan: alt.

Das Attribut alt enthält den Alternativtext: eine Beschreibung, die an die Stelle des Bildes tritt, wenn es nicht gesehen werden kann. Das passiert öfter, als du denkst:

• Eine blinde Nutzerin lässt sich die Seite vom Screenreader vorlesen – beim Bild liest er den Alternativtext vor.
• Das Bild lädt nicht (falscher Pfad, abgebrochene Verbindung) – der Browser zeigt den Alternativtext an seiner Stelle an.
• Eine Suchmaschine will wissen, was auf dem Bild zu sehen ist – sie kann nur Text auswerten.

Deshalb gilt: alt gehört an jedes <img>, ohne Ausnahme. Das ist die Pflicht. Die Kunst liegt darin, was du hineinschreibst. Ein guter Alternativtext beantwortet die Frage: „Was würde ich einer Freundin am Telefon sagen, damit sie versteht, was das Bild zeigt und warum es an dieser Stelle steht?“ Ein paar Beispiele:

Und was ist mit Bildern, die gar nichts zum Inhalt beitragen – eine Zierlinie, ein dekorativer Farbtupfer im Hintergrund? Dann schreibst du ein leeres alt="". Das ist kein Vergessen, sondern eine bewusste Ansage an den Screenreader: „Dieses Bild darfst du komplett überspringen, es ist reine Dekoration.“ Fehlt das Attribut dagegen ganz, lesen viele Screenreader ersatzweise den Dateinamen vor – und niemand möchte sich „foto-final-v2-neu.jpg“ anhören.

Zwei weitere Attribute solltest du dir von Anfang an angewöhnen: width (Breite) und height (Höhe), jeweils als Pixelzahl ohne Einheit:

Warum das wichtig ist, hast du auf schlecht gebauten Seiten selbst schon gespürt: Du beginnst zu lesen, und plötzlich springt der Text nach unten, weil weiter oben gerade ein Bild fertig geladen wurde. Ohne Größenangaben weiß der Browser nämlich erst nach dem Laden, wie viel Platz ein Bild braucht – und schiebt dann den gesamten Inhalt zurecht. Stehen width und height im HTML, kann er den Platz von Anfang an reservieren: Die Seite steht stabil, nichts ruckelt. Dieses Springen hat sogar einen Fachbegriff – Layout Shift – und ist heute ein offizielles Qualitätskriterium, nach dem Suchmaschinen Seiten bewerten.

Gib dabei die echten Pixelmaße der Bilddatei an. Verkleinern per Attribut funktioniert zwar, ist aber Verschwendung: Der Browser lädt dann eine große Datei, nur um sie klein anzuzeigen. Die Feinabstimmung – etwa dass ein Bild auf schmalen Handybildschirmen automatisch mitschrumpft – übernimmt später CSS; die Attribute liefern ihm dafür das korrekte Seitenverhältnis.

Zeit zum Ausprobieren. Damit das Beispiel ohne eigene Bilddateien funktioniert, stellt dir diese Seite unter /assets/beispiel/… fertige Testbilder bereit – zum Beispiel urlaubsfoto.jpg, rathaus.jpg oder bergpanorama.jpg. Tausche die Dateinamen aus, ändere den Alternativtext oder die Größenangaben – und beobachte die Vorschau:

Bilddateien gibt es in verschiedenen Formaten, erkennbar an der Dateiendung. Jedes hat seine Stärken – und wer das passende wählt, bekommt bessere Qualität bei kleineren Dateien:

Als Faustregel für den Start: Fotos als JPEG oder besser WebP, Logos und Icons als SVG, Screenshots als PNG. WebP und AVIF werden längst von allen aktuellen Browsern unterstützt und sind bei gleicher Bildqualität oft nur halb so groß wie ein JPEG – im Zweifel sind sie die richtige Wahl.

Womit wir beim wichtigsten Grundsatz wären: Die Dateigröße zählt. Bilder sind fast immer der schwerste Teil einer Webseite. Ein Foto direkt aus der Handykamera ist gern 4 000 Pixel breit und mehrere Megabyte groß – angezeigt wird es dann vielleicht mit 600 Pixeln Breite. Verkleinere Bilder deshalb vor dem Hochladen auf die Größe, in der sie tatsächlich gebraucht werden, und speichere sie in einem komprimierten Format. Deine Besucher mit knappem Handytarif danken es dir, und schnelle Seiten werden von Suchmaschinen besser bewertet. Ein Bonus für lange Seiten: Mit dem Attribut loading="lazy" lädt der Browser Bilder, die weit unten stehen, erst dann, wenn die Nutzerin in ihre Nähe scrollt – das spart beim ersten Seitenaufruf spürbar Daten.

Oft braucht ein Bild eine Bildunterschrift: die Quelle eines Diagramms, den Namen der abgebildeten Person, eine kurze Einordnung. Man könnte einfach einen Absatz unter das Bild setzen – aber dann weiß niemand außer dem sehenden Betrachter, dass die beiden zusammengehören. HTML bietet dafür das Duo <figure> und <figcaption>:

<figure> klammert Bild und Unterschrift zu einer Einheit zusammen; <figcaption> enthält die Unterschrift und darf als erstes oder letztes Kindelement stehen. Wichtig: Die Bildunterschrift ersetzt den Alternativtext nicht, sie ergänzt ihn. Das alt beschreibt, was zu sehen ist; die <figcaption> liefert allen Lesern den Kontext – deshalb sollten beide auch nicht wortgleich sein. Übrigens funktioniert <figure> nicht nur mit Bildern: Auch Diagramme, Codebeispiele oder Zitate lassen sich damit samt Beschriftung gruppieren.

Deine Seiten können jetzt zeigen statt nur erzählen. In der nächsten Lektion bringst du Ordnung in deine Inhalte: Mit geordneten und ungeordneten Listen strukturierst du alles – von der Einkaufsliste bis zur Schritt-für-Schritt-Anleitung.