Wie man ein Bild in HTML einfügt: Eine Schritt-für-Schritt-Anleitung

Wie fügt man ein Bild in HTML ein: Syntax und Attribute

Um ein Bild in eine HTML-Datei einzufügen, verwende das <img>-Element. Es ist ein leeres Element, was bedeutet, dass es weder öffnende noch schließende Tags hat.

Syntax

Die grundlegende Syntax für das Einfügen eines Bildes lautet:

<img src="bildquelle" alt="alternativer Text">

Wobei:

src das Attribut für die Bildquelle ist. Es kann den Pfad zu einem lokalen Bild auf deinem Computer oder die URL eines Bildes aus dem Internet angeben.
alt das Attribut für den alternativen Text ist. Es liefert eine textuelle Beschreibung des Bildes für Barrierefreiheit und Suchmaschinen.

Attribute

Das <img>-Element unterstützt eine Reihe von Attributen, mit denen du das Aussehen und Verhalten des Bildes steuern kannst:

width: Legt die Breite des Bildes in Pixeln fest.
height: Legt die Höhe des Bildes in Pixeln fest.
alt: Bereits beschrieben. Wichtig für Barrierefreiheit und SEO.
title: Bietet einen Tooltip-Text, der beim Hovern über das Bild angezeigt wird.
border: Fügt einen Rahmen um das Bild hinzu.
hspace: Fügt horizontalen Abstand um das Bild hinzu.
vspace: Fügt vertikalen Abstand um das Bild hinzu.

Beispiel

Um das Bild "mein-bild.jpg", das sich im selben Verzeichnis wie deine HTML-Datei befindet, einzufügen, würdest du folgenden Code verwenden:

<img src="mein-bild.jpg" alt="Bildbeschreibung">

Um dasselbe Bild aus dem Internet einzufügen, würdest du Folgendes verwenden:

<img src="https://example.com/bilder/mein-bild.jpg" alt="Bildbeschreibung">

Lokale Bilder vs. Webbilder: Quellen angeben

Wenn du ein Bild in HTML einfügen möchtest, musst du zuerst entscheiden, welche Art von Bild du verwenden möchtest: ein lokales Bild oder ein Webbild.

Lokale Bilder

Werden auf deinem eigenen Computer gespeichert.
Du musst den Pfad zur Bilddatei angeben, z. B. <img src="images/meinBild.jpg">.
Vorteil: Du hast die volle Kontrolle über das Bild und kannst es jederzeit ändern oder löschen.

Webbilder

Werden online gespeichert, z. B. auf einem Webserver oder in einem CDN.
Du musst die URL des Bildes angeben, z. B. <img src="https://example.com/bilder/meinBild.jpg">.
Vorteil: Das Bild ist sofort für alle verfügbar, die auf deine Webseite zugreifen.

Quellen angeben

Egal, ob du ein lokales oder ein Webbild verwendest, musst du immer die Quelle des Bildes angeben. Dies ist aus folgenden Gründen wichtig:

Urheberrecht: Du musst sicherstellen, dass du die Erlaubnis hast, das Bild zu verwenden.
Barrierefreiheit: Bildschirmlesegeräte verwenden die Quellenangabe, um das Bild zu beschreiben.
SEO: Suchmaschinen können die Quellenangabe nutzen, um das Bild zu indizieren.

Um die Quelle anzugeben, verwendest du das Attribut src. Der Wert des Attributs ist die URL des Bildes, z. B.:

<img src="https://example.com/bilder/meinBild.jpg">

Wenn du ein lokales Bild verwendest, musst du den Pfad zur Bilddatei angeben, z. B.:

<img src="images/meinBild.jpg">

Bildgröße festlegen: Breite und Höhe

Die Größe eines Bildes kann durch die Angabe von Breite und Höhe festgelegt werden. Dies ist wichtig, um sicherzustellen, dass das Bild auf deinem Webauftritt angemessen angezeigt wird und den verfügbaren Platz optimal nutzt.

Breite und Höhe festlegen

Um die Bildgröße in HTML festzulegen, verwendest du die Attribute width und height innerhalb des <img>-Tags. Die Werte dieser Attribute werden in Pixel angegeben:

<img src="bild.jpg" width="300" height="200">

Im obigen Beispiel wird das Bild mit dem Dateinamen bild.jpg eingefügt und mit einer Breite von 300 Pixel und einer Höhe von 200 Pixel angezeigt.

Bildverhältnisse beibehalten

Wenn du die Größe eines Bildes änderst, ist es wichtig, das Bildverhältnis beizubehalten, damit das Bild nicht verzerrt aussieht. Das Bildverhältnis bezieht sich auf das Verhältnis der Breite zur Höhe.

Um das Bildverhältnis beizubehalten, kannst du die max-width– und max-height-Eigenschaften in CSS verwenden. Diese Eigenschaften legen die maximale Breite bzw. Höhe des Bildes fest, während das Bildverhältnis unverändert bleibt. Beispiel:

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

Skalierung und Reaktionsfähigkeit

Mit CSS kannst du auch die Skalierung und Reaktionsfähigkeit von Bildern steuern. Die Reaktionsfähigkeit stellt sicher, dass Bilder auf verschiedenen Geräten wie Smartphones und Tablets gut dargestellt werden.

Du kannst die object-fit-Eigenschaft verwenden, um festzulegen, wie das Bild innerhalb seines Containers skaliert wird. Beispiel:

img {
  object-fit: contain;
}

Der Wert contain skaliert das Bild so, dass es innerhalb des Containers passt, ohne das Bildverhältnis zu verzerren. Du kannst auch cover verwenden, um das Bild so zu skalieren, dass es den gesamten Container ausfüllt.

Mit diesen Techniken kannst du die Größe von Bildern in HTML präzise steuern und dabei sicherstellen, dass sie auf deinem Webauftritt optimal angezeigt werden.

Alt-Text hinzufügen: Bildbeschreibung für Barrierefreiheit

Was ist Alt-Text?

Alt-Text (Alternativer Text) ist ein Attribut, das du zu Bild-Tags in HTML hinzufügen kannst. Er bietet eine Textbeschreibung des Bildes, die von Technologien wie Bildschirmlesegeräten verwendet wird, um sehbehinderten Nutzern den Inhalt des Bildes zu vermitteln.

Warum ist Alt-Text wichtig?

Alt-Text ist aus mehreren Gründen wichtig:

Barrierefreiheit: Er macht Websites für alle Nutzer zugänglich, auch für diejenigen mit Sehbehinderungen.
SEO: Alt-Texte helfen Suchmaschinen, den Inhalt von Bildern zu verstehen und sie in den Suchergebnissen anzuzeigen.
Usability: Beim Laden von Bildern kann Alt-Text als Platzhalter angezeigt werden, wenn die Verbindung langsam ist.

So fügst du Alt-Text hinzu

Um Alt-Text zu einem Bild hinzuzufügen, verwende das alt-Attribut im img-Tag:

<img src="bild.jpg" alt="Beschreibung des Bildes">

Best Practices für Alt-Text

Sei prägnant: Beschreibe das Bild in wenigen prägnanten Wörtern.
Sei spezifisch: Erläutere den Inhalt und Zweck des Bildes.
Verwende keine Phrasen wie "Bild von": Bildschirmlesegeräte erkennen solche Phrasen.
Wenn das Bild dekorativen Charakter hat, verwende "leer": Dies weist Bildschirmlesegeräte an, das Bild zu ignorieren.
Benutze keine Schlüsselwörter: Alt-Text sollte nicht zur Optimierung für Suchmaschinen verwendet werden.

Fortgeschrittene Tipps

Nutze aria-label für komplexe Bilder: Für komplexe Bilder, die durch eine Kombination aus HTML und CSS erstellt werden, kannst du das aria-label-Attribut verwenden, um eine alternative Beschreibung bereitzustellen.
Überprüfe deinen Alt-Text mit einem Bildschirmleser: Teste deinen Alt-Text mit einem Bildschirmleser wie NVDA oder JAWS, um sicherzustellen, dass er richtig vorgelesen wird.
Optimiere deinen Alt-Text kontinuierlich: Überprüfe deinen Alt-Text regelmäßig und aktualisiere ihn bei Bedarf, um Barrierefreiheit und SEO zu gewährleisten.

Bilder zentrieren oder ausrichten

Wenn du dein Bild in der Mitte des Textes platzieren möchtest, kannst du das Attribut align verwenden. Setze den Wert auf center, um das Bild zu zentrieren.

<img src="bild.jpg" alt="Beschreibung" align="center">

Bilder nach links oder rechts ausrichten

Um ein Bild nach links oder rechts auszurichten, kannst du das CSS-Attribut float verwenden. Setze den Wert auf left oder right, um das Bild entsprechend auszurichten.

<img src="bild.jpg" alt="Beschreibung" style="float: left;">

Ausrichtung mit Textumbruch

Wenn du möchtest, dass Text um dein Bild herum fließt, kannst du das Attribut wrap verwenden. Setze den Wert auf left oder right, um den Textumfluss entsprechend zu gestalten.

<img src="bild.jpg" alt="Beschreibung" style="float: left; margin: 0 10px 10px 0;">

Horizontale Zentrierung mit `text-align`

Alternativ kannst du die horizontale Zentrierung auch mit dem CSS-Attribut text-align erreichen. Setze den Wert auf center für den entsprechenden Container.

<div style="text-align: center;">
  <img src="bild.jpg" alt="Beschreibung">
</div>

Vorschaubilder erstellen: Thumbnail-Bilder

Thumbnail-Bilder, auch Miniaturansichten genannt, sind kleinere Versionen größerer Bilder, die als Platzhalter oder zur Vorschau dienen. Sie werden häufig auf Websites verwendet, um Speicherplatz zu sparen, Ladezeiten zu verkürzen und Benutzern eine Vorschau auf das Bild in voller Größe zu geben.

So erstellst du ein Thumbnail-Bild

Um ein Thumbnail-Bild zu erstellen, verwende die width– und height-Attribute des img-Tags. Hier ist ein Beispiel:

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

In diesem Beispiel wird das Bild bild.jpg als Thumbnail mit einer Breite und Höhe von 100 Pixeln angezeigt.

Verwendung von `object-fit`

Du kannst auch das object-fit-Attribut verwenden, um festzulegen, wie das Bild in den Thumbnail-Bereich passt. Dies sind die gängigsten Optionen:

contain: Das Bild wird so skaliert, dass es in den Thumbnail-Bereich passt, ohne abgeschnitten zu werden.
cover: Das Bild wird so skaliert, dass es den gesamten Thumbnail-Bereich ausfüllt, auch wenn Teile des Bildes abgeschnitten werden.

Vorteile von Thumbnail-Bildern

Thumbnail-Bilder bieten mehrere Vorteile:

Geringere Ladezeiten: Kleinere Bilder werden schneller geladen, was die Ladezeiten der Website verkürzt.
Speicherplatzeinsparung: Thumbnail-Bilder belegen weniger Speicherplatz als Bilder in voller Größe.
Benutzerfreundlichkeit: Thumbnails geben Benutzern eine Vorschau auf das Bild in voller Größe und helfen ihnen, sich auf Websites zu orientieren.
Verbesserte SEO: Thumbnail-Bilder können als alternative Inhalte für Bilder in voller Größe dienen, was deine Website für Suchmaschinen optimiert.

Best Practices für Thumbnail-Bilder

Hier sind einige Best Practices für die Verwendung von Thumbnail-Bildern:

Erstelle Thumbnails in konsistenten Größen.
Biete Thumbnails in verschiedenen Auflösungen für unterschiedliche Geräte an.
Verwende komprimierte Bilder, um die Ladezeiten zu verkürzen.
Füge Alt-Text hinzu, um Thumbnail-Bilder für Benutzer mit Sehbehinderungen zugänglich zu machen.

Verknüpfte Bilder erstellen: Links zu anderen Seiten

Wenn du ein Bild anklickbar machen möchtest, kannst du es mit einer Webadresse verknüpfen. Dies ist nützlich, um Benutzer zu anderen Seiten oder Ressourcen auf deiner Website weiterzuleiten.

So erstellst du ein verknüpftes Bild

Um ein verknüpftes Bild zu erstellen, füge einfach das href-Attribut zum img-Tag hinzu und setze es auf die URL der Zielseite.

<a href="https://beispiel.de">
  <img src="bild.jpg">
</a>

Ziel-Attribute zur Steuerung des Linkverhaltens

Du kannst auch die folgenden Zielattribute verwenden, um das Verhalten des Links zu steuern:

target: Bestimmt, in welchem Frame oder Fenster der Link geöffnet wird. Optionen sind _self, _blank, _parent und _top.
rel: Bietet zusätzliche Informationen über die Beziehung zwischen dem Link und der Zielseite. Optionen sind nofollow, noreferrer und noopener.

Anwendungsfälle für verknüpfte Bilder

Verknüpfte Bilder können auf verschiedene Weise verwendet werden, darunter:

Navigation: Verwende Bilder als Buttons oder Menüleisten, um Benutzer zu verschiedenen Bereichen deiner Website zu führen.
Produktpräsentation: Verknüpfe Produktbilder mit deren Produktseiten für detaillierte Informationen.
Marketingkampagnen: Verwende Bilder in Bannern oder Anzeigen, um Benutzer zu Landingpages mit Sonderangeboten zu leiten.

Best Practices für verknüpfte Bilder

Verwende beschreibende Ankertexte: Der Alt-Text des Bildes sollte den Zielort des Links beschreiben.
Optimiere Bilder für die Ladezeit: Große Bilder können die Ladezeit deiner Seite verlangsamen.
Prüfe die Barrierefreiheit: Stelle sicher, dass Benutzer mit Behinderungen auf den Link zugreifen können, indem du einen aussagekräftigen Alt-Text bereitstellst.

Fehlerbehebung: Häufige Probleme beim Einfügen von Bildern

Wenn du Probleme beim Einfügen eines Bildes in HTML hast, sind hier einige häufige Fehler, auf die du stoßen kannst:

Bild wird nicht angezeigt

Überprüfe den Dateipfad: Stelle sicher, dass du den korrekten Pfad zur Bilddatei angegeben hast. Wenn du ein lokales Bild verwendest, sollte der Pfad relativ zum HTML-Dokument sein.
Überprüfe die Schreibweise: Achte auf Tippfehler im Dateinamen oder Pfad des Bildes.
Überprüfe das Bildformat: Nicht alle Browser unterstützen alle Bildformate. Stelle sicher, dass das Bild in einem gängigen Format wie JPEG, PNG oder GIF gespeichert ist.

Bild ist verzerrt oder verschwommen

Überprüfe die Bildgröße: Wenn du die Größe des Bildes mit HTML festlegst, kann dies zu Verzerrungen führen, wenn die ursprünglichen Proportionen nicht beibehalten werden.
Verwende ein Bildbearbeitungsprogramm: Du kannst ein Bildbearbeitungsprogramm wie GIMP oder Photoshop verwenden, um das Bild in den richtigen Größenverhältnissen zu skalieren.
Verwende CSS: Du kannst CSS verwenden, um die Größe des Bildes festzulegen und dabei die Seitenverhältnisse beizubehalten.

Alt-Text fehlt

Alt-Text ist wichtig: Alt-Text ist eine alternative Textbeschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder für Benutzer mit eingeschränkter Sichtbarkeit.
Füge immer Alt-Text hinzu: Vergewissere dich, dass jedes Bild einen aussagekräftigen Alt-Text hat, der den Inhalt des Bildes genau beschreibt.
Verwende ein Tool zur Alt-Text-Generierung: Wenn du Schwierigkeiten hast, Alt-Text zu schreiben, kannst du ein Tool wie WebAIMs Alt-Text Generator verwenden.

Bild ist nicht zentriert

Verwende CSS: Du kannst CSS verwenden, um das Bild zu zentrieren. Verwende die Eigenschaft margin: auto;.
Verwende einen Wrapper: Du kannst einen Div-Wrapper um das Bild legen und die Eigenschaft text-align: center; auf den Wrapper anwenden.
Verwende ein Bildeditor: Du kannst ein Bildeditor-Tool wie Canva verwenden, um das Bild zu zentrieren und dann den HTML-Code zu exportieren.

Best Practices für SEO: Bilder für Suchmaschinen optimieren

Um die Sichtbarkeit deiner Website in Suchmaschinenergebnissen zu verbessern, ist es wichtig, deine Bilder für SEO zu optimieren. Hier sind einige bewährte Praktiken, die du befolgen kannst:

Dateinamen optimieren

Dateinamen sollten kurz, prägnant und beschreibend sein. Vermeide es, generische Namen wie "image.jpg" zu verwenden. Stattdessen solltest du Dateinamen verwenden, die den Inhalt des Bildes genau beschreiben, z. B. "produktschau-t-shirt-rot.jpg".

Alt-Text schreiben

Alt-Text ist ein Attribut, das eine Textbeschreibung des Bildes bereitstellt. Dies ist wichtig für die Barrierefreiheit, da es Benutzern mit Sehbehinderungen das Bild beschreibt. Suchmaschinen verwenden Alt-Text auch, um den Inhalt des Bildes zu verstehen. Achte darauf, dass dein Alt-Text genau ist und Schlüsselwörter enthält, die für dein Bild relevant sind.

Bilder komprimieren

Große Bilddateien können die Ladezeit deiner Website verlangsamen. Komprimiere deine Bilder, um ihre Größe zu reduzieren, ohne dabei wesentlich an Qualität einzubüßen. Dies kann durch Online-Tools wie TinyPNG oder Photoshop erfolgen.

Bildlegende verwenden

Eine Bildlegende ist ein kurzer Text, der unter dem Bild angezeigt wird. Sie bietet zusätzliche Informationen über das Bild und kann Schlüsselwörter enthalten, die für SEO relevant sind. Verwende Bildlegenden sparingly und sorge dafür, dass sie relevant und informativ sind.

Schemaauszeichnung hinzufügen

Schemaauszeichnung ist ein Code, der deiner Website strukturierte Daten hinzufügt. Dies hilft Suchmaschinen, den Inhalt deiner Website besser zu verstehen und kann die Sichtbarkeit deiner Bilder in Bildsuchmaschinen verbessern.

Sitemap aktualisieren

Sobald du deine Bilder für SEO optimiert hast, solltest du deine Sitemap aktualisieren, um die neuen Informationen zu erfassen. Dies stellt sicher, dass Suchmaschinen deine Bilder indizieren und in ihren Ergebnissen anzeigen können.

Cross-Posten in sozialen Medien

Das Posten deiner Bilder in sozialen Medien kann zu einer breiteren Reichweite führen und die Sichtbarkeit deiner Website erhöhen. Optimiere deine Bilder für soziale Medien, indem du ihre Größe an die jeweiligen Plattformen anpasst und beschreibende Bildunterschriften mit relevanten Hashtags hinzufügst.

Indem du diese Best Practices befolgst, kannst du deine Bilder für SEO optimieren und die Sichtbarkeit deiner Website in Suchmaschinenergebnissen verbessern. Dies wird letztendlich zu mehr Traffic auf deiner Website führen und deine Chancen erhöhen, neue Kunden zu gewinnen.

Fortgeschrittene Techniken: Bilder mit CSS gestalten

Neben den grundlegenden HTML-Attributen kannst du CSS verwenden, um Bilder noch vielseitiger zu gestalten und deine Website aufzuwerten. Hier sind einige Möglichkeiten, Bilder mit CSS anzupassen:

Bild positionieren

Mit CSS kannst du Bilder präzise positionieren, indem du die Eigenschaft position und die zugehörigen Eigenschaften wie top, right, bottom und left verwendest. So kannst du Bilder an bestimmten Stellen auf deiner Seite platzieren, unabhängig von ihrem Textfluss.

Bild zuschneiden und skalieren

Mithilfe der CSS-Eigenschaften clip und overflow kannst du Bilder zuschneiden und skalieren. Dies ist nützlich, wenn du nur einen Teil eines Bildes anzeigen oder es auf eine bestimmte Größe beschränken möchtest.

Bildschatten und -rahmen hinzufügen

Du kannst mit CSS auch Schatten und Rahmen zu Bildern hinzufügen, um ihnen Tiefe und Dimension zu verleihen. Die Eigenschaften box-shadow und border ermöglichen es dir, verschiedene Schatteneffekte und Rahmen zu erstellen.

Bilder überlagern

Mit der CSS-Eigenschaft z-index kannst du Bilder übereinander positionieren und deren Stapelreihenfolge bestimmen. Dies ist hilfreich, wenn du beispielsweise ein Wasserzeichen über ein Bild legen oder eine Galerie mit überlappenden Bildern erstellen möchtest.

Bilder animieren

Verwende CSS-Animationen, um Bilder zu animieren und sie dynamischer zu gestalten. Die Eigenschaften transition und animation ermöglichen es dir, Effekte wie Ein- und Ausblenden, Verschieben und Drehen zu erstellen.

Responsive Bilder

Mit CSS kannst du responsive Bilder erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Die Eigenschaft srcset ermöglicht es dir, mehrere Versionen eines Bildes in verschiedenen Auflösungen anzugeben, sodass die optimale Version für den jeweiligen Bildschirm geladen wird.