HTML ändern · Anleitung

HTML: Bild einfügen und austauschen

Die eine Zeile

<img src="bild.jpg" alt="Beschreibung des Bildes" width="1200" height="800">

Diese Zeile schreibst du an genau die Stelle im HTML, an der das Bild erscheinen soll — im Fluss des Textes, wo auch ein Absatz stehen könnte.

Die vier Angaben im Einzelnen

Warum width und height wichtig sind: Ohne diese Angaben weiß der Browser beim Aufbau der Seite nicht, wie viel Platz das Bild braucht. Er baut den Text auf — und schiebt ihn weg, sobald das Bild geladen ist. Das ist der Effekt, bei dem man beim Lesen die Zeile verliert. Trag die echten Maße der Datei ein, dann kann das nicht passieren.

Der Pfad: die häufigste Fehlerquelle

Der Wert von src sagt dem Browser, wo die Bilddatei liegt — und zwar von der HTML-Datei aus gesehen.

src="bild.jpg"              <!-- gleicher Ordner wie die HTML-Datei -->
src="bilder/bild.jpg"       <!-- im Unterordner "bilder" -->
src="../bild.jpg"           <!-- einen Ordner höher -->
src="/bilder/bild.jpg"      <!-- vom Wurzelverzeichnis der Website aus -->
src="https://…/bild.jpg"    <!-- auf einem fremden Server -->

Warum erscheint mein Bild nicht?

Wenn statt des Bildes ein leerer Rahmen oder ein kaputtes Symbol steht, liegt es fast immer an einem dieser fünf Punkte:

1. Die Datei liegt woanders. Im Code steht bild.jpg, die Datei liegt aber im Ordner bilder. Dann muss dort bilder/bild.jpg stehen.
2. Groß- und Kleinschreibung weicht ab. Bild.JPG und bild.jpg sind auf einem Webserver zwei verschiedene Dateien. Auf deinem Windows-Rechner funktioniert es trotzdem — online dann nicht mehr. Das ist der tückischste Fall, weil er lokal nicht auffällt.
3. Die Endung stimmt nicht. .jpeg statt .jpg, oder das Bild ist in Wirklichkeit ein PNG mit falscher Endung.
4. Das Bild wurde nicht mit hochgeladen. Lokal ist es da, auf dem Server nicht. Häufig, wenn nur die HTML-Datei hochgeladen wird.
5. Der fremde Server blockt. Bei einem Bild von einer anderen Website kann der Betreiber die Einbindung sperren — oder das Bild verschwindet irgendwann. Deshalb: eigene Bilder immer selbst ablegen.

Der Sonderfall bei KI-gebauten Seiten: Manche KI-Tools legen Bilder nicht als eigene Datei ab, sondern schreiben sie direkt in den HTML-Code hinein — als sehr langer Zeichensalat, der mit data:image/ beginnt. Das Bild ist dann Teil der Datei und es gibt keine Bilddatei zum Austauschen. Zum Ändern muss dieser ganze Block ersetzt werden. Ein Klick-Editor nimmt dir das ab: Du klickst das Bild an und wählst ein neues, ohne den Block anzufassen.

Bildgröße festlegen

Zwei Dinge, die gern verwechselt werden: Die Attribute width und height am Tag geben die echten Maße der Datei an. Wie groß das Bild dargestellt wird, legst du mit CSS fest.

img {
  width: 100%;      /* nimmt die ganze verfügbare Breite ein */
  height: auto;     /* Höhe passt sich an — kein Verzerren */
  max-width: 600px; /* wird aber nie größer als 600 Pixel */
}

Das ist die Kombination, die du fast immer willst. Sie sorgt dafür, dass das Bild auf einem Handy nicht breiter wird als der Bildschirm — der häufigste Grund für Seiten, die sich seitlich verschieben lassen.

Nie nur eine der beiden Angaben in Pixeln setzen. Wer width: 600px schreibt und height weglässt, ist auf der sicheren Seite. Wer beide in Pixeln setzt und sie passen nicht zum Seitenverhältnis des Bildes, bekommt ein verzerrtes Bild. height: auto verhindert das.

Bild zentrieren

img {
  display: block;
  margin: 0 auto;
}

Ein Bild verhält sich standardmäßig wie ein Buchstabe im Textfluss, deshalb wirkt margin: 0 auto erst, wenn du es mit display: block zu einem eigenen Block machst.

Der Alt-Text — und warum er nicht optional ist

Der Alt-Text beschreibt, was auf dem Bild zu sehen ist. Er hat drei Aufgaben: Er wird von Screenreadern vorgelesen, er erscheint, wenn das Bild nicht lädt, und Suchmaschinen werten ihn aus.

Beschreibe den Inhalt, nicht die Datei — und stapel keine Suchbegriffe. Bei einem Bild, das rein zur Dekoration da ist und nichts erklärt, schreibst du alt="": leer, aber vorhanden. Dann überspringen Screenreader es, statt einen Dateinamen vorzulesen.

Welches Bildformat?

Der Fehler, der Seiten langsam macht: ein Foto direkt aus der Kamera oder vom Handy einbauen. Das sind oft 4 bis 8 Megabyte und 4.000 Pixel Breite — für eine Stelle, die 800 Pixel breit dargestellt wird. Verkleinere das Bild vorher auf die Breite, in der es wirklich angezeigt wird. Das ist der wirksamste einzelne Schritt für eine schnelle Seite.

Ein Bild austauschen

Im Code ersetzt du den Wert von src — und passt den Alt-Text an, weil das neue Bild etwas anderes zeigt:

<!-- vorher -->
<img src="bilder/alt.jpg" alt="Altes Motiv" width="1200" height="800">

<!-- nachher -->
<img src="bilder/neu.jpg" alt="Neues Motiv" width="1600" height="900">

Denk an die Maße: Hat das neue Bild ein anderes Seitenverhältnis und die alten width- und height-Werte bleiben stehen, wird es verzerrt.

Dasselbe ohne Code: anklicken statt tippen

Wenn du deine Seite mit KI gebaut hast und nicht im Code arbeiten willst: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten. Du ziehst deine HTML-Datei ins Tool und arbeitest auf der fertigen Seite.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Zuletzt aktualisiert: 11. September 2026

← Zurück zur Startseite und PageFix ansehen