W3docs
de
Anmelden

HTML-Bilder

Bilder mit dem HTML img-Tag einbetten: src und alt, width/height gegen Layout-Verschiebung, responsives srcset und picture sowie Lazy Loading.

Um ein Bild in eine Webseite einzubetten, verwenden Sie das <img>-Tag.

Das <img>-Tag unterstützt eine Reihe von erforderlichen und optionalen Attributen, die zusätzliche Informationen liefern.

Syntax

Das <img>-Tag ist leer, das heißt, ein schließendes Tag ist nicht erforderlich. Es enthält nur Attribute. In XHTML muss das (<img>)-Tag jedoch geschlossen werden (<img/>).

Erforderliche Bildattribute – src und alt

Das src-Attribut (source) gibt den Namen oder den Speicherort des anzuzeigenden Bildes an. Sein Wert kann ein relativer Pfad (eine Datei im eigenen Projekt) oder eine absolute URL (ein Bild, das auf einem anderen Server gehostet wird) sein.

Relativer Pfad — das Bild befindet sich in Ihrem Projekt, zusammen mit der HTML-Datei:

<img src="images/example.jpg" alt="A description of the image" />

Absolute URL — das Bild wird auf einem anderen Server gehostet:

<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />

Das alt-Attribut liefert alternativen Text, der angezeigt wird, wenn das Bild nicht geladen werden kann (langsame Verbindung, fehlerhafter Pfad), und von Screenreadern laut vorgelesen wird. Es gibt zwei Fälle:

  • Aussagekräftige Bilder — geben Sie alt eine kurze, genaue Beschreibung dessen, was das Bild vermittelt (alt="Balkendiagramm der Umsätze 2024").
  • Dekorative Bilder, die nichts zum Inhalt beitragen — verwenden Sie ein leeres alt="". Screenreader überspringen das Bild dann, anstatt einen bedeutungslosen Dateinamen vorzulesen.

Geben Sie das Attribut immer an. Das vollständige Weglassen von alt unterscheidet sich von alt="" und wird als Barrierefreiheitsfehler gewertet.

Hinweis: Das Verhalten des Hover-Tooltips wird durch das title-Attribut gesteuert, nicht durch alt.

Die Syntax des <img>-Tags mit den erforderlichen src- und alt-Attributen sieht folgendermaßen aus:

HTML-Bildbeispiel

<img src="example.jpg" alt="HTML tutorial" />
Tipp

Verwenden Sie das alt-Attribut für alle Bilder, um eine klare, prägnante Beschreibung des Bildinhalts bereitzustellen. Das verbessert die Barrierefreiheit und hilft Suchmaschinen, Ihre Seite zu verstehen.

Empfohlene Bildattribute – width und height

Legen Sie die Attribute width und height immer für ein <img> fest. Sie teilen dem Browser das Seitenverhältnis des Bildes mit, bevor die Datei heruntergeladen wurde, sodass er von Anfang an genau den richtigen Platz im Layout reservieren kann.

Ohne diese Attribute wird die Seite jedes Mal neu angeordnet, wenn ein Bild ankommt — Texte und andere Elemente springen nach unten, um Platz zu machen. Dieser visuelle Sprung wird als Cumulative Layout Shift (CLS) bezeichnet, einer von Googles Core Web Vitals und eine häufige Ursache für versehentliche Klicks. Das Angeben der Maße verhindert ihn.

HTML-Bildbeispiel

<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />

Die Attribute verwenden einheitenlose Pixelzahlen (width="200", nicht width="200px"). Sie können das Bild weiterhin mit CSS in der Größe anpassen — der Browser nutzt die Attributwerte nur zur Berechnung des Seitenverhältnisses und zur Vermeidung des Layout-Shifts.

Beispiel des HTML-<img>-Tags mit den Attributen src, alt, width und height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>
Probier es selbst »

Ergebnis

Aleq

Tipp

Behalten Sie die Attribute width und height für das Seitenverhältnis bei und verwenden Sie dann die CSS-Eigenschaften max-width oder max-height, um Flexibilität hinzuzufügen. Das verhindert, dass große Bilder das Layout auf kleinen Bildschirmen überlaufen.

Bilder fluid (responsiv) machen

Um zu verhindern, dass ein Bild seinen Container auf schmalen Bildschirmen überläuft, geben Sie ihm diese CSS-Regel. Sie ist die nützlichste einzelne CSS-Zeile für Bilder:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% begrenzt das angezeigte Bild auf die Breite seines Containers, sodass es auf kleinen Bildschirmen schrumpft, aber nie über seine natürliche Größe hinaus vergrößert wird und unscharf wird. height: auto lässt die Höhe mitziehen, damit das Bild seine Proportionen beibehält, anstatt gestreckt zu werden.

Dies funktioniert Hand in Hand mit den Attributen width/height: Die Attribute reservieren den Seitenverhältnisraum (kein CLS), während das CSS die tatsächlich angezeigte Größe fluid macht.

Bilder schweben lassen (Float)

Standardmäßig ist ein <img>-Element inline und sitzt in der Textzeile. Sie können Text um ein Bild herum umbrechen, indem Sie die CSS float-Eigenschaft verwenden — setzen Sie float: left oder float: right.

Float ist eine veraltete Technik für diese Art von Layout. Für alles, was über das einfache Umbrechen eines Absatzes um ein Bild hinausgeht — Galerien, nebeneinander liegende Medien, Karten — greifen Sie stattdessen zu Flexbox oder CSS Grid. Diese bieten Ausrichtung, Abstände und Umbrechen ohne die Eigenheiten beim Löschen von Floats.

Um das Bild links und den Text rechts anzuzeigen, fügen Sie float: left hinzu. Bevorzugen Sie aus Gründen der Wartbarkeit eine CSS-Klasse gegenüber einem inline style-Attribut.

Beispiel eines Bildes mit float|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
    <p>Aleq's photo</p>
  </body>
</html>
Probier es selbst »

Das Hinzufügen des Attributs style="float:right" zum <img>-Tag positioniert den Text links und das Bild rechts.

Beispiel des <img>-Tags und der CSS float-Eigenschaft zum Schweben eines Bildes nach rechts:

Beispiel mit einem float:right-Attribut|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Place for your heading </h1>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
    <p>Aleq's photo</p>
  </body>
</html>
Probier es selbst »

Ergebnis

Aleq

Da das <a>-Tag zum Einfügen von Hyperlinks verwendet wird, müssen Sie das Bild lediglich in das <a>-Tag einschließen, um es anklickbar zu machen.

Beispiel eines Bildes mit einem Hyperlink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/" aria-label="w3docs homepage">
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
    </a>
  </body>
</html>
Probier es selbst »

Responsive Bilder: die richtige Datei bereitstellen

Ein einzelnes Bild passt selten auf jeden Bildschirm. Ein 2000px-Foto an ein Telefon zu senden, verschwendet Bandbreite; ein kleines Bild an einem 4K-Display sieht unscharf aus. HTML bietet Ihnen zwei Werkzeuge, damit der Browser die beste Datei für jedes Gerät auswählen kann.

srcset und sizes (dasselbe Bild, verschiedene Größen)

Verwenden Sie die Attribute srcset und sizes auf <img>, wenn Sie dasselbe Bild in verschiedenen Breiten haben und der Browser die am besten geeignete herunterladen soll.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="800"
  height="600"
  alt="A scenic mountain lake"
/>
  • srcset listet Kandidatendateien mit ihren intrinsischen Breiten auf (400w bedeutet, die Datei ist 400px breit).
  • sizes teilt dem Browser mit, wie breit das Bild angezeigt wird — hier volle viewport-Breite unter 600px, andernfalls die Hälfte. Der Browser kombiniert dies mit der Pixeldichte des Geräts, um die kleinste Datei auszuwählen, die noch scharf aussieht.
  • src bleibt als Fallback für sehr alte Browser erhalten.

Das picture-Element (verschiedene Formate oder Art Direction)

Das <picture>-Element umschließt mehrere <source>-Elemente und ein <img>. Der Browser durchläuft die Quellen von oben nach unten und verwendet die erste, die er unterstützt, und fällt auf das <img> zurück, wenn keine passt.

Der klassische Anwendungsfall ist das Bereitstellen eines modernen, kleineren Formats mit einem garantierten Fallback:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>

Ein Browser, der AVIF versteht, lädt die AVIF-Datei herunter; einer, der nur WebP versteht, verwendet dieses; alles andere fällt auf das JPEG zurück. Das <img> ist erforderlich — es stellt den alt-Text und den Fallback bereit. Sie können <picture> auch für Art Direction verwenden: Auf Telefonen ein beschnittenes Hochformatbild und auf Desktops ein breites anzeigen, mithilfe von media-Attributen auf jedem <source>.

Lazy Loading und Dekodierung

Standardmäßig lädt der Browser alle Bilder auf der Seite eifrig herunter. Bei Bildern weit unterhalb des sichtbaren Bereichs ist das vorab verschwendete Arbeit. Fügen Sie loading="lazy" hinzu, damit der Browser das Bild erst abruft, wenn es sich dem viewport nähert:

<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />

Verwenden Sie loading="lazy" für außerhalb des Bildschirms befindliche Bilder, aber nicht für Ihr größtes Bild above the fold (wie ein Hero oder LCP-Element) — das Verzögern dieses Bildes verlangsamt die wahrgenommene Ladezeit.

Sie können auch decoding="async" hinzufügen, wodurch der Browser das Bild außerhalb des Haupt-Threads dekodieren kann, sodass das Rendern umgebender Inhalte nicht blockiert wird.

Welches Bildformat für das Web wählen

Es gibt drei Haupttypen von Bildformaten, die von Browsern unterstützt werden:

  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)

GIF hat 256 eindeutige Farben, die einfache und schnell ladende Grafiken ermöglichen. Sie können GIF für kleine Zeichnungen, Diagramme, Schaubilder, Schaltflächen und andere einfache Grafiken verwenden, die das schnelle Laden Ihrer Seite nicht beeinträchtigen.

JPEG ist typischerweise ein 24-Bit-Format, das rotes, blaues und grünes Licht mischt, um Millionen von Farben darzustellen. Daher wird es hauptsächlich für Fotografien verwendet. Dieses Format gibt Ihnen die Flexibilität zu wählen, wie stark Sie Ihr Bild komprimieren möchten – von 0% (starke Komprimierung) bis 100% (keine Komprimierung). Sie können dieses Format wählen, wenn Sie bereit sind, etwas Qualität gegen eine Größenreduzierung einzutauschen. Vermeiden Sie JPEG für Bilder mit Text, Formen oder großen Farbflächen, da bei der Komprimierung die Linien unscharf werden und Farben verblassen.

Das PNG-Format kombiniert die Vorteile von JPEG und GIF: Es unterstützt Millionen von Farben und ermöglicht verlustfreie Komprimierung. Sie können PNG für Webgrafiken verwenden, die Transparenz, farbreiche und komplexe Grafiken oder Fotografien erfordern.

Moderne Bildformate

Zwei moderne Formate werden nun von Browsern weitgehend unterstützt und erzeugen kleinere, schneller ladende Dateien als JPEG oder PNG.

WebP, von Google entwickelt, unterstützt sowohl verlustfreie als auch verlustbehaftete Komprimierung sowie Transparenz und Animation. WebP-Dateien sind typischerweise 25–35% kleiner als ein entsprechendes JPEG oder PNG und werden von allen aktuellen großen Browsern unterstützt. (WebP - Wikipedia)

AVIF ist ein neueres Format, das auf dem AV1-Video-Codec basiert. Es komprimiert in der Regel noch besser als WebP bei gleicher visueller Qualität und unterstützt einen breiten Farbbereich, was es hervorragend für Fotografien macht. Die Browser-Unterstützung ist jetzt breit, aber etwas hinter WebP zurück.

Da nicht der Browser jedes Besuchers das neueste Format unterstützt, stellen Sie diese mit einem <picture>-Element und einem JPEG- oder PNG-Fallback bereit, wie im Abschnitt Responsive Bilder oben gezeigt. Der Browser wählt dann das beste Format, das er versteht.

Info

Möglicherweise stoßen Sie noch auf ältere Formate wie BPG und Apples HEIC. Keines davon wird von Webbrowsern unterstützt, daher sollten Sie sie für Bilder im Web vermeiden — konvertieren Sie stattdessen zu WebP oder AVIF.

Übungen

Übung
Wählen Sie alle zutreffenden Aussagen über das HTML img-Tag aus:
Wählen Sie alle zutreffenden Aussagen über das HTML img-Tag aus:
Übung
Warum sollten Sie die Attribute width und height auf einem img-Element festlegen?
Warum sollten Sie die Attribute width und height auf einem img-Element festlegen?
Übung
Welches Attribut weist den Browser an, das Laden eines außerhalb des Bildschirms befindlichen Bildes zu verzögern, bis es benötigt wird?
Welches Attribut weist den Browser an, das Laden eines außerhalb des Bildschirms befindlichen Bildes zu verzögern, bis es benötigt wird?
Übung
Was ermöglicht das srcset-Attribut dem Browser?
Was ermöglicht das srcset-Attribut dem Browser?
Was this page helpful?