Bild zu HTML hinzufügen – Von der grundlegenden Syntax bis zu fortgeschrittenen Techniken

In diesem Artikel werden verschiedene Methoden zum Einfügen von Bildern in HTML vorgestellt, von einfachen <img>-Tags bis hin zu fortgeschrittenen Techniken wie der Verwendung von CSS und JavaScript. Er behandelt auch die besten Praktiken für Leistung und Zugänglichkeit und bietet HTML-Beispiele, die Ihnen helfen, Bilder einfach in Ihre Webprojekte zu integrieren.

Bilder in HTML

Wenn Webseiten nur aus Text bestehen würden, wären sie ziemlich langweilig. Bilder und andere Medientypen spielen eine entscheidende Rolle, wenn es darum geht, Inhalte optisch ansprechend, ansprechend und informativ zu gestalten. Daher ist das Hinzufügen von Bildern zu HTML ein wesentlicher Bestandteil der Webentwicklung.

Bildformate. Die Wahl des richtigen Bildformats beeinflusst die Ladegeschwindigkeit und die Qualität:

JPEG – am besten geeignet für Fotos und komplexe Bilder;
PNG – unterstützt Transparenz, ideal für Icons und Logos;
SVG – skalierbares Vektorformat, ideal für Webgrafiken;
GIF – unterstützt Animationen, ist aber auf 256 Farben beschränkt;
WebP – modernes Format mit hervorragender Komprimierung und Qualität.

Für eine optimale Leistung und Suchmaschinenoptimierung sollten Sie Bilder komprimieren, um die Dateigröße zu verringern, und beschreibende Dateinamen verwenden, um die Sichtbarkeit bei der Suche zu verbessern.

Hinweis: Suchmaschinen lesen auch die Dateinamen von Bildern und berücksichtigen sie bei der Optimierung von Suchanfragen. Geben Sie Ihren Bildern also aussagekräftige Namen: “landschaft.jpg” ist besser als “bild1.jpg”.

Hinzufügen von Bildern mit dem `<img>` Tag

Der einfachste Weg, ein Bild in eine HTML-Seite einzufügen, ist die Verwendung des <img>-Tags. Dieses Element enthält keinen schließenden Tag und erfordert die Verwendung von mindestens einem Attribut – src, das den Pfad zu dem Bild enthält, das Sie in die Seite einbetten möchten. Für eine bessere Suchmaschinenoptimierung empfiehlt es sich jedoch, auch andere Attribute zu verwenden. Zu den wichtigsten Attributen gehören:

src – gibt eine URL an, die auf das Bild verweist, das Sie in die Seite einbetten möchten. Dies kann eine relative URL, eine absolute URL oder Base64-kodierte Daten sein. Ohne das Attribut src hat das Element <img> kein Bild zu laden.
alt – bietet alternativen Text für Barrierefreiheit und SEO. Der Alt-Text sollte die Absicht, den Zweck und die Bedeutung des Bildes wiedergeben.
width und height – geben die Breite und Höhe des Bildes in Pixeln an. Wenn width und height nicht angegeben werden, kann die Webseite flackern, während das Bild geladen wird.

Wenn Ihr Bild landscape.jpg heißt und sich im gleichen Verzeichnis wie Ihre HTML-Seite befindet, können Sie es wie unten gezeigt einbetten:

1<img src="landscape.jpg" alt="Summer landscape – a field with windmills." width="400" height="150">

Hinweis: Viele Bilder im Internet sind urheberrechtlich geschützt. Die Verletzung des Urheberrechts ist illegal. Wenn Sie das Bild nicht selbst erstellt, sondern aus dem Internet entnommen haben, sollten Sie sich vergewissern, dass das Bild öffentlich zugänglich ist oder Sie die Erlaubnis haben, es zu verwenden.

Hinzufügen von Bildern aus verschiedenen Quellen

Bilder in HTML können über lokale Dateipfade, Remote-URLs oder direkt eingebettet mit Base64-Kodierung hinzugefügt werden.

Lokale Bilder

Die Verwendung lokaler Bilder ist oft besser als die Verwendung von Remote-Bildern, da sie schneller geladen werden, die Abhängigkeit von externen Servern verringern und die Verfügbarkeit auch dann gewährleisten, wenn die Internetverbindung langsam ist oder der Remote-Server nicht verfügbar ist. Lokale Images verbessern auch die Sicherheit, da sie eine potenzielle Nachverfolgung oder unbefugte Änderungen aus Drittquellen verhindern.

Wenn sich das Bild in einem Unterverzeichnis images im gleichen Verzeichnis wie die HTML-Seite befindet, können Sie es wie folgt einbetten:

1<html>
2	<body>
3		<h1>Adding Images Using img Tag</h1>
4		<img src="images/landscape.png" alt="Summer landscape – a field with windmills." width="400" height="150" >
5		<p>When an image is loaded without specified width and height attributes, the browser initially doesn’t reserve space for it, causing content to shift as the image loads.</p>
6	</body>
7</html>

Bildbreite und -höhe

Wenn ein Bild geladen wird, ohne dass die Attribute width und height angegeben sind, reserviert der Browser anfangs keinen Platz für das Bild, wodurch sich der Inhalt beim Laden des Bildes verschiebt. Dieses Phänomen wirkt sich negativ auf die Benutzerfreundlichkeit aus und lässt die Seite instabil erscheinen, insbesondere bei langsameren Verbindungen. Durch die Angabe von width und height kann der Browser Platz für das Bild reservieren, bevor es geladen wird, und so plötzliche Verschiebungen im Layout verhindern. Diese Praxis verbessert nicht nur die visuelle Stabilität, sondern auch die wichtigsten Web-Metriken und trägt zur Verbesserung der Suchmaschinenoptimierung und der Gesamtleistung der Website bei.

Die folgende Abbildung zeigt Beispiele für Webseiten: ohne reservierten Platz für ein Bild, das noch nicht geladen wurde (a); Platz ist auf der Webseite für das Bild reserviert, da die Attribute height und width im Tag <img> angegeben wurden (b); eine Webseite mit einem geladenen Bild (c).

Text “Die Abbildung zeigt das Verhalten des Browsers (Layoutverschiebung) nach dem Laden des Bildes.”

Anmerkung: Wenn eine Webseite geladen wird, ruft der Browser das Bild vom Webserver unter dem in src angegebenen Pfad ab und fügt es in die Seite ein. Wenn das Bild fehlt, zeigt der Browser ein Symbol für einen defekten Link und den Alt-Text an.

Entfernte Bilder

Ein absoluter Dateipfad ist der vollständige Pfad zur Bilddatei, beginnend mit dem Stammverzeichnis des Webservers oder mit einer vollständigen URL. Sie können das Bild auch unter Verwendung seiner absoluten URL einbetten, zum Beispiel:

1<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >

Die Verwendung absoluter URLs wird jedoch nicht empfohlen. Wann immer es möglich ist, sollten Sie die Bilder, die Sie auf Ihrer Website verwenden möchten, hosten, was bei einfachen Konfigurationen bedeutet, dass Sie die Bilder für Ihre Website auf demselben Server speichern wie Ihr HTML.

Base64-Kodierung

Mit der Base64-Kodierung können Bilder direkt in HTML als Daten-URIs eingebettet werden, so dass keine separaten Bilddateien erforderlich sind. Dadurch werden HTTP-Anfragen reduziert und die Ladezeiten für kleine Bilder oder Icons verbessert. Base64-kodierte Bilder erhöhen jedoch die Größe der HTML-Datei, was die Leistung beeinträchtigen kann. Sie eignen sich am besten für eingebettete Grafiken, wie Logos oder kleine UI-Elemente, und nicht für große Bilder.

Dieses Codeschnipsel demonstriert, wie Sie Base64-Bilder in HTML einbetten können:

1<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ..." alt="Red circle" width="300" height="200" >

The following HTML code shows how to add an image to an HTML file from three different types of image sources:

 1<html>
 2    <body>
 3		<h1>Add Image to HTML</h1>
 4		<!-- Adding image to HTML using local path -->
 5		<img src="images/georgia-castle.png" alt="Ananuri fortress complex in Georgia" width="350" height="200" >
 6
 7		<!-- Adding image to HTML using absolute URL -->
 8		<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >
 9
10		<!-- Adding image to HTML using Base64 encoded data -->
11		<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIxMDAiIHI9I
12		jgwIiBzdHlsZT0iZmlsbDpyZWQ7IHN0cm9rZS13aWR0aDo1OyBzdHJva2U6dGVhbCIgLz4NCjwvc3ZnPg==" alt="Red circle" width="300" height="200" >
13	</body>
14</html>

Das Bild veranschaulicht die oben geschriebene HTML-Datei. Wir sehen drei Bilder, die aus einer lokalen Datei, einer entfernten Quell-URL und über Base64-kodierte Daten geladen werden.

Text “Drei Bilder, die unter Verwendung eines lokalen Pfads, einer absoluten URL und einer Base64-Kodierung zu HTML hinzugefügt wurden.”

Zusammenfassung

Verwenden Sie <img> Tag – Fügen Sie Bilder mit den Attributen src, alt, width und height hinzu. Alle diese Attribute sind wichtig für die Zugänglichkeit und SEO.
Wählen Sie das richtige Format – Verwenden Sie JPEG (Fotos), PNG (Transparenz), SVG (skalierbar), WebP (optimiert). Das WebP-Format bietet im Vergleich zu Formaten wie JPEG oder PNG eine bessere Komprimierung und Qualität.
Lokale vs. Remote-Bilder – Lokale Bilder werden schneller geladen und sind zuverlässiger; Remote-Bilder sind von externen Servern abhängig.
Optimieren Sie die Leistung – Komprimieren Sie Bilder, verwenden Sie beschreibende Dateinamen und bevorzugen Sie lokales Hosting für Geschwindigkeit und SEO.

HTML-Hintergrundbilder

Neben der Darstellung von Bildern mit dem Tag <img> können Sie mit CSS auch andere Bildmanipulationen vornehmen, z. B. ein Hintergrundbild festlegen. Hintergrundbilder werden in erster Linie zu dekorativen Zwecken verwendet, z. B. zum Hinzufügen von Texturen, Farbverläufen oder Mustern, um die visuelle Attraktivität einer Website zu erhöhen. Um ein Hintergrundbild in HTML einzufügen, können Sie Folgendes verwenden:

das Attribut style für das gewünschte HTML-Element mit der Eigenschaft background-image;
das <style>-Element mit Hintergrundbildinformationen für ein Dokument oder einen Teil eines Dokuments in das <head>-Element.

Hintergrundbild für eine ganze Seite

Wenn Sie der gesamten Webseite ein Hintergrundbild hinzufügen möchten, können Sie die CSS-Eigenschaft background-image für das Element <body> innerhalb des Elements <style> festlegen. Standardmäßig wird ein Hintergrundbild wiederholt, wenn es kleiner ist als das angegebene Element, in diesem Fall das Element <body>:

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-image: url("lioness.png");
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h1>Background Image for an Entire Page</h1>
11	</body>
12</html>

Wenn Sie möchten, dass das Hintergrundbild das gesamte Element bedeckt, können Sie die Eigenschaft background-size auf cover setzen:

1body {
2  background-image: url("lioness.png");
3  background-size: cover;
4}

Um die Wiederholung des Hintergrundbildes zu vermeiden, setzen Sie die Eigenschaft background-repeat auf no-repeat:

1body {
2  background-image: url("lioness.png");
3  background-repeat: no-repeat;
4}

Die folgende Abbildung zeigt drei Computerbildschirme (verkleinert) mit Hintergrundbildern, die mit den Eigenschaften background-image mit Standardeinstellungen (a), background-size: cover (b) und background-repeat: no-repeat (c) hinzugefügt wurden:

Text “Drei Computerbildschirme mit wiederholten Hintergrundbildern (a) mit einem bildschirmfüllenden Bild (b) und einem Bild in seiner eigenen Größe.”

Hinweis: Hintergrundbilder sind rein dekorativ und benötigen keine Attribute wie alt, width oder height, da sie nicht Teil des eigentlichen Seiteninhalts sind. Im Gegensatz zu Bildern, die mit dem <img>-Tag eingefügt werden, übermitteln Hintergrundbilder dem Benutzer keine aussagekräftigen Informationen und werden von Bildschirmlesegeräten nicht gelesen, so dass das Attribut alt für die Barrierefreiheit nicht erforderlich ist. Darüber hinaus werden ihre Abmessungen über CSS gesteuert, so dass es nicht notwendig ist, explizit width oder height zu definieren.

Hintergrundbild für ein HTML-Element

Ein Hintergrundbild für ein HTML-Element wird mit der CSS-Eigenschaft background-image festgelegt, so dass es auf Elemente wie p, div, body oder section angewendet werden kann. Sie können die Positionierung eines Hintergrundbildes mit background-position steuern, die Skalierung mit background-size anpassen und die Reaktionsfähigkeit mit background-repeat verbessern.

Das folgende Beispiel 1 zeigt, wie man ein Hintergrundbild zu einem <p> Element hinzufügt, indem man das style Attribut und die background-image CSS Eigenschaft verwendet:

Beispiel 1

1<p style="background-image: url('winter.png'); "> A background image for an HTML element is set using CSS with the background-image property...</p>

Das folgende Beispiel 2 zeigt, wie man ein Hintergrundbild zu einem <div>-Element hinzufügt, indem man das <style>-Element im <head> des Dokuments und die CSS-Eigenschaft background-image verwendet:

Beispiel 2

 1<html>
 2	<head>
 3		<style>
 4			div {
 5				background-image: url("winter.png");
 6			}
 7		</style>
 8	</head>
 9    <body>
10		<h1>HTML Background Images</h1>
11		<div>
12			<h2>Background Image for an HTML Element</h2>
13			<p> A background image for an HTML element is set using CSS with the background-image property, allowing you to apply images to elements like div, body, or section... </p>
14			<br>
15		</div>
16	</body>
17</html>

Die folgende Abbildung zeigt das Ergebnis der Darstellung der Beispiele 1 und 2: Das Hintergrundbild wird mit dem Attribut style zum Element p hinzugefügt (a); das Hintergrundbild wird mit dem Element style hinzugefügt und auf das Element div angewendet (b).

Text “Zwei Bilder mit dem Text des - und -Elements auf rosa Hintergrund mit weißen Schneeflocken.”

Zusammenfassung

Hintergrundbilder sind im Webdesign nützlich, wenn dekorative visuelle Elemente benötigt werden, ohne die Struktur des Dokuments zu beeinträchtigen.
Verwenden Sie die CSS-Eigenschaft background-image, um Bilder zu Elementen wie <body>, <div> oder <p> hinzuzufügen. Dies kann inline im style-Attribut des Elements, in einem <style>-Block oder in einer externen CSS-Datei geschehen.
Das Attribut alt ist nicht erforderlich. Hintergrundbilder sind dekorativ, nicht Teil des Inhalts, daher benötigen sie keine alt, width oder height Attribute. Zugänglichkeitstools lesen sie nicht.
Hintergrundbilder können die Ladezeit einer Seite verlangsamen, insbesondere wenn sie groß oder nicht optimiert sind. Um die Leistung zu verbessern, verwenden Sie moderne Bildformate wie WebP für eine bessere Komprimierung.

Hinzufügen von Bildern über JavaScript

Während die Verwendung des <img>-Tags für statische Inhalte einfacher ist, ist JavaScript die bessere Wahl, wenn Bilder dynamisch hinzugefügt oder geändert werden müssen.

 1<html>
 2	<body>
 3		<h1>Adding Image via JavaScript</h1>
 4		<script>
 5			// Create a new image element
 6			let img = document.createElement("img");
 7
 8			// Set the image source
 9			img.src = "https://docs.aspose.com/svg/images/api/lioness.jpg";
10
11			// Set alternative text, width and height for accessibility and SEO
12			img.alt = "The muzzle of a lioness close-up. The lioness looks away.";
13			img.width = 350;
14			img.height = 200;
15
16			// Append the image to the body
17			document.body.appendChild(img);
18		</script>
19	</body>
20</html>

Während die Verwendung des Tags <img> für statische Inhalte einfacher ist, ist JavaScript die bessere Wahl, wenn Bilder dynamisch hinzugefügt oder geändert werden sollen. Das Hinzufügen von Bildern über JavaScript ermöglicht bedingtes Laden und träges Laden, was die Leistung und Flexibilität verbessert. Im Gegensatz zu statischen <img>-Tags ermöglicht dieser Ansatz die Fehlerbehandlung, Aktualisierungen in Echtzeit und eine bessere Wartbarkeit in interaktiven Anwendungen.

Inline SVG für Vektorgrafiken verwenden

Die Verwendung von Inline-SVG in HTML ermöglicht es Ihnen, skalierbare Vektorgrafiken direkt in Ihr Dokument einzubetten, ohne dass externe Bilddateien erforderlich sind. Da SVGs auflösungsunabhängig sind, bleiben sie auf allen Bildschirmgrößen scharf, was sie ideal für Symbole, Logos und komplexe Grafiken macht.

 1<html>
 2	<head>
 3		<style>
 4			.page {
 5				width: 160mm;
 6				height: 90mm;
 7				border: 2px solid #026dc5;
 8				text-align: center;
 9			}
10			h1,p {
11				color: #054c87;
12			}
13		</style>
14	</head>
15	<body>
16		<div class="page">
17			<h1>Using Inline SVG as image in HTML</h1>
18			<p>Because SVGs are resolution-independent, they remain crisp on screens of all sizes, making them ideal for icons, logos, and complex graphics...</p>
19			<svg height="140" width="140" viewBox="-40 0 140 140" xmlns="http://www.w3.org/2000/svg">
20				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
21				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
22				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
23				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
24				<circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
25			</svg>
26		</div >
27	</body>
28</html>

Die folgende Abbildung veranschaulicht die oben beschriebene HTML-Datei. Die Datei verwendet ein eingebettetes SVG, das das Logo der Firma Aspose darstellt:

Text “Text aus den h1- und p-Elementen und das Aspose-Logo darunter.”

Siehe auch

Im Artikel Wie füge ich ein Bild in HTML ein? erfahren Sie, wie Sie mit der Aspose.HTML for .NET Bibliothek ein Bild in HTML einfügen können.
Entdecken Sie die Welt der HTML-Farbnamen! Erfahren Sie mehr über die Verwendung von HTML-Farbnamen im Webdesign und wann Sie eine Alternative wählen sollten.
Der Artikel Wie ändert man die Textfarbe in HTML? zeigt, wie man mit der Aspose.HTML for .NET-Bibliothek die Textfarbe in einem HTML-Dokument steuern kann.
Im Artikel Hintergrundfarbe in HTML ändern? finden Sie C#-Beispiele, die zeigen, wie Sie die Hintergrundfarbe sowohl für das gesamte HTML-Dokument als auch für einzelne Elemente festlegen oder ändern können.
Der Artikel Wie kann man die Rahmenfarbe in HTML ändern? beschreibt verschiedene Möglichkeiten, die Rahmenfarbe in HTML-Dateien mit Hilfe der Aspose.HTML for .NET-Bibliothek zu setzen oder zu ändern.

HTML-Farbnamen Was ist HTML DOM?