html mit Adi Prinz

Bildformate für Webseiten

Für Webseiten stehen verschiedene Raster- und Vektorgrafikformate zur Verfügung. Das geeignete Format hängt vom jeweiligen Bildinhalt und Verwendungszweck ab.

• JPEG beziehungsweise JPG: geeignet für Fotos und Bilder mit vielen Farben
• PNG: geeignet für Grafiken, Screenshots und Bilder mit transparenten Bereichen
• GIF: unterstützt einfache Animationen, besitzt aber nur eine begrenzte Farbauswahl
• WebP: modernes Format für Fotos, Grafiken, Transparenz und Animationen
• AVIF: modernes Format mit hoher Komprimierung und guter Bildqualität
• SVG: Vektorgrafikformat für Logos, Symbole, Diagramme und skalierbare Illustrationen

Das frühere Flash-Format SWF wird von modernen Browsern nicht mehr unterstützt und sollte nicht mehr verwendet werden.

Das img-Element

Mit dem img-Element wird eine Bilddatei in eine HTML-Seite eingebunden. Es handelt sich um ein leeres Element und benötigt daher kein schließendes Tag.

<img
  src="bilder/garten.jpg"
  alt="Blühender Garten im Mai">
    

Das Attribut src enthält den Pfad zur Bilddatei. Das Attribut alt stellt eine textliche Alternative zum Bild bereit.

Den Pfad zur Bilddatei angeben

Der Wert des src-Attributs kann einen relativen oder absoluten Pfad enthalten.

Bild im selben Ordner

<img
  src="garten.jpg"
  alt="Blühender Garten">
    

Bild in einem Unterordner

<img
  src="bilder/garten.jpg"
  alt="Blühender Garten">
    

Bild von einer anderen Website

<img
  src="https://www.example.com/bilder/garten.jpg"
  alt="Blühender Garten">
    

Bilder von anderen Websites sollten nur eingebunden werden, wenn die Verwendung erlaubt und die externe Quelle dauerhaft zuverlässig erreichbar ist.

Alternativtext mit alt angeben

Der Alternativtext beschreibt den Inhalt oder die Funktion eines Bildes. Er wird beispielsweise von Screenreadern ausgegeben und kann angezeigt werden, wenn die Bilddatei nicht geladen werden kann.

<img
  src="diagramm-umsatz.png"
  alt="Umsatzsteigerung von Jänner bis Juni">
    

Rein dekorative Bilder erhalten ein leeres alt-Attribut:

<img
  src="dekorative-linie.svg"
  alt="">
    

Das alt-Attribut sollte bei jedem img-Element vorhanden sein. Ob es eine Beschreibung enthält oder leer bleibt, hängt von der Bedeutung des Bildes ab.

Breite und Höhe festlegen

Mit den Attributen width und height wird die ursprüngliche Darstellungsgröße eines Bildes in CSS-Pixeln angegeben.

<img
  src="bilder/garten.jpg"
  alt="Blühender Garten"
  width="640"
  height="426">
    

Kennt der Browser die Bildabmessungen bereits beim Laden der Seite, kann er den benötigten Platz reservieren. Dadurch werden unerwartete Layoutverschiebungen vermieden.

Für eine responsive Darstellung kann das Bild zusätzlich mit CSS angepasst werden:

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

Prozentangaben gehören nicht in die HTML-Attribute width und height. Flexible Größen werden mit CSS festgelegt.

Das Laden von Bildern steuern

Mit dem Attribut loading kann das Ladeverhalten eines Bildes beeinflusst werden.

<img
  src="bilder/garten.jpg"
  alt="Blühender Garten"
  width="640"
  height="426"
  loading="lazy">
    

• loading="lazy" lädt das Bild erst, wenn es sich dem sichtbaren Bereich nähert.
• loading="eager" lädt das Bild möglichst früh.

loading="lazy" eignet sich vor allem für Bilder, die beim Öffnen der Seite noch nicht sichtbar sind. Das wichtigste Bild am Seitenanfang sollte normalerweise nicht verzögert geladen werden.

Wichtige Attribute des img-Elements

• src – Pfad und Dateiname der Bilddatei
• alt – textliche Alternative zum Bild
• width – Bildbreite in CSS-Pixeln
• height – Bildhöhe in CSS-Pixeln
• loading – Ladeverhalten des Bildes
• srcset – mehrere Bilddateien für unterschiedliche Auflösungen
• sizes – erwartete Darstellungsgröße für responsive Bilder
• usemap – Zuordnung zu einer Image Map
• crossorigin – Behandlung von Bildern aus anderen Quellen
• referrerpolicy – steuert übertragene Referrer-Informationen
• fetchpriority – Hinweis zur Priorität beim Laden des Bildes

Bilder mit CSS flexibel darstellen

Mit max-width: 100% wird verhindert, dass ein Bild breiter als sein übergeordnetes Element dargestellt wird.

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

Die Eigenschaft height: auto sorgt dafür, dass das ursprüngliche Seitenverhältnis des Bildes erhalten bleibt.

Diese CSS-Regel verändert nur die Darstellungsgröße. Der Browser lädt weiterhin dieselbe Bilddatei, auch wenn auf einem kleinen Bildschirm eine wesentlich kleinere Datei ausreichen würde.

Verschiedene Bildauflösungen mit srcset anbieten

Mit dem Attribut srcset können mehrere Versionen desselben Bildes angeboten werden. Bei Auflösungsangaben wird hinter jedem Dateinamen ein Pixeldichte-Faktor angegeben.

<img
  src="bilder/logo.png"
  srcset="
    bilder/logo.png 1x,
    bilder/logo-2x.png 2x
  "
  alt="Logo von EDV mit Adi Prinz"
  width="300"
  height="80">
    

• 1x – Bild für normale Pixeldichte
• 2x – Bild für Displays mit hoher Pixeldichte

Beide Dateien zeigen denselben Bildausschnitt. Die Datei mit 2x besitzt jedoch ungefähr die doppelte Breite und Höhe und kann auf hochauflösenden Displays schärfer dargestellt werden.

Bilddateien nach ihrer Breite beschreiben

Bei unterschiedlich breiten Bilddateien wird im srcset-Attribut die tatsächliche Bildbreite mit dem Deskriptor w angegeben.

<img
  src="bilder/landschaft-800.jpg"
  srcset="
    bilder/landschaft-480.jpg 480w,
    bilder/landschaft-800.jpg 800w,
    bilder/landschaft-1200.jpg 1200w
  "
  alt="Berglandschaft mit einem See"
  width="1200"
  height="800">
    

Die Angaben 480w, 800w und 1200w beschreiben die tatsächliche Breite der jeweiligen Bilddatei in Pixeln.

Der Browser berücksichtigt unter anderem die Bildschirmgröße, die Pixeldichte und die erwartete Darstellungsgröße. Welche Datei tatsächlich geladen wird, entscheidet der Browser.

Die Darstellungsgröße mit sizes beschreiben

Das Attribut sizes informiert den Browser darüber, wie breit das Bild unter bestimmten Bedingungen voraussichtlich dargestellt wird.

<img
  src="bilder/landschaft-800.jpg"
  srcset="
    bilder/landschaft-480.jpg 480w,
    bilder/landschaft-800.jpg 800w,
    bilder/landschaft-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1000px) 50vw,
    800px
  "
  alt="Berglandschaft mit einem See"
  width="1200"
  height="800">
    

Das Beispiel bedeutet:

• Bis zu einer Viewport-Breite von 600px ist das Bild ungefähr so breit wie der gesamte Viewport.
• Bis zu einer Viewport-Breite von 1000px beansprucht das Bild ungefähr die Hälfte der Viewport-Breite.
• Bei größeren Viewports wird eine Darstellungsbreite von 800px angenommen.

Die Reihenfolge der Angaben ist wichtig. Der Browser verwendet die erste passende Bedingung. Die letzte Angabe steht ohne Bedingung und dient als Standardwert.

Das picture-Element verwenden

Das picture-Element enthält ein oder mehrere source-Elemente und als Abschluss ein img-Element.

<picture>
  <source
    srcset="bilder/landschaft-gross.jpg"
    media="(min-width: 1000px)">

  <source
    srcset="bilder/landschaft-mittel.jpg"
    media="(min-width: 600px)">

  <img
    src="bilder/landschaft-klein.jpg"
    alt="Berglandschaft mit einem See"
    width="800"
    height="533">
</picture>
    

Der Browser prüft die source-Elemente von oben nach unten und verwendet die erste passende Quelle. Trifft keine Bedingung zu, wird die Bilddatei aus dem img-Element geladen.

Das abschließende img-Element ist verpflichtend. Es enthält außerdem den Alternativtext und dient als Fallback.

Den Bildausschnitt anpassen

Mit dem picture-Element können für verschiedene Bildschirmgrößen unterschiedliche Bildausschnitte verwendet werden. Dieses Verfahren wird als Art Direction bezeichnet.

<picture>
  <source
    srcset="bilder/person-querformat.jpg"
    media="(min-width: 768px)">

  <img
    src="bilder/person-hochformat.jpg"
    alt="Kursleiter vor einem Computer"
    width="600"
    height="800">
</picture>
    

Auf größeren Bildschirmen wird das Querformat verwendet. Auf kleineren Bildschirmen zeigt das Hochformat den wichtigen Bildinhalt deutlicher.

Die verschiedenen Dateien dürfen unterschiedliche Bildausschnitte zeigen. Inhalt und Funktion des Bildes müssen jedoch gleich bleiben, damit der gemeinsame Alternativtext weiterhin passt.

Moderne Bildformate mit Fallback anbieten

Das Attribut type eines source-Elements kann das Dateiformat der angebotenen Bilddatei beschreiben.

<picture>
  <source
    srcset="bilder/landschaft.avif"
    type="image/avif">

  <source
    srcset="bilder/landschaft.webp"
    type="image/webp">

  <img
    src="bilder/landschaft.jpg"
    alt="Berglandschaft mit einem See"
    width="1200"
    height="800">
</picture>
    

Unterstützt der Browser AVIF, kann die erste Datei verwendet werden. Andernfalls wird WebP geprüft. Das JPEG-Bild dient als abschließende Ersatzdatei.

Die Reihenfolge beginnt normalerweise mit dem bevorzugten modernen Format. Das allgemein unterstützte Fallback steht im img-Element.

Wichtige Attribute des source-Elements

• srcset – eine oder mehrere angebotene Bilddateien
• sizes – erwartete Darstellungsgröße bei Verwendung von Breitenangaben
• media – Bedingung für die Verwendung der Bildquelle
• type – MIME-Typ des angebotenen Dateiformats

Das source-Element ist ein leeres Element. Innerhalb von picture wird die Bildquelle mit srcset und nicht mit src angegeben.

srcset und picture unterscheiden

• srcset am img-Element eignet sich für verschiedene Größen oder Auflösungen desselben Bildes.
• picture eignet sich für unterschiedliche Bildausschnitte, Media Queries oder verschiedene Dateiformate.
• Beide Verfahren können miteinander kombiniert werden.

<picture>
  <source
    media="(min-width: 768px)"
    srcset="
      bilder/banner-1200.jpg 1200w,
      bilder/banner-1800.jpg 1800w
    "
    sizes="100vw">

  <img
    src="bilder/banner-klein-600.jpg"
    srcset="
      bilder/banner-klein-400.jpg 400w,
      bilder/banner-klein-600.jpg 600w
    "
    sizes="100vw"
    alt="Teilnehmer bei einem Computerkurs"
    width="1200"
    height="600">
</picture>
    

In diesem Beispiel entscheidet das picture-Element über den Bildausschnitt. Innerhalb der passenden Quelle entscheidet srcset über die geeignete Dateigröße.