Bilder

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

Die wichtigste Methode zum Einschließen von Bildern ist das Tag <img>. Dabei verweist das Attribut src auf eine Bildressource und das Attribut alt, das das Bild beschreibt.

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

Sowohl das srcset-Attribut für <img> als auch das <picture>-Element bieten die Möglichkeit, mehrere Bildquellen mit zugehörigen Medienabfragen mit jeweils einer Fallback-Bildquelle einzubeziehen, sodass je nach Auflösung, Browserfunktionen und Größe des Darstellungsbereichs die am besten geeignete Bilddatei ausgeliefert wird. Mit dem Attribut srcset können mehrere Bildversionen basierend auf der Auflösung und zusammen mit dem Attribut sizes die Größe des Darstellungsbereichs des Browsers bereitgestellt werden.

<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 <picture>-Element und mit untergeordneten <source>-Elementen 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>

Neben diesen integrierten HTML-Methoden für responsive Bilder ermöglicht HTML auch, die Bild-Rendering-Leistung durch verschiedene Attribute zu verbessern. Das <img>-Tag und damit die grafischen Sendeschaltflächen <input type="image"> können die Attribute height und width enthalten, um das Seitenverhältnis des Bildes festzulegen und so die Verschiebung des Inhaltslayouts zu reduzieren. Das Attribut lazy ermöglicht das Lazy Loading.

HTML unterstützt auch die direkte Aufnahme von SVG-Bildern mithilfe von <svg>. SVG-Bilder mit der Erweiterung .svg (oder als data-uri) können jedoch mit dem Element <img> eingebettet werden.

Jedes Vordergrundbild sollte mindestens die Attribute src und alt enthalten.

Die Datei src ist der Pfad und Dateiname des eingebetteten Bilds. Mit dem Attribut src wird die URL für das Bild bereitgestellt. Der Browser ruft dann das Asset ab und rendert es auf der Seite. Dieses Attribut wird für <img> benötigt. Andernfalls kann nichts gerendert werden.

Das alt-Attribut liefert alternativen Text für das Bild und bietet eine Bildbeschreibung für diejenigen, die den Bildschirm nicht sehen können (z. B. Suchmaschinen und Hilfstechnologien, sogar Alexa, Siri und Google Assistant). Es kann im Browser angezeigt werden, wenn das Bild nicht geladen wird. Neben Nutzern mit langsamen Netzwerken oder begrenzter Bandbreite ist der alt-Text in HTML-E-Mails unglaublich nützlich, da viele Nutzer Bilder in ihren E-Mail-Anwendungen blockieren.

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

Falls es sich um ein SVG-Bild handelt, musst du auch role="img" einfügen. Dieses Element ist aufgrund von VoiceOver bugs erforderlich.

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

Wirkungsvolle Bildbeschreibungen für alt verfassen

Alt-Attribute sind kurz und prägnant und stellen alle relevanten Informationen bereit, die das Bild vermittelt, während Informationen ausgelassen werden, die für andere Inhalte im Dokument redundant oder anderweitig nicht nützlich sind. Der Tonfall sollte den Ton der Website widerspiegeln.

Um einen effektiven Alternativtext zu schreiben, stellen Sie sich vor, Sie würden die gesamte Seite einer Person vorlesen, die sie nicht sehen kann. Durch Verwendung des semantischen <img>-Elements werden Nutzer von Screenreadern und Bots darüber informiert, dass das Element ein Bild ist. Die Angabe „Dies ist ein Bild/ein Screenshot/ein Foto von“ ist überflüssig in alt. Die Nutzer müssen nicht wissen, dass es ein Bild gibt, aber sie müssen wissen, welche Informationen das Bild vermittelt.

Normalerweise würde man nicht sagen: „Das ist ein körniges Bild eines Hundes mit einem roten Hut.“ Stattdessen würden Sie das, was das Bild vermittelt, in Bezug auf den Kontext des restlichen Dokuments weiterleiten. Was Sie vermitteln, ändert sich je nach Kontext und Inhalt des umgebenden Textes.

Zum Beispiel wird das Foto eines Hundes je nach Kontext unterschiedlich beschrieben. Wenn Fluffy ein Avatar neben einer Rezension zu Yuckymeat-Hundefutter ist, reicht alt="Fluffy" aus.

Wenn das Foto auf der Adoptionsseite von Fluffy auf der Website eines Tierheims zu sehen ist, ist die Zielgruppe der potenzielle Hundeeltern. Der Text sollte die im Bild vermittelten Informationen beschreiben, die für einen Nutzer relevant sind und nicht im umgebenden Text wiederholt werden. 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 im Allgemeinen die Spezies, Rasse, Alter und Geschlecht des adoptierten Haustiers, sodass dies im Alt-Text nicht wiederholt werden muss. Die schriftliche Biografie des Hundes enthält aber wahrscheinlich nicht die Haarlänge, Farben oder Spielzeugvorlieben. Beachten Sie, dass wir das Bild nicht beschrieben haben: Der potenzielle Hundebesitzer muss nicht wissen, ob der Hund drinnen oder draußen ist oder ob er ein rotes Halsband und eine blaue Leine hat.

Wenn Sie Bilder für Symbole verwenden, vermittelt das Attribut alt den barrierefreien Namen die Bedeutung des Symbols und nicht die Beschreibung des Bildes. Das ALT-Attribut des Lupensymbols lautet beispielsweise search. Bei dem Symbol, das wie ein Haus aussieht, ist home als Alt-Text. Die Beschreibung des 5-Zoll-Disketten-Symbols lautet save. Wenn zwei Symbole von Fluffy verwendet werden, um Best Practices und Anti-Muster anzuzeigen, könnte für den lächelnden Hund in einer grünen Baskenmütze alt="good" festgelegt sein, während der knurrende Hund in einer roten Baskenmütze alt="bad" lauten könnte. Verwenden Sie nur Standardsymbole. Wenn Sie Symbole verwenden, die nicht den Standards entsprechen, fügen Sie eine Legende hinzu und achten Sie darauf, dass die Symbole nicht die einzige Möglichkeit sind, die Bedeutung Ihrer UI-Elemente zu verstehen.

Wenn es sich bei dem Bild um einen Screenshot oder eine Grafik handelt, schreiben Sie, was das Bild aus dem Bild gelernt hat, anstatt das Erscheinungsbild zu beschreiben. Ein Bild kann auf jeden Fall mehr als tausend Worte sagen, die Beschreibung sollte jedoch kurz und knapp das Gelernte vermitteln.

Lassen Sie Informationen aus dem Kontext weg, die der Nutzer bereits aus dem Kontext kennt und über die die Inhalte anderweitig informiert sind. Wenn Sie sich beispielsweise auf einer Anleitungsseite zum Ändern von Browsereinstellungen befinden und auf der Seite um das Klicken auf Symbole in der Browser-Chrome-Datei geht, ist die URL der Seite in der Bildschirmaufnahme nicht wichtig. alt auf das aktuelle Thema beschränken: Einstellungen ändern Das alt könnte so aussehen: „Das Symbol für die Einstellungen befindet sich in der Navigationsleiste unter dem Suchfeld.“ Fügen Sie keinen „Screenshot“ oder „Machine Learningworkshop“ hinzu, da der Nutzer nicht wissen muss, dass es sich um einen Screenshot handelt, und nicht wissen muss, wo der Techwriter gesurft hat, als er die Anleitung geschrieben hat. Die Beschreibung des Bildes basiert darauf, warum das Bild überhaupt verwendet wurde.

Wenn der Screenshot zeigt, wie die Versionsnummer des Browsers durch Aufrufen von chrome://version/ zu finden ist, 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 liefert, die nicht im umgebenden Text enthalten sind.

Wenn das Bild keine zusätzlichen Informationen bietet oder nur dekorativen Zwecken dient, sollte das Attribut trotzdem vorhanden sein, also als leere Zeichenfolge.

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

MachineLearningWorkshop.com hat sieben Bilder im Vordergrund, also sieben Bilder mit Alt-Attributen: ein Easter-Egg-Lichtschalter, ein manuelles Symbol, zwei biografische Fotos von Hal und Eve sowie drei Avatare eines Mixers, eines Staubsaugers und eines Toasters. Das Vordergrundbild, das wie ein Magazin aussieht, ist das einzige, das rein dekorativ ist. Die Seite hat auch zwei Hintergrundbilder. Diese sind ebenfalls dekorative und nicht zugänglich, da sie mit CSS hinzugefügt werden.

Das rein dekorative Magazin hat ein leeres alt-Attribut und einen role mit none, da das Bild eine rein präsentationsbezogene SVG-Datei ist. Falls sinnvoll, sollten SVG-Bilder das role="img" enthalten.

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

Unten auf der Seite werden drei Rezensionen angezeigt, jeweils mit einem Bild des Verfassers. Normalerweise ist der alt-Text der Name der abgebildeten Person.

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

Da dies eine Scherzseite ist, solltest du stattdessen vermitteln, was für Nutzer mit eingeschränktem Sehvermögen möglicherweise nicht sichtbar ist, damit sie den Humor nicht verpassen. Wir verwenden die ursprüngliche Maschinenfunktion als alt, anstatt den Namen der Figur zu verwenden:

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

Die Fotos der Kursleitenden sind nicht nur Avatare. Sie sind biografische Bilder und erhalten daher eine detailliertere Beschreibung.

Wenn dies eine echte Website wäre, würden Sie nur so gut wie möglich beschreiben, wie die Lehrkraft aussieht, damit sie von potenziellen Schülern und Studenten erkannt wird, wenn sie den Kurs betreten.

<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 Witz-Website handelt, gib stattdessen die Informationen an, die im Kontext eines Witzes 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, spielt es für ihn keine Rolle, wie der rote Punkt aussieht. In diesem Fall ist die Geschichte der Filmreferenz wichtig.

Berücksichtigen Sie beim Verfassen von beschreibenden Texten, welche Informationen aus dem Bild für den Nutzer wichtig und relevant sind, und fügen Sie diese Informationen hinzu. Denken Sie daran, dass der Inhalt des Attributs alt für ein Bild je nach Kontext unterschiedlich ist. Alle Informationen, die in einem Bild vermittelt werden und auf die ein sehender Nutzer zugreifen kann und die für den Kontext relevant sind, sind das, was vermittelt werden muss, nicht mehr. Halten Sie sie kurz, präzise und nützlich.

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

Responsive Bilder

Es gibt viele verschiedene Größen des Darstellungsbereichs. Es gibt auch unterschiedliche Bildschirmauflösungen. Sie sollten die Bandbreite eines mobilen Nutzers nicht verschwenden, indem Sie ihm ein Bild bereitstellen, das breit genug für einen großen Bildschirmmonitor ist. Möglicherweise möchten Sie jedoch Bilder mit höherer Auflösung für kleine Geräte bereitstellen, die eine viermal so hohe Bildschirmauflösung haben. Je nach Größe des Darstellungsbereichs und Bildschirmauflösung gibt es mehrere Möglichkeiten, Bilder bereitzustellen.

<img> srcset Attribut

Mit dem Attribut srcset können mehrere Bilddateien vorgeschlagen werden, wobei der Browser anhand mehrerer Medienabfragen, einschließlich Größe des Darstellungsbereichs und Bildschirmauflösung, welches Bild angefordert werden soll.

Es kann ein einzelnes srcset-Attribut pro <img>-Element geben, aber dieses srcset kann mit mehreren Bildern verknüpft sein. Für das Attribut srcset ist eine Liste mit kommagetrennten Werten zulässig, die jeweils die URL des Assets gefolgt von einem Leerzeichen gefolgt von Deskriptoren für die Bildoption enthalten. Wenn ein Breitendeskriptor verwendet wird, müssen Sie auch das Attribut sizes mit einer Medienabfrage oder Quellgröße für jede andere srcset-Option außer der letzten angeben. Es lohnt sich, die Abschnitte mit Informationen zu responsiven Bildern mit srcset und beschreibenden Syntaxen zu lesen.

Das srcset-Image hat Vorrang vor dem src-Image, falls es eine Übereinstimmung gibt.

<picture> und <source>

Eine weitere Methode, um mehrere Ressourcen bereitzustellen und dem Browser zu ermöglichen, das am besten geeignete Asset zu rendern, ist das Element <picture>. 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.

Die <source>-Attribute umfassen srcset, sizes, media, width und height. Das Attribut srcset kommt img, source und link vor, ist aber im Allgemeinen in der Quelle etwas anders implementiert, da Medienabfragen stattdessen im Medienattribut 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 <img>-Elements ausgewählt. Der zugängliche Name stammt aus dem alt-Attribut des verschachtelten <img>. Es lohnt sich auch, die Abschnitte mit Informationen zum <picture>-Element und den präskriptiven Syntaxen zu lesen.

Zusätzliche Leistungsmerkmale

Lazy Loading

Über das loading-Attribut wird dem JS-fähigen Browser mitgeteilt, wie das Bild geladen werden soll. Der Standardwert eager bedeutet, dass das Bild sofort beim Parsen des HTML-Codes geladen wird, auch wenn sich das Bild außerhalb des sichtbaren Darstellungsbereichs befindet. Wenn Sie loading="lazy" festlegen, wird das Laden des Bildes verzögert, bis es wahrscheinlich im Darstellungsbereich erscheint. „Wahrscheinlich“ wird vom Browser basierend auf der Entfernung des Bildes vom Darstellungsbereich definiert. Sie wird aktualisiert, wenn der Nutzer scrollt. Lazy Loading spart Bandbreite und CPU und verbessert die Leistung für die meisten Nutzer. Wenn JavaScript deaktiviert ist, werden alle Bilder aus Sicherheitsgründen standardmäßig auf eager gesetzt.

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

Seitenverhältnis

Browser beginnen mit dem Rendern des HTML-Codes, sobald dieser empfangen wird, und stellen bei Feststellung Asset-Anforderungen. Das bedeutet, dass der Browser den HTML-Code bereits rendert, wenn er das <img>-Tag erkennt und die Anfrage stellt. Außerdem kann das Laden der Bilder eine Weile dauern. Standardmäßig reservieren Browser keinen Platz für Bilder, außer der für das Rendern von alt-Text erforderlichen Größe.

Das <img>-Element hat schon immer die Attribute height und width ohne Einheit unterstützt. Diese Attribute wurden zugunsten von CSS nicht mehr verwendet. Mit CSS können Bildabmessungen definiert werden. Dabei wird häufig eine einzelne Abmessung wie max-width: 100%; festgelegt, um das Seitenverhältnis beizubehalten. Da CSS normalerweise in <head> enthalten ist, wird es geparst, bevor <img> erkannt wird. Ohne explizite Auflistung von height oder Seitenverhältnis wird der Platz reserviert, der die Höhe (oder Breite) des alt-Texts angibt. Da die meisten Entwickler nur eine Breite angeben, führt der Empfang und das Rendern von Bildern zu einer kumulativen Layoutverschiebung, die Web Vitals schadet. Um dieses Problem zu beheben, unterstützen Browser Bildseitenverhältnisse. Die Einbeziehung der height- und width-Attribute in <img> dient als Größenhinweise und informiert den Browser über das Seitenverhältnis, sodass die richtige Menge an Platz für das letztendliche Bild-Rendering reserviert werden kann. Wenn Sie einen Wert für Höhe und Breite in ein Bild einfügen, kennt der Browser das Seitenverhältnis des Bildes. Wenn der Browser auf eine einzelne Größe stößt, z. B. unser 50 %-Beispiel, wird Platz für das Bild gespart, das der CSS-Abmessung entspricht, während die andere Dimension das Seitenverhältnis von Breite zu Höhe beibehält.

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

Ihre Bilder sind auch dann responsiv, wenn der CSS-Code richtig eingerichtet wurde. Ja, die enthaltenen Werte für height und width ohne Einheit werden mit CSS überschrieben. Diese Attribute dienen dazu, den Platz mit dem richtigen Seitenverhältnis zu reservieren und so die Leistung zu verbessern, indem Layoutverschiebungen reduziert werden. Das Laden der Seite dauert ungefähr genauso lange, aber die Benutzeroberfläche springt nicht, wenn das Bild auf dem Bildschirm angezeigt wird.

Weitere Bildfunktionen

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

Das Attribut ismap ist für <input type="image" name="imageSubmitName"> nicht erforderlich oder wird sogar unterstützt, da die Koordinaten x und y der Klickposition beim Senden des Formulars gesendet werden. Dabei werden die Werte an den Eingabenamen, falls vorhanden, angehängt. Mit dem Formular wird beispielsweise ein Objekt wie &imageSubmitName.x=169&imageSubmitName.y=66 gesendet, wenn der Nutzer auf das Bild klickt und es sendet. Wenn das Bild kein name-Attribut hat, werden x und y gesendet: &x=169&y=66.

Wissen testen

Testen Sie Ihr Wissen über Bilder.