Bilder

Dekorative Bilder wie Hintergrundverläufe auf Schaltflächen oder Hintergrundbilder in Inhaltsbereichen oder auf der gesamten Seite dienen der Darstellung und sollten mit CSS angewendet werden. Wenn ein Bild einem Dokument Kontext hinzufügt, handelt es sich um Inhalt, der mit HTML eingebettet werden sollte.

Die Hauptmethode zum Einbinden von Bildern ist das <img>-Tag mit dem src-Attribut, das auf eine Bildressource verweist, und dem alt-Attribut, das das Bild beschreibt.

<img src="images/eve.png" alt="Eve">

Sowohl das Attribut srcset für <img> als auch das Element <picture> bieten die Möglichkeit, mehrere Bildquellen mit zugehörigen Media-Anfragen einzufügen, jeweils mit einer Fallback-Bildquelle. So kann die am besten geeignete Bilddatei basierend auf der Auflösung des Geräts, den Browserfunktionen und der Größe des Viewports bereitgestellt werden. Mit dem srcset-Attribut können Sie mehrere Bildversionen basierend auf der Auflösung und zusammen mit dem sizes-Attribut basierend auf der Größe des Browser-Viewports bereitstellen.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Dies kann auch mit dem Element <picture> und den untergeordneten Elementen <source> erfolgen, wobei <img> als Standardquelle verwendet wird.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

Zusätzlich zu diesen integrierten HTML-Methoden für responsive Bilder kann die Leistung beim Rendern von Bildern in HTML durch verschiedene Attribute verbessert werden. Das <img>-Tag und damit auch grafische Schaltflächen zum Senden <input type="image"> können die Attribute height und width enthalten, um das Seitenverhältnis des Bildes festzulegen und so Layoutverschiebungen zu reduzieren. Das Attribut lazy ermöglicht Lazy Loading.

HTML unterstützt auch das Einbinden von SVG-Bildern direkt über das <svg>-Tag. SVG-Bilder mit der Erweiterung .svg (oder als Data-URI) können jedoch über das <img>-Element eingebettet werden.

Jedes Vordergrundbild sollte mindestens die Attribute src und alt enthalten.

Die Datei src ist der Pfad und Dateiname des eingebetteten Bildes. Mit dem Attribut src wird die URL für das Bild angegeben. Der Browser ruft dann das Asset ab und rendert es auf der Seite. Dieses Attribut ist für <img> erforderlich. Ohne sie gibt es nichts zu rendern.

Das alt-Attribut enthält alternativen Text für das Bild. Es bietet eine Beschreibung des Bilds für Nutzer, die den Bildschirm nicht sehen können (z. B. Suchmaschinen, unterstützende Technologien sowie Alexa, Siri und Google Assistant). Außerdem kann es vom Browser angezeigt werden, wenn das Bild nicht geladen wird. Der alt-Text ist nicht nur für Nutzer mit langsamen Netzwerken oder begrenzter Bandbreite, sondern auch für HTML-E-Mails äußerst nützlich, da viele Nutzer Bilder in ihren E-Mail-Anwendungen blockieren.

<img src="path/filename" alt="descriptive text" />

Wenn das Bild vom Dateityp SVG ist, fügen Sie auch role="img" ein. Dies ist aufgrund von VoiceOver-Bugs erforderlich.

<img src="switch.svg" alt="light switch" role="img" />

Effektive alt-Bildbeschreibungen verfassen

Alt-Attribute sollen kurz und prägnant sein und alle relevanten Informationen enthalten, die das Bild vermittelt. Informationen, die für andere Inhalte im Dokument redundant oder anderweitig nicht nützlich sind, werden ausgelassen. Der Text sollte im Stil der Website verfasst sein.

Um effektiven Alternativtext zu schreiben, stellen Sie sich vor, dass Sie die gesamte Seite einer Person vorlesen, die sie nicht sehen kann. Durch die Verwendung des semantic-<img>-Elements werden Screenreader-Nutzer und Bots darüber informiert, dass es sich bei dem Element um ein Bild handelt. Es ist überflüssig, „Dies ist ein Bild/Screenshot/Foto von“ in die alt aufzunehmen. Der Nutzer muss nicht wissen, dass es ein Bild gibt, aber er muss wissen, welche Informationen das Bild vermittelt.

Normalerweise würden Sie nicht sagen: „Das ist ein körniges Bild eines Hundes mit rotem Hut.“ Stattdessen würden Sie vermitteln, was das Bild im Zusammenhang mit dem Rest des Dokuments aussagt. Was Sie vermitteln, ändert sich je nach Kontext und Inhalt des umgebenden Texts.

So wird beispielsweise das Foto eines Hundes je nach Kontext unterschiedlich beschrieben. Wenn Fluffy ein Avatar neben einer Rezension für Yuckymeat-Hundefutter ist, reicht alt="Fluffy" aus.

Wenn das Foto Teil der Adoptionsseite von Fluffy auf der Website eines Tierheims ist, ist die Zielgruppe der potenzielle Hundehalter. Der Text sollte die Informationen beschreiben, die auf dem Bild dargestellt werden und für einen Nutzer relevant sind. Er sollte keine Informationen enthalten, die bereits im umgebenden Text enthalten sind. Eine längere Beschreibung wie alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" ist angemessen. Der Text einer Adoptionsseite enthält in der Regel die Art, Rasse, das Alter und das Geschlecht des zu adoptierenden Haustiers. Diese Informationen müssen daher nicht im Alternativtext wiederholt werden. Die schriftliche Biografie des Hundes enthält aber wahrscheinlich keine Angaben zur Haarlänge, zu den Farben oder zu den bevorzugten Spielzeugen.

Wichtig ist, dass wir das Bild nicht vollständig beschrieben haben. Der potenzielle Hundehalter muss nicht wissen, ob sich der Hund drinnen oder draußen befindet oder dass er ein rotes Halsband und eine blaue Leine hat.

Wenn Sie Bilder für Symbole verwenden, geben Sie mit dem Attribut alt den zugänglichen Namen an. Vermitteln Sie die Bedeutung des Symbols und nicht eine Beschreibung des Bildes. Das alt-Attribut des Lupensymbols ist beispielsweise search. Das Symbol, das wie ein Haus aussieht, hat den Alt-Text home. Die Beschreibung des Symbols für die 5‑Zoll-Diskette lautet save. Wenn zwei Symbole von Fluffy verwendet werden, um Best Practices und Anti-Patterns zu kennzeichnen, könnte für den lächelnden Hund mit grüner Baskenmütze alt="good" und für den knurrenden Hund mit roter Baskenmütze alt="bad" festgelegt sein. Verwenden Sie jedoch nur Standardsymbole. Wenn Sie nicht standardmäßige Symbole wie die guten und schlechten Fluffy-Symbole verwenden, fügen Sie eine Legende hinzu, damit die Symbole nicht die einzige Möglichkeit sind, die Bedeutung Ihrer UI-Elemente zu entschlüsseln.

Wenn es sich bei dem Bild um einen Screenshot oder ein Diagramm handelt, beschreiben Sie, was aus dem Bild hervorgeht, anstatt das Aussehen zu beschreiben. Ein Bild kann zwar mehr als tausend Worte sagen, die Beschreibung sollte aber alles, was man daraus lernen kann, prägnant vermitteln.

Lassen Sie Informationen weg, die der Nutzer bereits aus dem Kontext kennt und über die er ansonsten in den Inhalten informiert wird. Wenn Sie sich beispielsweise auf einer Anleitungsseite zum Ändern von Browsereinstellungen befinden und auf der Seite beschrieben wird, wie Sie in Chrome auf Symbole klicken, ist die URL der Seite im Screenshot nicht wichtig. Beschränke die alt auf das aktuelle Thema: das Ändern von Einstellungen.

alt könnte lauten: „Das Symbol für die Einstellungen befindet sich in der Navigationsleiste unter dem Suchfeld.“ Nehmen Sie nicht „Screenshot“ oder „machinelearningworkshop“ auf, da der Nutzer nicht wissen muss, dass es sich um einen Screenshot handelt, und auch nicht, wo der technische Autor gesurft hat, als er die Anleitung geschrieben hat. Die Beschreibung des Bildes basiert auf dem Kontext, warum das Bild überhaupt eingefügt wurde.

Wenn der Screenshot zeigt, wie die Browserversionsnummer unter chrome://version/ gefunden werden kann, fügen Sie die URL als Anleitung in den Inhalt der Seite ein und geben Sie einen leeren String als „alt“-Attribut an, da das Bild keine Informationen enthält, die nicht im umgebenden Text enthalten sind.

Wenn das Bild keine zusätzlichen Informationen liefert oder nur dekorativ ist, sollte das Attribut trotzdem vorhanden sein, nur als leerer String.

<img src="svg/magazine.svg" alt="" role="none" />

Auf MachineLearningWorkshop.com gibt es sieben Vordergrundbilder, also sieben Bilder mit alt-Attributen: ein Lichtschalter in Form eines Ostereis, ein Symbol für eine Bedienungsanleitung, zwei biografische Fotos von Hal und Eve sowie drei Avatare einer Küchenmaschine, eines Staubsaugers und eines Toasters. Das Vordergrundbild, das wie eine Zeitschrift aussieht, ist das einzige, das rein dekorativ ist. Die Seite hat auch zwei Hintergrundbilder. Diese Bilder sind dekorativ und wurden mit CSS hinzugefügt. Daher sind sie nicht zugänglich.

Das Magazin ist rein dekorativ und hat daher ein leeres alt-Attribut und einen role-Wert von none, da es sich bei dem Bild um eine reine Präsentations-SVG handelt. Falls sinnvoll, sollten SVG-Bilder das role="img" enthalten.

<img src="svg/magazine.svg" alt="" role="none" />

Unten auf der Seite sind drei Rezensionen zu sehen, jeweils mit einem Bild des Posters. In der Regel ist der alt-Text der Name der abgebildeten Person.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

Da es sich um eine Scherzseite handelt, sollten Sie stattdessen das vermitteln, was für Nutzer mit Sehbehinderung möglicherweise nicht offensichtlich ist, damit sie den Humor nicht verpassen. Wir verwenden die ursprüngliche Maschinenfunktion als alt anstelle des Namens der Figur:

<img src="images/blender.svg" alt="blender" role="img" />

Die Fotos der Kursleiter sind nicht nur Avatare, sondern biografische Bilder und erhalten daher eine detailliertere Beschreibung.

Wenn es sich um eine echte Website handeln würde, würden Sie eine möglichst kurze Beschreibung des Aussehens der Lehrkraft angeben, damit ein potenzieller Schüler oder Student sie beim Betreten des Kursraums erkennen kann.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Da es sich um eine Scherz-Website handelt, geben Sie stattdessen die Informationen an, die im Scherzkontext relevant sind:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Wenn Sie die Seite einem Freund am Telefon vorlesen, ist es ihm egal, wie der rote Punkt aussieht. In diesem Fall ist der Verlauf der Filmreferenz wichtig.

Überlegen Sie beim Verfassen von beschreibendem Text, welche Informationen das Bild vermittelt, die für den Nutzer wichtig und relevant sind, und nehmen Sie diese Informationen in den Text auf. Der Inhalt des Attributs alt für ein Bild hängt vom Kontext ab. Alle Informationen, die in einem Bild enthalten sind und auf die ein sehender Nutzer zugreifen kann und die für den Kontext relevant sind, müssen vermittelt werden. Halten Sie sich kurz, seien Sie präzise und liefern Sie nützliche Informationen.

Die Attribute src und alt sind Mindestanforderungen für eingebettete Bilder. Es gibt noch einige andere Attribute, die wir besprechen müssen.

Responsive Bilder

Es gibt unzählige Darstellungsbereiche und Bildschirmauflösungen. Sie möchten nicht die Bandbreite eines mobilen Nutzers verschwenden, indem Sie ihm ein Bild bereitstellen, das breit genug für einen großen Bildschirm ist. Für kleine Geräte mit der vierfachen normalen Bildschirmauflösung sollten Sie jedoch Bilder mit höherer Auflösung bereitstellen. Es gibt verschiedene Möglichkeiten, je nach Darstellungsbereichsgröße und Bildschirmauflösung unterschiedliche Bilder bereitzustellen.

<img> srcset Attribut

Mit dem Attribut srcset können Sie mehrere Bilddateien vorschlagen. Der Browser wählt dann anhand mehrerer Media-Queries, darunter die Größe des Darstellungsbereichs und die Bildschirmauflösung, aus, welches Bild angefordert werden soll.

Es kann nur ein srcset-Attribut pro <img>-Element vorhanden sein, aber dieses srcset kann auf mehrere Bilder verweisen. Das Attribut srcset akzeptiert eine Liste mit durch Kommas getrennten Werten. Jeder Wert enthält die URL des Assets, gefolgt von einem Leerzeichen und dann von den Deskriptoren für diese Bildoption. Wenn ein Breiten-Deskriptor verwendet wird, müssen Sie auch das Attribut sizes mit einer Media-Anfrage oder Quellgröße für jede srcset-Option außer der letzten angeben. Die Abschnitte zu responsiven Bildern mit srcset und beschreibenden Syntaxen sind lesenswert.

Das srcset-Bild hat Vorrang vor dem src-Bild, wenn eine Übereinstimmung vorliegt.

<picture> und <source>

Eine weitere Methode zum Bereitstellen mehrerer Ressourcen und zum Rendern des am besten geeigneten Assets durch den Browser ist das <picture>-Element. Das <picture>-Element ist ein Containerelement für mehrere Bildoptionen, die in einer unbegrenzten Anzahl von <source>-Elementen und einem einzelnen erforderlichen <img>-Element aufgeführt sind.

Zu den Attributen <source> gehören srcset, sizes, media, width und height. Das Attribut srcset ist für img, source und link üblich, wird aber in der Regel auf der Quelle etwas anders implementiert, da Media-Anfragen stattdessen im Media-Attribut von <srcset> aufgeführt werden können. <source> unterstützt auch Bildformate, die im Attribut type definiert sind.

Der Browser berücksichtigt jedes untergeordnete <source>-Element und wählt die beste Übereinstimmung aus. Wenn keine Übereinstimmungen gefunden werden, wird die URL des Attributs src des Elements <img> ausgewählt. Der zugängliche Name stammt aus dem Attribut alt des verschachtelten <img>. Die Abschnitte zu <picture>-Elementen und präskriptiven Syntaxen sind ebenfalls lesenswert.

Zusätzliche Leistungsfunktionen

Es gibt eine Reihe zusätzlicher Bildfunktionen, mit denen sich die Leistung Ihrer Website verbessern lässt.

Lazy Loading

Das Attribut loading gibt dem JS-fähigen Browser an, wie das Bild geladen werden soll. Der Standardwert eager bedeutet, dass das Bild sofort geladen wird, wenn der HTML-Code geparst wird, auch wenn sich das Bild außerhalb des sichtbaren Darstellungsbereichs befindet. Wenn Sie loading="lazy" festlegen, wird das Laden des Bildes aufgeschoben, bis es wahrscheinlich in den Darstellungsbereich kommt. „Wahrscheinlich“ wird vom Browser anhand der Entfernung des Bildes vom Darstellungsbereich definiert. Dieser Wert wird aktualisiert, wenn der Nutzer scrollt. Lazy Loading trägt dazu bei, Bandbreite und CPU zu sparen, was die Leistung für die meisten Nutzer verbessert. Wenn JavaScript deaktiviert ist, wird aus Sicherheitsgründen für alle Bilder standardmäßig eager verwendet.

<img src="switch.svg" alt="light switch" loading="lazy" />

Seitenverhältnis

Browser beginnen mit dem Rendern von HTML, sobald es empfangen wird, und senden Anfragen für Assets, sobald sie gefunden werden. Das bedeutet, dass der Browser das HTML bereits rendert, wenn er auf das <img>-Tag trifft und die Anfrage stellt. Das Laden von Bildern kann eine Weile dauern. Standardmäßig reservieren Browser keinen Platz für Bilder, der über die zum Rendern von alt-Text erforderliche Größe hinausgeht.

Das <img>-Element hat immer einheitenlose height- und width-Attribute unterstützt. Diese Eigenschaften wurden zugunsten von CSS nicht mehr verwendet. Im CSS können Bildabmessungen definiert werden. Häufig wird nur eine Abmessung wie max-width: 100%; festgelegt, um das Seitenverhältnis beizubehalten.

Da CSS in der Regel in <head> enthalten ist, wird es vor <img> geparst. Wenn das height- oder Seitenverhältnis nicht explizit angegeben wird, entspricht der reservierte Platz der Höhe (oder Breite) des alt-Texts.

Wenn Entwickler nur eine Breite angeben, führt der Empfang und das Rendern von Bildern zu kumulativen Layoutverschiebungen, was sich negativ auf die Web-Vitals auswirkt. Um dieses Problem zu beheben, unterstützen Browser Bildseitenverhältnisse. Wenn Sie die Attribute height und width für das <img>-Element angeben, fungieren diese als Größenhinweise. Der Browser wird über das Seitenverhältnis informiert, sodass die richtige Menge an Speicherplatz für das Rendern des Bildes reserviert werden kann. Wenn der Browser auf eine einzelne Dimension stößt, z. B. unser Beispiel mit 50 %, wird Platz für das Bild reserviert, wobei die CSS-Dimension eingehalten wird und das Breiten-Höhen-Verhältnis für die andere Dimension beibehalten wird.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Ihre Bilder sind responsiv, wenn das CSS richtig eingerichtet wurde. Ja, die enthaltenen einheitenlosen height- und width-Werte werden mit CSS überschrieben. Der Zweck dieser Attribute besteht darin, den Platz im richtigen Seitenverhältnis zu reservieren und so die Leistung durch Reduzierung von Layoutverschiebungen zu verbessern. Das Laden der Seite dauert weiterhin ungefähr gleich lang, aber die Benutzeroberfläche springt nicht, wenn das Bild auf dem Bildschirm gerendert wird.

Weitere Bildfunktionen

Das <img>-Element unterstützt auch die Attribute crossorigin, decoding, referrerpolicy und in Blink-basierten Browsern fetchpriority. Wenn das Bild Teil einer serverseitigen Karte ist, fügen Sie das boolesche Attribut ismap ein und verschachteln Sie <img> in einem Link für Nutzer ohne Zeigegeräte.

Das Attribut ismap ist für <input type="image" name="imageSubmitName"> nicht erforderlich und wird auch nicht unterstützt, da die x- und y-Koordinaten des Klickorts bei der Formularübermittlung gesendet werden. Die Werte werden gegebenenfalls an den Eingabenamen angehängt. Wenn der Nutzer beispielsweise auf das Bild klickt, wird &imageSubmitName.x=169&imageSubmitName.y=66 mit dem Formular gesendet. Wenn das Bild kein name-Attribut hat, werden die x- und y-Koordinaten gesendet: &x=169&y=66.

Wissen testen

Wissen zu Bildern testen