HTML - Bilder

Einfügen von Bildern

<img src="bild-url" alt="alternativer-text">

<img src="beispiel.jpg" alt="Beispielbild" width="500" height="300">

Bildpositionierung

Der <img>-Tag wird verwendet, um Bilder in ein HTML-Dokument einzufügen. Die Positionierung und das Layout der Bilder können Sie jedoch mit CSS steuern. CSS bietet mehrere Eigenschaften, mit denen Sie Bilder auf Ihrer Webseite positionieren können.

Eine Möglichkeit zur Bildpositionierung ist die Verwendung der float-Eigenschaft. Mit der float-Eigenschaft können Sie ein Bild links oder rechts neben dem umgebenden Inhalt platzieren. Wenn ein Bild gefloatet wird, umfließen der Text oder die Elemente daneben das Bild.

<img src="example.jpg" alt="Beispielbild" class="float-left">
<p>Dies ist ein Text, der um das gefloatete Bild fließen wird.</p>

.float-left {
  float: left;
  margin-right: 10px;
}

In diesem Beispiel wird das Bild mit float: left nach links gefloatet, und ein rechter Abstand wird hinzugefügt, um Platz zwischen dem Bild und dem daneben stehenden Text zu schaffen.

Eine andere Möglichkeit zur Bildpositionierung ist die Verwendung der display-Eigenschaft. Standardmäßig sind Bilder Inline-Elemente, was bedeutet, dass sie im Text fließen. Sie können jedoch die Darstellung von Bildern mit Werten wie block, inline-block oder flex ändern.

<img src="example.jpg" alt="Beispielbild" class="display-block">

.display-block {
  display: block;
  margin: 0 auto;
}

In diesem Fall wird das Bild als Block-Level-Element mit display: block dargestellt und mit margin: 0 auto horizontal zentriert.

Die position-Eigenschaft ist ein weiteres Werkzeug zur Bildpositionierung. Sie ermöglicht es Ihnen, Bilder relativ zu ihrer normalen Position (position: relative), relativ zum nächsten positionierten Vorfahren (position: absolute) oder fixiert im Browserfenster (position: fixed) zu positionieren.

<div class="container">
  <img src="example.jpg" alt="Beispielbild" class="position-absolute">
</div>

.container {
  position: relative;
  height: 400px;
}

.position-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

In diesem Beispiel wird das Bild absolut positioniert, 20 Pixel vom oberen und linken Rand seines nächsten positionierten Vorfahren entfernt (dem <div> mit der Klasse container).

Durch die Kombination dieser CSS-Positionierungstechniken mit anderen Eigenschaften wie margin, padding und z-index können Sie die Platzierung und das Layout von Bildern auf Ihren Webseiten steuern. Probieren Sie verschiedene Positionierungsmethoden aus, um den besten Ansatz für Ihre Designanforderungen zu finden.

Responsive Bilder

HTML bietet verschiedene Techniken zur Erstellung von responsiven Bildern.

Eine Möglichkeit, responsive Bilder bereitzustellen, ist die Verwendung des srcset-Attributs im <img>-Tag. Mit dem srcset-Attribut können Sie mehrere Bildquellen zusammen mit ihren jeweiligen Breiten oder Pixeldichten angeben. Der Browser kann dann das am besten geeignete Bild basierend auf der Bildschirmgröße und Auflösung des Geräts auswählen.

<img src="image-small.jpg"
     srcset="image-small.jpg 400w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     alt="Responsives Bild">

Das srcset-Attribut stellt drei verschiedene Bildquellen mit ihren entsprechenden Breiten (400w, 800w und 1200w) bereit. Der Browser wählt das Bild aus, das am besten zur Bildschirmgröße und Auflösung des Geräts passt.

Eine weitere Technik für responsive Bilder ist die Verwendung des <picture>-Elements. Das <picture>-Element dient als Container für mehrere <source>-Elemente, die jeweils unterschiedliche Bildquellen und Medienabfragen angeben. Dadurch können Sie verschiedene Bilder für unterschiedliche Bildschirmgrößen oder Geräteeigenschaften definieren.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="Responsives Bild">
</picture>

Das <picture>-Element enthält zwei <source>-Elemente mit Medienabfragen. Das erste <source>-Element gibt ein Bild für Bildschirme mit einer Mindestbreite von 1200px an, während das zweite <source>-Element auf Bildschirme mit einer Mindestbreite von 800px abzielt. Das <img>-Element innerhalb des <picture>-Elements dient als Fallback für Browser, die das <picture>-Element nicht unterstützen.

Art Direction ist ein weiteres Konzept im Zusammenhang mit responsiven Bildern. Bei Art Direction werden unterschiedliche Bildzuschnitte oder Kompositionen basierend auf der Bildschirmgröße oder dem Seitenverhältnis des Geräts bereitgestellt. Dies stellt sicher, dass die wichtigsten Teile des Bildes auf verschiedenen Geräten sichtbar sind.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium-cropped.jpg">
  <img src="image-small-cropped.jpg" alt="Responsives Bild">
</picture>

Die <source>-Elemente innerhalb des <picture>-Elements geben verschiedene Bildzuschnitte für unterschiedliche Bildschirmgrößen an. Die Bilder "image-medium-cropped.jpg" und "image-small-cropped.jpg" sind zugeschnittene Versionen des Originalbildes, optimiert für mittlere und kleine Bildschirme.

Durch die Verwendung von responsiven Bildtechniken wie srcset, <picture> und Art Direction können Sie eine optimale Betrachtungserfahrung für Benutzer auf verschiedenen Geräten bieten. Diese Techniken helfen Ihnen, Bilder bereitzustellen, die für unterschiedliche Bildschirmgrößen, Auflösungen und Seitenverhältnisse geeignet sind, was zu schnelleren Seitenladezeiten und verbessertem Benutzerengagement führt.

Barrierefreiheit

Barrierefreiheit ist ein wichtiger Aspekt des Webdesigns. Sie stellt sicher, dass Ihre Inhalte von allen genutzt werden können, einschließlich Menschen mit Behinderungen. Bei Bildern gibt es mehrere Punkte zu beachten, um die Barrierefreiheit zu verbessern.

Das Bereitstellen von alternativem Text für Bilder ist wichtig. Alternativer Text oder "Alt-Text" ist eine kurze Beschreibung eines Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder von Screenreadern für sehbehinderte Nutzer vorgelesen wird. Das alt-Attribut des <img>-Tags wird verwendet, um diesen alternativen Text bereitzustellen.

<img src="example.jpg" alt="Ein Sonnenuntergang über dem Ozean">

Beim Schreiben von alternativem Text versuchen Sie, den Inhalt und Zweck des Bildes kurz zu beschreiben. Bei dekorativen Bildern, die keinen bedeutenden Inhalt hinzufügen, können Sie das alt-Attribut leer lassen (alt="").

Bei komplexen Bildern wie Diagrammen, Grafiken oder Schaubildern reicht ein kurzer alternativer Text möglicherweise nicht aus. In diesen Fällen können Sie das longdesc-Attribut verwenden, um einen Link zu einer detaillierten Beschreibung des Bildes bereitzustellen. Oder Sie können die Beschreibung im Haupttext in der Nähe des Bildes einfügen.

<img src="chart.jpg" alt="Verkaufsdiagramm" longdesc="diagramm-beschreibung.html">

Im obigen Beispiel verweist das longdesc-Attribut auf eine HTML-Datei (diagramm-beschreibung.html), die eine detaillierte Beschreibung des Diagramms enthält.

Eine weitere Best Practice für Barrierefreiheit ist es, Bilder nicht für Text zu verwenden. Obwohl es verlockend sein kann, Bilder für stilisierte Texte oder Überschriften zu verwenden, kann dies ein Problem für Screenreader und Nutzer mit Sehbehinderungen darstellen. Verwenden Sie stattdessen echten Text und gestalten Sie ihn mit CSS. So stellen Sie sicher, dass der Text zugänglich, auswählbar und bei Bedarf von Nutzern vergrößert werden kann.

<h1 class="stilisierte-ueberschrift">Willkommen auf unserer Website</h1>

.stilisierte-ueberschrift {
  font-family: "Dekorative Schrift", cursive;
  font-size: 36px;
  color: #ff0000;
}

Durch die Verwendung von CSS zur Gestaltung des Textes behalten Sie die Barrierefreiheit bei und erzielen trotzdem den gewünschten visuellen Effekt.

Zusammengefasst, um die Barrierefreiheit von Bildern zu verbessern:

Durch die Befolgung dieser Richtlinien für Barrierefreiheit stellen Sie sicher, dass Ihre Bilder von allen Nutzern verstanden werden können und schaffen so eine inklusivere Web-Erfahrung.

Bildkarten

Bildkarten ermöglichen es, klickbare Bereiche auf einem Bild zu erstellen und verschiedene Teile des Bildes in interaktive Links zu verwandeln. Diese Technik ist nützlich, wenn Sie mehrere Links innerhalb eines einzelnen Bildes bereitstellen oder ein Navigationssystem basierend auf einem Bild erstellen möchten.

Um eine Bildkarte zu erstellen, müssen Sie die Tags <map> und <area> zusammen mit einem <img>-Tag verwenden. Der <map>-Tag definiert die Bildkarte und gibt ihr einen Namen, während die <area>-Tags die klickbaren Bereiche innerhalb des Bildes festlegen.

<img src="image.jpg" alt="Bildkarte" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Link 1">
  <area shape="circle" coords="200,200,50" href="link2.html" alt="Link 2">
  <area shape="poly" coords="300,100,350,200,250,200" href="link3.html" alt="Link 3">
</map>

Bei der Definition der Koordinaten für die klickbaren Bereiche müssen Sie die genauen Pixelpositionen der gewünschten Regionen innerhalb des Bildes kennen. Sie können Bildbearbeitungssoftware oder Online-Tools verwenden, um diese Koordinaten zu finden.

Bildkarten werden heutzutage aufgrund der zunehmenden Bedeutung des responsiven Webdesigns und der Schwierigkeit, genaue Koordinaten für verschiedene Bildgrößen zu erstellen und zu pflegen, nicht mehr so häufig verwendet. In bestimmten Fällen, wie bei der Erstellung interaktiver Infografiken oder der Bereitstellung von Links innerhalb eines bestimmten Bildes, können Bildkarten jedoch immer noch eine nützliche Technik sein.

Achten Sie bei der Verwendung von Bildkarten darauf, klaren und beschreibenden alternativen Text für jeden klickbaren Bereich bereitzustellen, um die Zugänglichkeit für Benutzer zu gewährleisten, die auf Hilfstechnologien angewiesen sind.

Hintergrundbilder

Neben dem Einfügen von Bildern in HTML-Dokumente mit dem <img>-Tag können Sie auch Bilder als Hintergründe für Elemente mit CSS festlegen. Hintergrundbilder können die visuelle Attraktivität Ihrer Webseiten verbessern und interessante Effekte erzeugen.

Um ein Hintergrundbild für ein Element festzulegen, verwenden Sie die background-image-Eigenschaft in CSS. Der Wert dieser Eigenschaft ist eine URL, die auf die Bilddatei verweist, die Sie als Hintergrund verwenden möchten.

.element {
  background-image: url("background.jpg");
}

Standardmäßig wiederholen sich Hintergrundbilder sowohl horizontal als auch vertikal, um das gesamte Element abzudecken. Sie können jedoch das Wiederholungsverhalten mit der background-repeat-Eigenschaft steuern. Die verfügbaren Werte sind:

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Sie können auch die Positionierung des Hintergrundbildes mit der background-position-Eigenschaft steuern. Diese Eigenschaft nimmt zwei Werte: die horizontale Position und die vertikale Position. Die Werte können Schlüsselwörter sein (left, center, right für horizontal; top, center, bottom für vertikal) oder spezifische Längen (z.B. Pixel oder Prozentsätze).

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

Hintergrundbilder können verwendet werden, um interessante visuelle Effekte zu erzeugen, wie z.B. Parallax-Scrolling. Parallax-Scrolling ist eine Technik, bei der sich das Hintergrundbild mit einer anderen Geschwindigkeit bewegt als der Inhalt auf der Seite, was ein Gefühl von Tiefe erzeugt.

.parallax {
  background-image: url("parallax-background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

Um einen Parallax-Effekt zu erstellen:

1. Legen Sie das Hintergrundbild mit background-image fest.
2. Verwenden Sie background-attachment: fixed, um das Hintergrundbild an Ort und Stelle zu fixieren, während der Seiteninhalt darüber scrollt.
3. Positionieren Sie das Hintergrundbild wie gewünscht mit background-position.
4. Setzen Sie background-repeat: no-repeat, um zu verhindern, dass sich das Bild wiederholt.
5. Verwenden Sie background-size: cover, um sicherzustellen, dass das Bild das gesamte Element abdeckt, auch wenn es dafür angepasst werden muss.
6. Legen Sie eine ausreichende height für das Element fest, um den Parallax-Scrolling-Effekt zu erzeugen.

Beachten Sie bei der Verwendung von Hintergrundbildern die folgenden bewährten Praktiken:

• Optimieren Sie Ihre Bilder für das Web, um die Dateigröße klein und die Ladezeiten der Seite schnell zu halten.
• Verwenden Sie geeignete Bildformate (z.B. JPEG für Fotos, PNG für Bilder mit Transparenz).
• Berücksichtigen Sie die Lesbarkeit des Inhalts bei der Auswahl von Hintergrundbildern. Stellen Sie sicher, dass genügend Kontrast zwischen Text und Hintergrund besteht.
• Achten Sie auf Barrierefreiheit. Stellen Sie alternativen Text oder Beschreibungen für Hintergrundbilder bereit, wenn sie wichtige Informationen vermitteln.