Wie Man Ein HTML-Bild Hinzufügt

Unabhängig davon, ob Sie ein erfahrener Webentwickler sind oder gerade erst mit WordPress beginnen, wird Sie dieser Leitfaden mit allem ausstatten, was Sie über das Hinzufügen von Bildern in HTML wissen müssen. Wir werden die Grundlagen und Optimierungspraktiken behandeln und sogar fortgeschrittene Techniken erkunden, um die visuelle Attraktivität Ihrer Website zu steigern. Wenn Sie den Elementor Website-Builder verwenden, werden Sie entdecken, wie er den gesamten Bildbearbeitungsprozess vereinfacht!

Verständnis des HTML-Bild-Tags

Das <img>-Tag

Die Grundlage für die Anzeige von Bildern auf einer Webseite liegt im <img> Tag. Dieses Tag fungiert als Platzhalter und weist den Browser an, wo das von Ihnen spezifizierte Bild zu finden und anzuzeigen ist. So sieht ein grundlegendes Bild-Tag aus:

				
					HTML
<img decoding="async" src="https://elementor.com/cdn-cgi/image/f=auto,w=400,h=300/my-image.jpg" alt="A descriptive caption for the image" title="my image Wie man ein HTML-Bild hinzufügt">

Lassen Sie uns die Schlüsselkomponenten dieses Tags aufschlüsseln:

<img>

Dies teilt dem Browser mit, dass Sie ein Bild einfügen möchten. Es ist ein selbstschließendes Tag, was bedeutet, dass Sie kein separates </img> benötigen, um es zu schließen.

src

Dieses essentielle Attribut steht für „source“ (Quelle). Hier geben Sie den Speicherort der Bilddatei an, der eine relative oder absolute URL sein kann:

Relative URL: Verweist auf ein Bild innerhalb des Verzeichnisses Ihrer Website. Beispiel: src=“images/my-image.jpg“ (setzt voraus, dass ein „images“-Ordner existiert)
Absolute URL: Gibt die vollständige Webadresse des Bildes an, selbst wenn es sich auf einer anderen Website befindet. Beispiel: src=“https://www.example.com/images/my-image.jpg“

alt

Dieses Attribut steht für „alternative text“ (alternativer Text). Es bietet eine entscheidende Beschreibung des Bildinhalts. Das Das alt-Attribut ist unerlässlich für:

Barrierefreiheit: Screenreader verlassen sich auf alt-Text, um sehbehinderten Nutzern das Bild zu beschreiben.
SEO: Suchmaschinen verwenden alt-Text, um die Relevanz des Bildes zu verstehen, was möglicherweise das Ranking Ihrer Website verbessert.
Bildfehler: Wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann, erscheint der alt-Text an seiner Stelle.

Die Bedeutung des Alt-Attributs

Während das src-Attribut dem Browser mitteilt, welches Bild angezeigt werden soll, beschreibt das alt-Attribut die Bedeutung. Hier erfahren Sie, wie Sie effektiven Alt-Text schreiben:

Seien Sie deskriptiv: Vermitteln Sie die Essenz des Bildes klar und prägnant.
Kontext ist entscheidend: Berücksichtigen Sie die Rolle des Bildes im umgebenden Inhalt.
Halten Sie es kurz: Streben Sie einen kurzen Satz oder wenige Worte an.
Vermeiden Sie Redundanz: Beginnen Sie nicht mit „Bild von…“ oder „Foto von…“. Screenreader haben bereits angekündigt, dass es sich um ein Bild handelt.

Bilddateiformate und Optimierung

Gängige Bildformate

Die Wahl des richtigen Bildformats ist entscheidend für die Balance zwischen visueller Qualität und Dateigröße, was sich direkt auf die Geschwindigkeit Ihrer Website auswirkt. Hier ist ein Überblick über die gängigsten Web-Bildformate:

JPEG (oder JPG)

Es eignet sich am besten für Fotografien und Bilder mit komplexen Farben und Farbverläufen. Es unterstützt Millionen von Farben und verwendet verlustbehaftete Komprimierung, was bedeutet, dass etwas Bildqualität geopfert wird, um die Dateigröße zu reduzieren.

PNG

Es ist hervorragend für Grafiken, Illustrationen, Logos und Bilder geeignet, bei denen Transparenz erforderlich ist. Es unterstützt sowohl verlustfreie (Originalqualität) als auch verlustbehaftete Komprimierung. PNG-Dateigrößen neigen dazu, größer zu sein als JPEGs.

GIF

Es wird hauptsächlich für einfache Animationen verwendet und unterstützt eine begrenzte Farbpalette. Aufgrund von Dateigrößenbeschränkungen ist es für statische Bilder weniger geeignet.

SVG

Skalierbare Vektorgrafiken, ein XML-basiertes Format, eignen sich hervorragend für Logos, Symbole und Illustrationen. Ihr Hauptvorteil besteht darin, dass sie sich unendlich skalieren lassen, ohne an Qualität zu verlieren, was sie ideal für responsive Websites macht.

Auswahl des richtigen Formats

Hier finden Sie einen kurzen Entscheidungsleitfaden zur Auswahl des geeigneten Bildformats:

Fotografien: JPEG ist in der Regel die beste Wahl.
Grafiken, Logos und Illustrationen mit Transparenz: Entscheiden Sie sich für PNG.
Symbole, einfache Grafiken, die Skalierbarkeit erfordern: Wählen Sie SVG.
Einfache Animationen: GIFs könnten die einzige Option sein, aber erwägen Sie moderne Videoformate für bessere Dateigrößen.

Bildoptimierung

Unabhängig vom gewählten Format ist die Optimierung Ihrer Bilder entscheidend für die Aufrechterhaltung einer schnell ladenden Website. Das Ziel besteht darin, ein Gleichgewicht zwischen der Bewahrung ausreichender Bildqualität und der größtmöglichen Minimierung der Dateigröße zu finden. Hier sind die Gründe, warum Bildoptimierung wichtig ist:

Seitengeschwindigkeit: Große Bilder sind einer der Hauptgründe für langsam ladende Websites, was sich negativ auf die Benutzererfahrung auswirkt.
SEO: Google und andere Suchmaschinen bevorzugen schnell ladende Websites, was bedeutet, dass schlecht optimierte Bilder Ihre Rankings beeinträchtigen können.

Optimierungstechniken

Kompression

Es gibt zwei Haupttypen:

Verlustbehaftet: Opfert einige Bilddaten, um kleinere Dateigrößen zu erreichen. Verwenden Sie diese Technik vorsichtig, um eine merkliche Qualitätsminderung zu vermeiden.
Verlustfrei: Reduziert die Dateigröße ohne Veränderung der Bilddaten, perfekt für Szenarien, in denen Qualität von höchster Bedeutung ist.

Bildgrößenanpassung

Stellen Sie sicher, dass Ihre Bilddimensionen der Art und Weise entsprechen, wie sie auf Ihrer Website angezeigt werden, um das unnötige Laden übergroßer Bilder zu vermeiden.

Bildoptimierungswerkzeuge

Viele Tools und Plugins können Ihnen bei der Bildoptimierung helfen:

Elementor Image Optimizer: Wenn Sie den Elementor Website-Builder verwenden, vereinfacht dieses integrierte Tool die Bildoptimierung für Ihre WordPress-Site.
Bildbearbeitungssoftware: Photoshop, GIMP und andere bieten erweiterte Optimierungssteuerungen.

Bildgestaltung und Responsivität

Festlegen von Bilddimensionen

Kontrollieren Sie die Breite und Höhe Ihrer Bilder für ein professionelles Erscheinungsbild. Sie können dies direkt im HTML mithilfe der width und height Attribute oder mit CSS für eine flexiblere Gestaltung tun. Hier ist ein Beispiel:

				
					HTML
<img fetchpriority="high" fetchpriority="high" decoding="async" src="my-image.jpg" alt="A beautiful sunset" width="400" height="300" title="my image Wie man ein HTML-Bild hinzufügt">

Geben Sie stets die Bilddimensionen an. Dies hilft dem Browser, den korrekten Platz während des Ladens der Seite zuzuweisen, verhindert Inhaltsverschiebungen und verbessert die Benutzererfahrung.

Grundlegende CSS-Gestaltung

Gehen Sie über die Grundlagen hinaus und fügen Sie mit CSS eine ausgeklügeltere Gestaltung zu Ihren Bildern hinzu:

				
					CSS
img {
    border: 2px solid black; /* Adds a border */
    border-radius: 10px; /* Creates rounded corners */
    box-shadow: 5px 5px 10px gray; /* Adds a shadow effect */
    opacity: 0.8; /* Makes the image slightly transparent */
}

Responsive Bilder

In der heutigen Multi-Geräte-Welt ist es unerlässlich, Ihre Bilder responsiv zu gestalten. Responsive Bilder passen ihre Größe flüssig an verschiedene Bildschirmgrößen an und gewährleisten so ein nahtloses Betrachtungserlebnis für alle. Hier sind ein paar gängige Techniken:

max-width: 100%: Diese einfache CSS-Regel stellt sicher, dass Bilder niemals die Breite ihres Containers überschreiten und sich proportional auf kleineren Bildschirmen verkleinern.

				
					CSS
img {
    max-width: 100%; 
    height: auto; /* Maintain aspect ratio */
}

srcset Attribut: Dieses Attribut bietet dem Browser mehrere Bilddateioptionen in verschiedenen Größen und ermöglicht es ihm, die am besten geeignete basierend auf dem Gerät des Benutzers auszuwählen.

				
					HTML
<img decoding="async" srcset="my-image-small.jpg 480w, 
             my-image-medium.jpg 800w, 
             my-image-large.jpg 1200w" src="my-image-medium.jpg" alt="A responsive landscape photo" title="my image medium Wie man ein HTML-Bild hinzufügt">

Ausrichten von Bildern

Steuern Sie, wie Ihre Bilder mit umgebendem Text und Elementen interagieren, mithilfe von CSS oder der HTML float Eigenschaft. Hier erfahren Sie, wie Sie Bilder links, rechts und zentriert ausrichten:

Linksbündige Ausrichtung: float: left; oder text-align: left;
Rechtsbündige Ausrichtung: float: right; oder text-align: right;
Zentrierte Ausrichtung: display: block; margin-left: auto; margin-right: auto;

Fortgeschrittene Bildtechniken

Erstellen von Bildlinks

Verwandeln Sie jedes Bild in einen klickbaren Link, der Benutzer zu einer anderen Seite auf Ihrer Website, einer anderen Website oder sogar zu einem bestimmten Abschnitt auf der aktuellen Seite führt. Hier erfahren Sie, wie Sie dies mit dem <a> Tag machen:

				
					HTML
<a href="https://www.example.com" target="_blank" rel="nofollow noopener">
  <img decoding="async" src="banner-image.jpg" alt="Click here to learn more" title="banner image Wie man ein HTML-Bild hinzufügt">
</a>

Tipps für Bildlinks

Kontext bereitstellen: Informieren Sie die Benutzer entweder im Alt-Text des Bildes oder im umgebenden Text darüber, wohin der Link führen wird.
Visuelle Hinweise: Stiländerungen beim Überfahren mit der Maus, wie eine leichte Umrandung oder Farbänderung, können darauf hinweisen, dass ein Bild anklickbar ist.

Hintergrundbilder mit CSS

Verleihen Sie Ihrer Website visuellen Glanz, indem Sie Bilder als Hintergründe für Elemente wie Abschnitte, Kopfzeilen und mehr verwenden. Hier ist das grundlegende CSS:

				
					CSS
.my-section {
  background-image: url("background-pattern.jpg");
  background-size: cover; /* Scale to cover the entire element */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center; /* Center the background image */
}

Eigenschaften zur Steuerung von Hintergrundbildern

Background-size

Optionen beinhalten:

cover: Skaliert das Bild, um das gesamte Element abzudecken, wobei möglicherweise einige Teile beschnitten werden.
contain: Skaliert das Bild, um in das Element zu passen, wobei möglicherweise Leerraum entsteht.
length: Spezifizieren Sie eine feste Breite und/oder Höhe.

Background-repeat

repeat: Das Bild wird sowohl horizontal als auch vertikal gekachelt.
repeat-x: Das Bild wiederholt sich nur horizontal.
repeat-y: Das Bild wiederholt sich nur vertikal.
no-repeat: Das Bild wird nur einmal angezeigt.

Background-position

Feinjustieren Sie die Positionierung des Bildes mit Werten wie left, right, center oder Prozentangaben.

Imagemaps

Imagemaps ermöglichen es Ihnen, spezifische anklickbare Bereiche innerhalb eines einzelnen Bildes zu definieren, ideal für interaktive Diagramme, Infografiken oder komplexe Navigation. So funktionieren sie:

<map>-Tag

Definiert die Imagemap mit einem eindeutigen Namen.

				
					HTML
<map name="planet-map"> </map>

<area> Tag

Definiert jeden anklickbaren Bereich unter Verwendung von:

shape: Kann rect (Rechteck), circle oder poly (Polygon) sein
coords: Koordinaten zur Definition der Grenzen der Form
href: Das Linkziel für diesen spezifischen Bereich

				
					HTML
<area shape="circle" coords="100, 100, 50" href="https://www.example.com/mars">

Verknüpfen des Bildes

Verwenden Sie das usemap-Attribut innerhalb des <img>-Tags, um das Bild mit der Map zu verbinden.

				
					HTML
<img decoding="async" src="planets.jpg" alt="Planets" usemap="#planet-map" title="planets Wie man ein HTML-Bild hinzufügt">

Lazy Loading

Optimieren Sie die Leistung Ihrer Website, indem Sie das Laden von Bildern verzögern, die für den Benutzer nicht sofort sichtbar sind. Lazy Loading lässt die anfängliche Seitenladung erheblich schneller erscheinen.

Funktionsweise

Bilder unterhalb der Falz (nicht initial im Viewport) erhalten Platzhalterbilder oder werden erst geladen, wenn der Benutzer nach unten scrollt.

Vorteile

Schnellere anfängliche Seitenladezeiten
Reduzierter Bandbreitenverbrauch
Verbesserte SEO-Bewertungen

Verbesserung Ihres Workflows mit Elementor

Nahtloses Bildmanagement

Elementor vereinfacht die Bildverwaltung mit seiner intuitiven Benutzeroberfläche und leistungsstarken Funktionen:

Drag-and-Drop-Medienbibliothek

Laden Sie Ihre Bilder einfach hoch, organisieren und greifen Sie von einem zentralen Ort aus darauf zu. Suchen, sortieren und filtern Sie, um schnell das zu finden, was Sie benötigen.

Das Bild-Widget

Fügen Sie mühelos Bilder zu Ihren Seiten und Beiträgen mit dem dedizierten Bild-Widget hinzu. Passen Sie Folgendes direkt im Elementor-Editor an:

Bildquelle (hochladen oder aus der Medienbibliothek auswählen)
Alt-Text
Bildunterschrift
Styling (Breite, Höhe, Ränder, Schatten usw.)
Ausrichtung
Verlinkung
Responsives Verhalten

Bearbeitung in Echtzeit

Mit Elementors visuellem Editor sehen Sie genau, wie Ihre Bilder innerhalb Ihres Inhalts aussehen werden, und können Anpassungen in Echtzeit vornehmen.

Elementor Image Optimizer

Wenn der Elementor Website-Builder eine integrierte Bildoptimierungsfunktion enthält, ist dies ein signifikanter Vorteil:

Automatische Optimierung: Vereinfachen Sie Ihren Workflow, indem Elementor Bilder automatisch optimiert, während Sie sie hochladen, und so die beste Balance zwischen visueller Qualität und Dateigröße gewährleistet.
Anpassung: Einige Optimierungsfunktionen ermöglichen es Ihnen, den Komprimierungsgrad zu steuern oder bestimmte Bilder von der Optimierung auszuschließen.

Fazit

Bilder sind der Grundstein für visuell ansprechende und fesselnde Websites. Von dem Verständnis des grundlegenden <img>-Tags bis hin zur Anwendung fortgeschrittener Techniken wie Imagemaps und Lazy Loading gibt es viel zu beachten, um die Bildverwendung in HTML zu meistern.

Bedenken Sie, dass die Wahl der geeigneten Bildformate und der Einsatz von Optimierungsstrategien wesentlich sind, um eine schnell ladende Website aufrechtzuerhalten. Dies ist von entscheidender Bedeutung, um eine nahtlose Benutzererfahrung zu gewährleisten und das Wohlwollen der Suchmaschinen zu bewahren.

Wenn Sie ein WordPress-Nutzer sind und den Elementor-Website-Builder verwenden, haben Sie Zugang zu einem optimierten Workflow für die Bildverwaltung. Elementors intuitive Funktionen und die potenzielle Integration von Bildoptimierungstools erleichtern Ihre Arbeit erheblich. Darüber hinaus bietet Elementor Hosting eine leistungsstarke Grundlage mit seiner Geschwindigkeit, globalen Reichweite und verbesserten Sicherheit – alles darauf zugeschnitten, Ihrer bildreichen WordPress-Website die bestmögliche Plattform zu bieten.

Indem Sie die in diesem Leitfaden dargelegten Prinzipien und Techniken befolgen, sind Sie auf dem besten Weg, Ihrer Website Bilder hinzuzufügen, die sowohl Ihre Besucher beeindrucken als auch außergewöhnlich gut funktionieren!