Wenn du in HTML ein Bild einfügen möchtest, dann geht das ganz einfach über das <img> Tag. Das bedeutet „Image“ wie Bild.

Für ein Bild brauchst du zunächst nur die Quelle des als Pfad und mehr nicht. Die restlichen Parameter die du hinzufügen kannst findest du weiter unten.

So fügst du Bilder in HTML ein:

<img>-Tag:

Dies ist die grundlegende und einfachste Methode, um Bilder in HTML einzubinden.

<img src="bildquelle" alt="Alternativtext">

Erklärung

• src: Pfad zur Bilddatei. Dies kann ein relativer oder absoluter Pfad sein.
• alt: Alternativtext. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann oder für Screenreader-Nutzer.

Beispiel

<img src="images/meineschoenesbild.jpg" alt="Beschreibung meines Bildes">

Optionale Attribute:

• width: Breite des Bildes in Pixeln.
• height: Höhe des Bildes in Pixeln.
• class: CSS-Klasse für das Bild.
• style: Inline-CSS für das Bild.

Verwendung von CSS:

Mit CSS kannst du Bilder flexibler und dynamischer einfügen.

Beispiel:

<img src="bildquelle.jpg" class="bild-klasse">

.bild-klasse {
  width: 200px;
  height: 150px;
  margin: 10px;
  border: 1px solid #ccc;
}

Vorteile:

• Trennung von Inhalt und Design (Stichworte: semantisches HTML)
• Geringeres HTML-Gerüst
• Einfache Anpassung des Aussehens für mehrere Bilder

Einbindung von SVG-Bildern:

SVG-Bilder können direkt in HTML eingefügt werden.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0 L 50 50 L 100 0 Z" fill="#ff0000" />
</svg>

Vorteile:

• Skalierbarkeit ohne Qualitätsverlust
• Geringere Dateigröße
• Detaillierte Bearbeitung möglich

Verwendung von Data-URLs:

Kleine Bilder können direkt in den HTML-Code als Data-URL eingebettet werden.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9AAAAASUVORK5CYII=" alt="Kleines Bild">

Vorteile:

• Keine separaten Bilddateien notwendig
• Geringere Anzahl externer Ressourcen
• Nützlich für kleine Icons und Grafiken

Nachteile:

• Vergrößert die HTML-Datei
• Nicht für große Bilder geeignet

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Kennst du schon diese Memes?

Smiley Bedeutung