So fügen Sie in 7 einfachen Schritten ein Bild in HTML ein

Es ist wichtig zu wissen, wie Sie ein Bild in HTML einfügen, wenn Sie ein Logo oder eine Grafik an einer bestimmten Stelle platzieren möchten – beispielsweise in der Kopf- oder Fußzeile, wenn Ihr Theme oder Inhaltseditor das Einfügen dort nicht zulässt.

Wenn Sie Bilder direkt mit HTML einfügen, haben Sie die volle Kontrolle über die visuelle Gestaltung Ihrer Website. Bilder lockern Texte auf und regen Nutzer zur Interaktion an. Gleichzeitig stärkt die gezielte Platzierung von Elementen wie Logos Ihr Branding.

Mit diesen sieben Schritten fügen Sie Ihr Bild auf Ihrer Website ein:

1. Bereiten Sie das Bild vor und laden Sie es hoch. Bereiten Sie Ihre Bilddatei vor und laden Sie sie auf den Server Ihrer Website hoch, damit sie eine im Internet zugängliche URL erhält.
2. Öffnen Sie die HTML-Datei Ihres Themes. Suchen Sie die richtige Vorlagendatei, zum Beispiel header.php oder footer.php, in der Sie das Bild einfügen möchten.
3. Fügen Sie das src-Attribut zum <img>-Tag hinzu. Fügen Sie das grundlegende HTML-Tag <img> ein und geben Sie mit dem src-Attribut die URL Ihres Bildes an.
4. Legen Sie die Bildabmessungen fest. Geben Sie die Breite und Höhe des Bildes an, damit sich das Layout Ihrer Seite beim Laden nicht verschiebt.
5. Fügen Sie ein alt-Attribut hinzu. Geben Sie einen Alternativtext für Barrierefreiheit und SEO an, der Screenreadern und Suchmaschinen Informationen über das Bild liefert.
6. Prüfen Sie den Code auf Fehler und speichern Sie die Änderungen. Überprüfen Sie Ihren Code auf Tippfehler und speichern Sie die Datei, damit Ihre Änderungen wirksam werden.
7. Verlinken Sie das Bild. Machen Sie Ihr Bild anklickbar, indem Sie das <img>-Tag mit einem <a>-Tag umschließen und es mit Ihrer Startseite oder einer anderen relevanten Seite verlinken.
   

Kurzfassung

• Um ein Bild in HTML einzufügen, laden Sie es auf Ihren Server oder in Ihre Medienbibliothek hoch und kopieren Sie die im Internet zugängliche URL.
• Öffnen Sie die HTML- oder Theme-Datei, in der das Bild erscheinen soll, und fügen Sie ein <img>-Tag mit den Attributen src, width, height und alt hinzu.
• Speichern Sie die Datei, prüfen Sie, ob das Bild korrekt angezeigt wird, und umschließen Sie das <img>-Tag mit einem <a>-Tag, um das Bild anklickbar zu machen.

1. Bereiten Sie Ihr Bild vor und laden Sie es hoch

Bevor Sie ein Bild per HTML einfügen können, muss es auf Ihrem Webserver vorhanden sein. Optimieren Sie dazu Ihre Bilddatei und laden Sie sie an einen Speicherort hoch, an dem sie über eine direkte, öffentlich zugängliche URL erreichbar ist. Diese benötigen Sie später für das src-Attribut.

Für WordPress-Nutzer erfolgt dies in der Regel über die Medienbibliothek:

1. Navigieren Sie in Ihrem WordPress-Dashboard zu Medien → Neu hinzufügen.
2. Ziehen Sie Ihre Bilddatei per Drag-and-Drop in das Feld oder wählen Sie sie aus, um sie hochzuladen.
3. Klicken Sie nach dem Upload neben dem Bild auf URL in die Zwischenablage kopieren. Halten Sie diese URL für die nächsten Schritte bereit.

Alternativ können Sie den Dateimanager Ihres Hosting-Control-Panels verwenden. Diese Methode eignet sich besonders für statische Websites oder wenn Sie Bilder außerhalb des standardmäßigen WordPress-Upload-Ordners ablegen möchten.

Hostinger-Nutzer können beispielsweise unseren intuitiven Dateimanager verwenden. Damit haben Sie direkten Zugriff auf die Dateistruktur Ihrer Website. Navigieren Sie einfach zum Verzeichnis public_html oder zu einem Unterordner wie images und klicken Sie auf Hochladen, um Ihre Datei hinzuzufügen.

2. Öffnen Sie die HTML-Datei Ihres Themes

Dazu bearbeiten Sie zentrale Vorlagendateien wie header.php oder footer.php, die das Layout Ihrer Website steuern. Soll das Bild auf jeder Seite erscheinen, beispielsweise als Logo in der Kopfzeile, müssen Sie diese Dateien statt eines einzelnen Beitrags bearbeiten.

Erstellen Sie immer ein Backup Ihrer Website, bevor Sie Theme-Dateien bearbeiten. Bereits ein kleiner Fehler kann Ihre Website unbrauchbar machen. Mit einem Backup können Sie sie schnell wiederherstellen.

Wir empfehlen außerdem dringend, diese Änderungen in einem Child-Theme vorzunehmen, damit Ihre Anpassungen bei einem Update des übergeordneten Themes nicht überschrieben werden.

Nachdem Sie ein Backup erstellt haben, führen Sie im WordPress-Theme-Editor die folgenden Schritte aus:

1. Gehen Sie im WordPress-Dashboard zu Darstellung → Theme-Datei-Editor.
2. Wählen Sie auf der rechten Seite das aktive Theme aus.
3. Suchen Sie die Datei, die Sie bearbeiten möchten. Für ein Logo in der Kopfzeile ist dies in der Regel header.php, für ein Element in der Fußzeile footer.php.
4. Klicken Sie auf die Datei, um sie im Editor zu öffnen.

3. Fügen Sie das src-Attribut zum <img>-Tag hinzu

Fügen Sie das <img>-Tag in Ihre HTML-Datei ein und geben Sie mit dem src-Attribut die URL des Bildes an. Das <img>-Tag weist den Browser an, ein Bild anzuzeigen. Es ist ein sogenanntes leeres Tag und benötigt daher kein schließendes </img>-Tag.

Das src-Attribut, kurz für „source“, ist dabei entscheidend, da es dem Browser mitteilt, wo sich das Bild befindet. Hier fügen Sie die Datei-URL ein, die Sie in Schritt 1 aus Ihrer Medienbibliothek kopiert haben.

Suchen Sie die entsprechende Stelle in Ihrem Code, beispielsweise innerhalb des <header>-Abschnitts in header.php, und fügen Sie den folgenden Codeausschnitt ein. Ersetzen Sie die Platzhalter-URL durch die tatsächliche URL Ihres Bildes:

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png">

Diese vollständige URL wird als absoluter Pfad bezeichnet. Beim Bearbeiten von Theme-Dateien ist dies die zuverlässigste Methode.

4. Legen Sie die Breite und Höhe des Bildes fest

Legen Sie die Breite und Höhe des Bildes fest, indem Sie die Attribute width und height direkt zum <img>-Tag hinzufügen. Diese Attribute sind für die Performance Ihrer Website und die Benutzererfahrung wichtig, da sie dem Browser bereits vor dem Laden des Bildes genau mitteilen, wie viel Platz er dafür reservieren soll.

Diese Vorgehensweise verhindert Cumulative Layout Shift (CLS), bei dem sich Seiteninhalte beim Laden von Bildern störend verschieben.

Fügen Sie die Attribute width und height zum <img>-Tag hinzu und geben Sie die ursprünglichen Abmessungen des Bildes in Pixeln an.

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png" width="180" height="60">

Geben Sie dabei nur die Zahlen an und fügen Sie innerhalb der HTML-Attribute kein px hinzu. Auch wenn Sie das Bild mithilfe von CSS responsiv gestalten, sollten Sie diese HTML-Attribute festlegen, um das ursprüngliche Seitenverhältnis des Bildes zu definieren.

5. Fügen Sie einen aussagekräftigen Alt-Text hinzu

Das alt-Attribut enthält einen Alt-Text, also eine kurze Beschreibung Ihres Bildes. Es ist aus zwei wesentlichen Gründen wichtig:

• Barrierefreiheit. Screenreader verwenden den Alt-Text, um das Bild für sehbehinderte Nutzer zu beschreiben und die Website dadurch für alle zugänglich zu machen.
• SEO. Suchmaschinen nutzen den Alt-Text, um Inhalt und Kontext des Bildes zu verstehen. Das kann dazu beitragen, dass Ihre Bilder in den Suchergebnissen besser platziert werden.

Ihr Alt-Text sollte kurz und aussagekräftig sein. Wenn das Bild lediglich Ihr Logo zeigt, sollte der Alt-Text aus Ihrem Firmennamen und dem nachfolgenden Wort „Logo“ bestehen.

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png" width="180" height="60" alt="A cat image">

6. Prüfen Sie den Code auf Fehler und speichern Sie die Änderungen

Prüfen Sie Ihr <img>-Tag auf Tippfehler und klicken Sie anschließend im WordPress-Editor auf Datei aktualisieren. Bereits ein einziges falsch platziertes Zeichen oder ein nicht geschlossenes Anführungszeichen im <img>-Tag kann dazu führen, dass das Bild nicht angezeigt wird oder das Seitenlayout beeinträchtigt wird.

Überprüfen Sie die Codezeile noch einmal. Ihr vollständiges <img>-Tag sollte etwa so aussehen:

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-logo.png" width="180" height="60" alt="A cat image">

Wenn Sie sich vergewissert haben, dass der Code korrekt ist, klicken Sie unten im Theme-Datei-Editor auf Datei aktualisieren. Öffnen Sie Ihre Website anschließend in einem neuen Tab oder einem privaten Browserfenster und laden Sie die Seite neu, um das neue Bild zu sehen.

7. Verlinken Sie das Bild

Um ein Bild zu verlinken, umschließen Sie das <img>-Tag mit einem <a>-Tag. Ein Bild in Ihrer Kopf- oder Fußzeile, insbesondere ein Logo, sollte fast immer anklickbar sein.

Nutzer klicken intuitiv auf ein Logo, um zur Startseite zurückzukehren. Ein Bild zu verlinken, ist für eine gute Website-Navigation und Benutzererfahrung daher ein wichtiger Schritt.

Das <a>-Tag verwendet das href-Attribut, um die Ziel-URL festzulegen. So verlinken Sie Ihr neues Logo mit der Startseite Ihrer Website:

  <a href="https://your-domain.tld/">
   <img src="https://your-domain.tld/wp-content/uploads/2025/11/your-logo.png" width="180" height="60" alt="A cat image">
</a>

Klicken Sie nach dem Einfügen des Codes erneut auf Datei aktualisieren. Wenn Sie Ihre Website jetzt aufrufen, ist Ihr Logo nicht nur sichtbar, sondern funktioniert auch als Link.

Nächste Schritte: Organisieren Sie Ihre Bilder in der WordPress-Medienbibliothek

Das manuelle Einfügen eines Bildes mit HTML eignet sich besonders für Theme-Elemente wie Logos. Wenn Ihre Website jedoch wächst, werden Sie Dutzende oder sogar Hunderte Bilder für Ihre Beiträge und Seiten hochladen.

Dann wird die Verwaltung Ihrer Mediendateien immer wichtiger. Eine unübersichtliche WordPress-Medienbibliothek erschwert es, Bilder zu finden, Inhalte wiederzuverwenden und die richtigen URLs zu ermitteln.

Um Ihre WordPress-Medienbibliothek zu organisieren, können Sie ein Plugin wie FileBird installieren, virtuelle Ordner erstellen und Ihre Mediendateien anschließend einfach per Drag-and-Drop in diese Ordner verschieben.

Wenn Sie Ihre Medien in Ordnern organisieren, gestalten Sie Ihre zukünftigen Arbeitsabläufe mit Inhalten deutlich schneller und zuverlässiger.

Dieser Artikel ist eine lokalisierte Version von How to insert an image in HTML in 7 easy steps, der ursprünglich in englischer Sprache veröffentlicht wurde.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.

Erstellt von

Faradilla Ayunindya

Add Hostinger as a preferred source on Google

Faradilla, auch bekannt als Ninda, ist Content Marketing Specialist bei Hostinger mit über fünf Jahren Erfahrung und einem zehnjährigen Hintergrund als Linguistin. Sie möchte Technologie für alle zugänglich machen, indem sie komplexe Anleitungen in klare und leicht verständliche Schritt-für-Schritt-Guides verwandelt. In ihrer Freizeit interessiert sie sich für Biowissenschaften oder schaut gerne lustige Tiervideos. Vernetzen Sie sich mit ihr auf LinkedIn.

Mehr von Faradilla Ayunindya