Verwendung von Bildern in HTML

Das HTML <img>-Element ermöglicht 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 Websites befassen. Diese Artikel bieten Anleitungen zur Auswahl und Konfiguration von Bildtypen.

Leitfaden für Bilddateitypen und -formate: Ein Leitfaden zu den verschiedenen Bilddateitypen, die allgemein von Webbrowsern unterstützt werden, einschließlich Details zu ihren individuellen Anwendungsfällen, Fähigkeiten und Kompatibilitätsfaktoren. Zusätzlich bietet dieser Artikel Anleitungen zur Auswahl des besten Bilddateityps für eine gegebene Situation.
Das Hinzufügen von width- und height-Attributen hilft, Ruckler zu vermeiden: Dies ändert, wie Browser Bilder laden, sodass ihre Seitenverhältnisse frühzeitig vom Browser berechnet werden und später verwendet werden können, um die Anzeigengröße eines Bildes zu reservieren, bevor es geladen wird.

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 eine Webseite einzubetten. Es unterstützt eine Vielzahl von Attributen, die kontrollieren, wie das Bild sich verhält, und ermöglicht es 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 unterschiedliche Anzeige-/Geräteszenarien bereitstellt. Der Browser berücksichtigt jedes <source>-Kind-Element und wählt das am besten passende aus.

CSS

object-fit: Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie z. B. ein <img> oder <video>, an die Größe seines Containers angepasst werden soll.
object-position: Die object-position CSS-Eigenschaft gibt die Ausrichtung des Inhalts in einem ausgewählten ersetzten Element innerhalb des Elements an. Bereiche der Box, die nicht vom Objekt des ersetzten Elements abgedeckt 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 von responsiven Bildern kennen — Bilder, die gut auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen solchen Merkmalen funktionieren — und welche Werkzeuge HTML bietet, um sie umzusetzen.