Bilder in HTML verwenden

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 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, Funktionen und Kompatibilitätsfaktoren. Zusätzlich bietet dieser Artikel eine Anleitung zur Auswahl des besten Bilddateityps für eine bestimmte Situation.
Die Angabe von width- und height-Attributen hilft, Ruckeln zu vermeiden: Dies ändert, wie Browser Bilder laden, sodass deren Seitenverhältnisse frühzeitig vom Browser berechnet werden können, um später die Anzeigegröße eines Bildes vor dem Laden zu reservieren.

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 das Verhalten des Bildes steuern und ermöglicht es, 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 prüft jedes Kind-<source>-Element und wählt die beste Übereinstimmung aus.

CSS

object-fit: Die object-fit CSS-Eigenschaft legt fest, wie der Inhalt eines ersetzten Elements, wie ein <img> oder <video>, in seinen Container eingefügt wird.
object-position: Die object-position CSS-Eigenschaft gibt die Ausrichtung des Inhalts in einem ausgewählten ersetzten Element innerhalb des Elementrahmens an. Bereiche des Rahmens, 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 Images: In diesem Artikel lernen wir das Konzept der responsiven Bilder kennen — Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren — und betrachten, welche Werkzeuge HTML bietet, um diese umzusetzen.