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 unterstützt. In diesem Leitfaden finden Sie Links zu Ressourcen, die sich mit dem Hinzufügen von Bildern zu Webseiten beschäftigen. Diese Artikel bieten Anleitungen zur Auswahl und Konfiguration von Bildtypen.

Leitfaden zu Bilddateitypen und Formaten: Ein Leitfaden zu den verschiedenen Bilddateitypen, die von Webbrowsern häufig unterstützt werden, einschließlich Details zu deren individuellen Anwendungsfällen, Fähigkeiten und Kompatibilitätsfaktoren. Darüber hinaus bietet dieser Artikel Unterstützung bei der Auswahl des besten Bilddateityps für eine gegebene Situation.
Einbeziehung von width und height Attributen hilft, Ruckeln zu vermeiden: Dies ändert, wie Browser Bilder laden, sodass ihre Seitenverhältnisse frühzeitig vom Browser berechnet werden können und später reserviert werden können, um die Anzeigengröße eines Bildes zu bestimmen, bevor es geladen wird.

Referenzen

Diese Artikel behandeln einige der HTML-Elemente und CSS-Eigenschaften, die verwendet werden, um zu kontrollieren, 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 das Verhalten des Bildes steuern und ermöglicht Ihnen, wichtige Informationen wie alt-Text für Personen hinzuzufügen, die das Bild nicht sehen können.
<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 untergeordnete <source>-Element und wählt die beste Übereinstimmung unter ihnen aus.

CSS

object-fit: Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie eines <img> oder <video>, in seinen Container angepasst werden soll.
object-position: Die object-position CSS-Eigenschaft gibt die Ausrichtung von Inhalten in einem ausgewählten ersetzten Element innerhalb des Box-Elements an. Bereiche des Box-Elements, die nicht vom Objekt des ersetzten Elements überdeckt sind, zeigen den Hintergrund des Elements.
background-image: Die background-image CSS-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.

Siehe auch

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 Werkzeuge HTML bietet, um sie zu implementieren.