Verwendung von Bildern in HTML

Das HTML <img>-Element ermöglicht es Ihnen, Bilder in ein HTML-Dokument einzubetten, während das <picture>-Element responsive Bilder ermöglicht. In diesem Leitfaden finden Sie Links zu Ressourcen, die sich mit dem Hinzufügen von Bildern zu Websites befassen.

Referenzen

Diese Artikel behandeln einige der HTML-Elemente und CSS-Eigenschaften, die verwendet werden, um zu steuern, wie Bilder im Web angezeigt werden.

HTML

<img>: Das HTML-<img>-Element wird verwendet, um ein Bild in einer Webseite einzubetten. Es unterstützt eine Vielzahl von Attributen, die steuern, wie das Bild sich verhält, und erlaubt Ihnen, wichtige Informationen wie alt-Text für Personen hinzuzufügen, die das Bild nicht sehen.
<picture>: Das HTML-<picture>-Element enthält null oder mehr <source>-Elemente und ein <img>-Element, das Versionen eines Bildes für verschiedene Anzeige-/Geräteszenarien bereitstellt. Der Browser berücksichtigt jedes Kind-<source>-Element und wählt die beste Übereinstimmung unter ihnen.

CSS

object-fit: Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie ein <img> oder <video>, in seine Containergröße eingepasst werden soll.
object-position: Die object-position CSS-Eigenschaft gibt die Ausrichtung des Inhalts in einem ausgewählten ersetzten Element innerhalb des Elementbox an. Bereiche der Box, die nicht vom Objekt des ersetzten Elements bedeckt sind, zeigen den Hintergrund des Elements.
background-image: Die background-image CSS-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.

Leitfäden

Diese Artikel bieten Anleitungen zur Auswahl und Konfiguration von Bildtypen.

Leitfaden zu Bilddateitypen und Formaten: Ein Leitfaden zu den verschiedenen Bilddateitypen, die häufig von Webbrowsern unterstützt werden, einschließlich Details über ihre individuellen Anwendungsfälle, Fähigkeiten und Kompatibilitätsfaktoren. Darüber hinaus bietet dieser Artikel Anweisungen zur Auswahl des besten Bilddateityps für eine bestimmte Situation.
Das Hinzufügen von width- und height-Attributen hilft, Ruckeln zu vermeiden: Dies ändert, wie Browser Bilder laden, sodass ihre Seitenverhältnisse vom Browser frühzeitig berechnet werden und später verwendet werden können, um die Anzeigegröße eines Bildes zu reservieren, bevor es geladen wird.

Andere Themen

Verwandte Themen, die von Interesse sein könnten.

Lernen Sie HTML: Responsive Bilder: In diesem Artikel lernen Sie das Konzept der responsiven Bilder kennen — Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren — und sehen, welche Tools HTML bietet, um deren Implementierung zu unterstützen.