WMP Sites
Home Webentwicklung Frontend-Entwicklung HTML Grundlagen Responsive Design Webdesign

Bilder in HTML einfügen: Eine Schritt-für-Schritt-Anleitung

Lukas Fuchs vor 7 Monaten in  Webdesign 3 Minuten Lesedauer

Syntax und Attribute des <img>-Tags

Das <img>-Tag, kurz für "Image", ist ein wesentlicher Bestandteil von HTML und ermöglicht es dir, Bilder in deine Webseiten einzubeziehen. Es handelt sich um ein leeres Tag, was bedeutet, dass es keine schließende Markierung hat.

Attribute des <img>-Tags

Obligatorische Attribute:

  • src: Das Pfad-Attribut gibt die URL oder den Dateipfad zum Bild an.
  • alt: Das Alternativtext-Attribut enthält eine textliche Beschreibung des Bildes, die für Screenreader und andere assistive Technologien verwendet wird.

Optionale Attribute:

  • width: Legt die Breite des Bildes in Pixeln fest.
  • height: Legt die Höhe des Bildes in Pixeln fest.
  • style: Ermöglicht dir die Anwendung von CSS-Styles auf das Bild.
  • title: Erstellt einen Tooltip, der beim Hovern über das Bild angezeigt wird.
  • usemap: Verknüpft das Bild mit einer Bildkarte (einem Image-Map), die clickable Bereiche im Bild definiert.
  • ismap: Gibt an, dass das Bild eine Bildkarte ist.
  • loading: Bestimmt, wie das Bild geladen werden soll ("lazy" für verzögertes Laden, "eager" für sofortiges Laden).

Syntax

Die Syntax für das <img>-Tag lautet wie folgt:

<img src="bildpfad.jpg" alt="Alternativtext">

Beispiel:

<img src="mein-bild.jpg" alt="Ein wunderschöner Sonnenuntergang am Strand">

Häufig gestellte Fragen

Was ist der Alternativtext?

Der Alternativtext ist eine Beschreibung des Bildes, die für Benutzer angezeigt wird, die das Bild nicht sehen können, z. B. Menschen mit Sehbehinderungen. Er ist auch für Suchmaschinen wichtig, da er ihnen hilft, die Inhalte deines Bildes zu verstehen.

Wie kann ich die Bildgröße festlegen?

Du kannst die Bildgröße mit den Attributen "width" und "height" angeben. Beispielsweise legt der folgende Code ein Bild mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln fest:

<img src="mein-bild.jpg" alt="Ein wunderschöner Sonnenuntergang am Strand" width="200" height="100">

Wie kann ich einen Tooltip zu einem Bild hinzufügen?

Du kannst den Tooltip mit dem Attribut "title" hinzufügen. Beispielsweise fügt der folgende Code einen Tooltip mit dem Text "Mein Bild" hinzu:

<img src="mein-bild.jpg" alt="Ein wunderschöner Sonnenuntergang am Strand" title="Mein Bild">

Platzierung des Bildes im HTML-Code

Um ein Bild in deine HTML-Seite einzufügen, musst du das <img>-Tag verwenden. Dieses Tag muss innerhalb des <body>-Tags deiner Seite platziert werden.

Wo im Code sollte das Bild platziert werden?

Die Platzierung des Bildes im HTML-Code bestimmt, wo es auf der Seite angezeigt wird. Du kannst das Bild an einer beliebigen Stelle innerhalb des <body>-Tags einfügen.

Weitere Einzelheiten findest du in: GIFs in HTML: Ein Leitfaden zur Verwendung animierter Grafiken

Wenn du das Bild in der Mitte der Seite platzieren möchtest, kannst du es zwischen zwei Absätzen einfügen. Wenn du das Bild am Anfang oder Ende der Seite platzieren möchtest, kannst du es direkt vor oder nach dem <body>-Tag einfügen.

Wie kann ich das Bild in Bezug auf den umgebenden Text positionieren?

Du kannst die Ausrichtung des Bildes in Bezug auf den umgebenden Text mithilfe des float-Attributs festlegen. Dieses Attribut kann auf left, right oder none gesetzt werden.

Wenn du das Bild beispielsweise nach links ausrichten möchtest, kannst du folgendes verwenden:

<img src="bild.jpg" alt="Bildbeschreibung" float="left">

Wenn du das Bild nicht ausrichten möchtest, kannst du float auf none setzen.

Festlegung der Bildgröße und -Ausrichtung

Um die Größe und Ausrichtung deiner Bilder anzupassen, verwendest du die folgenden Attribute des <img>-Tags:

Breite und Höhe

Mit den Attributen width und height kannst du die Größe des Bildes in Pixeln festlegen. So gibst du beispielsweise ein Bild mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln an:

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

Bildausrichtung

Um die Ausrichtung des Bildes im Text zu steuern, verwendest du das Attribut align. Es gibt drei mögliche Ausrichtungsoptionen:

  • align="left": Richtet das Bild links im Text aus.
  • align="right": Richtet das Bild rechts im Text aus.
  • align="center": Zentriert das Bild im Text.

Beispielsweise könntest du ein Bild rechts im Text ausrichten:

<img src="bild.jpg" align="right">

Responsives Design

Um sicherzustellen, dass deine Bilder auf allen Geräten gut aussehen, solltest du responsives Design verwenden. Hierfür verwendest du max-width: 100%; und height: auto; im CSS-Stil des Bildes. So wird das Bild proportional zu seiner ursprünglichen Größe skaliert und passt sich an die Breite des Containers an.

Für mehr Details, lies auch: Bilder in HTML einfügen: Eine Schritt-für-Schritt-Anleitung

<img src="bild.jpg" style="max-width: 100%; height: auto;">

Tipps

  • Achte darauf, dass die angegebenen Maße mit der tatsächlichen Größe des Bildes übereinstimmen, um Verzerrungen zu vermeiden.
  • Verwende relative Maßeinheiten wie Prozentangaben (z. B. width="50%"), um die Skalierbarkeit auf verschiedenen Geräten zu gewährleisten.
  • Überprüfe die Ausrichtung des Bildes in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass es wie gewünscht angezeigt wird.

Hinzufügen eines Alternativtexts für Barrierefreiheit

Ein Alternativtext (Alt-Text) ist eine Textbeschreibung eines Bildes, die von Bildschirmlesegeräten verwendet wird, um Sehbehinderten den Inhalt des Bildes zu vermitteln. Er ist auch wichtig für die Suchmaschinenoptimierung (SEO), da er Suchmaschinen hilft, die Bedeutung des Bildes zu verstehen.

Warum ist ein Alt-Text wichtig?

  • Barrierefreiheit: Sehbehinderte Benutzer können den Inhalt von Bildern nicht sehen, daher benötigen sie einen Alternativtext, um den Inhalt zu verstehen.
  • SEO: Suchmaschinen können Bilder nicht "sehen" und verwenden daher den Alt-Text, um zu bestimmen, worum es auf dem Bild geht.
  • Usability: Alt-Texte können auch in Situationen hilfreich sein, in denen Bilder nicht geladen werden können oder wenn Benutzer Bilder auf Plattformen wie Social Media anzeigen, auf denen Bilder häufig abgeschnitten werden.

So fügst du einen Alt-Text hinzu

Um einen Alt-Text hinzuzufügen, verwendest du das alt-Attribut im img-Tag. Der Wert des alt-Attributs sollte eine kurze, prägnante Beschreibung des Bildes sein.

<img src="bild.jpg" alt="Eine Katze, die auf einem Baum sitzt">

Best Practices für Alt-Texte

  • Sei prägnant: Der Alt-Text sollte kurz und auf den Punkt gebracht sein, normalerweise nicht länger als 120 Zeichen.
  • Sei beschreibend: Beschreibe, was auf dem Bild zu sehen ist, anstatt einfach zu wiederholen, was der Dateiname sagt.
  • Verwende keine Schlüsselwörter: Füge keine Schlüsselwörter in den Alt-Text ein, nur um die SEO zu verbessern. Dies kann als Spam angesehen werden.
  • Sei genau: Der Alt-Text sollte das Bild genau beschreiben, ohne irreführende oder übertriebene Informationen hinzuzufügen.
  • Denke an den Kontext: Berücksichtige den Kontext der Seite, auf der sich das Bild befindet, wenn du den Alt-Text schreibst.

Verlinken eines Bildes mit einer Website oder URL

Hast du ein Bild, auf das du aufmerksam machen möchtest? Du kannst es mit einer Website oder einer bestimmten URL verlinken, um Besuchern die Möglichkeit zu geben, mehr zu erfahren oder zu interagieren.

Verwendung des -Tags

Um ein Bild zu verlinken, verwendest du das <a>-Tag (für Hyperlink). Dies funktioniert ähnlich wie das Verlinken von Text mit einer URL.

<a href="www.beispiel-website.de">
  <img src="bild.jpg" alt="Beschreibung des Bildes">
</a>

Attribute des -Tags

Beim Verlinken von Bildern mit dem <a>-Tag stehen dir folgende Attribute zur Verfügung:

  • href: Die URL der Ziel-Website oder Seite, auf die das Bild verlinken soll.
  • target: Bestimmt, wo der Link geöffnet wird. _blank öffnet in einem neuen Tab oder Fenster, während _self im selben Tab bleibt.
  • title: Zeigt einen Tooltip an, wenn du über das Bild fährst.

Vorteile des Verlinkens von Bildern

Das Verlinken von Bildern hat mehrere Vorteile:

  • Erhöhte Interaktion: Ermöglicht Besuchern, auf zusätzliche Informationen oder Inhalte zuzugreifen.
  • Verbesserte Benutzererfahrung: Macht die Website intuitiver und nutzerfreundlicher.
  • SEO-Vorteile: Kann die Sichtbarkeit in Suchmaschinen verbessern, indem es relevante Inhalte mit Bildern verknüpft.

Vorsichtsmaßnahmen

Beim Verlinken von Bildern solltest du folgende Vorsichtsmaßnahmen beachten:

  • Verwende relevante und kontextbezogene Links.
  • Teste die Links, um sicherzustellen, dass sie funktionieren.
  • Optimiere Bilder für die Webnutzung, um lange Ladezeiten zu vermeiden.

Fehlerbehebung bei Problemen beim Anzeigen von Bildern

Wenn Bilder auf deiner Website nicht korrekt angezeigt werden, kann dies auf verschiedene Probleme zurückzuführen sein. Hier sind einige распространенные Fehler und ihre Lösungen:

Der Bildpfad ist falsch

Stelle sicher, dass der Pfad zum Bild in deinem -Tag korrekt ist. Überprüfe, ob der Dateiname und der Verzeichnispfad richtig sind.

Für weitere Informationen, siehe auch: HTML-Login-Formulare erstellen: Ein umfassender Leitfaden für Anfänger und Fortgeschrittene

Die Bilddatei existiert nicht

Überprüfe, ob die Bilddatei an dem angegebenen Speicherort existiert. Möglicherweise hast du den Dateinamen oder den Pfad falsch geschrieben.

Fehlende Bildberechtigungen

Stelle sicher, dass du die richtigen Berechtigungen hast, um auf die Bilddatei zuzugreifen. Wenn das Bild auf einem Server gehostet wird, überprüfe, ob du Zugriff auf das Verzeichnis hast.

Browser-Cache

Manchmal kann dein Browser den Cache zwischenspeichern und die neueste Version des Bildes nicht anzeigen. Versuche, den Cache deines Browsers zu leeren oder die Seite im Inkognito-Modus zu öffnen.

Netzwerkprobleme

Überprüfe deine Internetverbindung. Möglicherweise hast du Verbindungsprobleme, die das Laden des Bildes verhindern.

Bildformat nicht unterstützt

Stelle sicher, dass das von dir verwendete Bildformat von deinem Browser unterstützt wird. Übliche Bildformate sind JPEG, PNG, GIF und WebP.

Weitere Informationen findest du unter: Das Style-Attribut von HTML: Gestalten Sie Ihre Website mit Stil

Verweise auf CDN

Wenn du Bilder über ein Content Delivery Network (CDN) bereitstellst, überprüfe, ob das CDN ordnungsgemäß funktioniert und das Bild verfügbar ist.

Fehler beim Hochladen

Wenn du das Bild hochgeladen hast, kann es zu einem Fehler gekommen sein. Versuche, das Bild erneut hochzuladen oder kontaktiere deinen Website-Host für Unterstützung.

Optimierung von Bildern für die Webnutzung

Bilder sind entscheidend, um deinen Inhalten visuelle Wirkung zu verleihen, aber sie können auch die Ladezeit deiner Website verlangsamen, wenn sie nicht richtig optimiert werden. Indem du ein paar Best Practices befolgst, kannst du sicherstellen, dass deine Bilder sowohl ansprechend als auch webfreundlich sind.

Dateigröße reduzieren

Je größer die Dateigröße eines Bildes, desto länger dauert seine Übertragung und Anzeige. Verwende Bildbearbeitungsprogramme wie Photoshop oder GIMP, um die Dateigröße deiner Bilder ohne nennenswerten Qualitätsverlust zu reduzieren.

Bildformate wählen

Verschiedene Bildformate bieten unterschiedliche Kompressionsstufen. Für Fotos eignet sich JPEG gut, da es Bilder mit hoher Qualität bei relativ geringer Dateigröße liefert. Für Logos und andere Grafiken empfiehlt sich PNG, da es scharfe Kanten und transparente Hintergründe unterstützt.

Weitere Informationen findest du in diesem Artikel: So fügen Sie eine Linie in HTML ein: Eine schrittweise Anleitung

Adaptive Bildgrößen verwenden

Um sicherzustellen, dass deine Bilder auf Geräten unterschiedlicher Größe ordnungsgemäß angezeigt werden, kannst du -Elemente verwenden. -Elemente ermöglichen es dir, mehrere Bildquellen mit verschiedenen Abmessungen anzugeben. Der Browser wählt dann basierend auf der Bildschirmgröße des Benutzers die am besten geeignete Bildquelle aus.

Ladezeiten optimieren

Neben der Optimierung der Dateigröße kannst du auch Techniken wie Lazy Loading einsetzen, um die Ladezeiten zu verkürzen. Lazy Loading verschiebt das Laden von Bildern, bis sie im sichtbaren Bereich des Benutzers erscheinen. Dies kann die anfängliche Ladezeit deiner Website erheblich verbessern.

Responsives Webdesign implementieren

Ein responsives Webdesign passt deine Website-Inhalte an die Bildschirmgröße des Benutzers an. Damit stellst du sicher, dass deine Bilder auf allen Geräten, von Desktops bis zu Smartphones, gut aussehen.

Best Practices für die Verwendung von Bildern

Denke daran, beim Einfügen von Bildern in deine HTML-Dokumente auch die folgenden Best Practices zu beachten:

  • Verwende beschreibende Dateinamen für Bilder, um die Barrierefreiheit zu verbessern.
  • Füge Alternativtexte hinzu, um den Inhalt von Bildern für Benutzer zu beschreiben, die assistive Technologien verwenden.
  • Überprüfe die Ladezeiten deiner Bilder regelmäßig mit Tools wie PageSpeed Insights von Google.
  • Optimiere deine Bilder mit Tools wie TinyPNG oder Compressor.io.

Best Practices für die Verwendung von Bildern in HTML

Bei der Verwendung von Bildern in HTML gibt es einige bewährte Verfahren, die du beachten solltest, um sicherzustellen, dass deine Website optimal funktioniert und barrierefrei ist.

Für mehr Details, lies auch: HTML-Beispiele: Praktische Anwendung von HTML-Elementen

Ladezeiten optimieren

Bilder können die Ladezeit deiner Website erheblich beeinträchtigen. Verwende daher immer optimierte Bilder. Du kannst Bilder mit kostenlosen Online-Tools wie TinyPNG oder Compressor.io komprimieren.

Verwende das richtige Bildformat

Wähle das richtige Bildformat für den jeweiligen Verwendungszweck. PNG eignet sich für Bilder mit hoher Auflösung, während JPEG für Bilder mit geringer Auflösung geeignet ist. SVG ist ein Vektorformat, das sich gut für Logos und Symbole eignet.

Füge Alternativtexte hinzu

Alternativtexte sind für Barrierefreiheit unerlässlich. Sie beschreiben den Inhalt eines Bildes für Benutzer, die Bildschirmlesegeräte verwenden oder wenn das Bild nicht geladen werden kann.

Setze Bilder semantisch ein

Verwende Bilder nicht nur zur Dekoration. Verwende sie, um Informationen zu vermitteln oder den Text zu ergänzen. Dies verbessert die Benutzererfahrung und macht deine Website für Suchmaschinen zugänglicher.

Berücksichtige Urheberrechte

Verwende nur Bilder, für die du die Nutzungsrechte besitzt oder die unter einer Creative-Commons-Lizenz stehen. Andernfalls kannst du Urheberrechtsverletzungen begehen.

Verwende responsives Design

Bilder sollten sich an verschiedene Bildschirmgrößen anpassen. Verwende CSS-Media-Abfragen oder das Attribut srcset, um sicherzustellen, dass deine Bilder auf allen Geräten optimal angezeigt werden.

Mehr dazu erfährst du in: Das HTML-Div-Tag: Ein umfassender Leitfaden zum Erstellen flexibler Layouts

Verwende Lazy Loading

Lazy Loading lädt Bilder erst, wenn sie auf dem Bildschirm angezeigt werden. Dies verkürzt die Ladezeit deiner Website, indem verhindert wird, dass nicht sichtbare Bilder geladen werden. Du kannst Lazy Loading mit JavaScript-Bibliotheken wie Lazysizes implementieren.

Verwandte Artikel

Folge uns

Neue Posts

Thumbnail

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Thumbnail

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts

SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern

Sicherheitsrichtlinien

POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web

Webentwicklung

LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben

Dokumentenerstellung

Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden

Fehlerbehebung

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers

Fehlerbehebung

Linux Mint Themes: Personalisieren Sie Ihren Desktop

Open Source

TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose

Fehlerbehebung

Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung

Anleitungen

Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal

Open Source