So bindest du Bilder richtig ein (HTML + CSS)

Bilder machen Webseiten lebendiger. Aber wenn Bilder falsch eingebunden sind, wird’s schnell nervig: sie sind riesig, drücken den Text weg, laden langsam oder haben keine Beschreibung. Mit ein paar einfachen Regeln bekommst du Bilder sauber in den Griff.

In HTML bindest du Bilder mit dem <img>-Tag ein. Der Browser lädt dann die Datei und zeigt sie an. Wichtig sind dabei: Dateiname, Größe, Ausrichtung und das alt-Attribut. Das klingt viel, ist aber schnell gelernt.

Das wichtigste HTML-Beispiel

So sieht ein normales Bild in HTML aus. Das src ist der Pfad zur Datei, das alt beschreibt das Bild.

<img src="/1.jpg" alt="Beispielbild: Screenshot einer Webseite">

Warum ist alt wichtig? Erstens für Barrierefreiheit: Screenreader lesen den Alt-Text vor. Zweitens für SEO: Suchmaschinen verstehen über den Text besser, worum es geht. Drittens als Fallback: wenn das Bild nicht lädt, sieht man wenigstens die Beschreibung. Win-win.

Bildnamen: bitte nicht IMG_1234.jpg

Dateinamen sind oft egal, bis sie es nicht mehr sind. Ein sinnvoller Dateiname hilft dir selbst, und kann auch für die Bildersuche nützlich sein. Statt IMG_1234.jpg lieber webdesign-header-bonn.jpg oder html-beispiel-bild.jpg. Keine Umlaute, keine Leerzeichen, lieber Bindestriche. Das wirkt aufgeräumt und ist später leichter zu pflegen.

Links, rechts, mittig: Bilder ausrichten

Es gibt mehrere Wege, Bilder auszurichten. Ein einfacher Klassiker ist: per CSS-Klasse. Du gibst dem Bild eine Klasse und regelst alles in CSS. Beispiel: Bild links neben Text.

<img src="/1.jpg" alt="Beispielbild 1" class="img-left">
<p>Text läuft rechts am Bild vorbei...</p>

Passendes CSS (nur als Beispiel, du kannst das später in style.css übernehmen):

.img-left {
  float: left;
  margin: 0 12px 10px 0;
  max-width: 220px;
  height: auto;
}

Für rechts ist es fast gleich:

<img src="/2.jpg" alt="Beispielbild 2" class="img-right">

.img-right {
  float: right;
  margin: 0 0 10px 12px;
  max-width: 220px;
  height: auto;
}

Und mittig geht am einfachsten, wenn du das Bild als Block darstellst:

<img src="/1.jpg" alt="Beispielbild mittig" class="img-center">

.img-center {
  display: block;
  margin: 10px auto;
  max-width: 420px;
  height: auto;
}

Wichtig ist height: auto. Sonst ziehst du das Bild in die falsche Form. Und max-width schützt davor, dass Bilder auf kleinen Bildschirmen alles sprengen. Das ist simpel, aber rettet viele Seiten.

Rahmen um Bilder

Ein Rahmen kann helfen, wenn ein Bild “im Hintergrund verschwindet”. Gerade helle Bilder brauchen manchmal eine klare Kante. Beispiel:

<img src="/2.jpg" alt="Bild mit Rahmen" class="img-frame">

.img-frame {
  border: 2px solid #000;
  padding: 3px;
  background: #fff;
}

Wenn du es dezenter willst, nimm 1px und eine graue Farbe. Und ja, manchmal wirkt “zu sauber” auch langweilig, aber besser als unsauber ist es fast immer.

Breite und Ladezeit

Große Bilder sind der häufigste Grund, warum Seiten langsam werden. Du musst nicht jedes Bild riesig hochladen, wenn es später sowieso klein angezeigt wird. Am besten ist: Bilder passend exportieren und komprimieren. Für Fotos ist JPG oft gut, für Grafiken PNG (je nach Motiv). Und wenn du viele Bilder hast, lohnt sich eine klare Ordnung in einem /img/-Ordner.

Als grobe Richtung: ein normales Bild für eine Infoseite sollte nicht mehrere Megabyte groß sein. Wenn es das ist, ist es meist unnötig. Das merkt man spätestens am Handy.