Bilder

Dekorative Bilder wie Farbverläufe im Hintergrund auf Schaltflächen oder Hintergrundbilder in Abschnitten des Inhalts oder auf der ganzen Seite sind Präsentationsformen und sollten mit CSS angewendet werden. Wenn ein Bild Kontext zu einem Dokument hinzufügt, ist es Inhalt und sollte mit HTML eingebettet.

Die wichtigste Methode zum Einfügen von Bildern ist das <img>-Tag mit der src -Attribut, das auf eine Bildressource verweist, und das alt-Attribut, das das Bild beschreibt.

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

Sowohl das srcset-Attribut auf <img> als auch das <picture>-Element bieten die Möglichkeit, mehrere Bildquellen mit zugehörige Medienabfragen mit jeweils einer Fallback-Bildquelle, sodass die passendste Bilddatei basierend auf dem die Auflösung, die Browserfunktionen und die Größe des Darstellungsbereichs. Mit dem Attribut srcset können mehrere Image-Versionen angegeben werden basierend auf der Auflösung und, zusammen mit dem sizes-Attribut, der Größe des Browser-Darstellungsbereichs.

<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 in Verbindung mit untergeordneten <source>-Elementen geschehen, die <img> als Standardquelle verwenden.

<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 den integrierten HTML-Methoden für responsive Bilder ermöglicht HTML auch mithilfe verschiedener Attribute verbessert werden. Das <img>-Tag und somit grafische „Senden“-Schaltflächen <input type="image">, kann die Attribute height und width enthalten, um das Seitenverhältnis des Bildes festzulegen und so inhaltliche Layoutverschiebungen zu reduzieren. Das Attribut lazy aktiviert das Lazy Loading.

HTML unterstützt auch die direkte Einbindung von SVG-Bildern über den <svg> (bei SVG). Bilder mit der Erweiterung .svg (oder als data-uri) können 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. Das Attribut src wird verwendet, um die URL für das Bild anzugeben. Der Browser ruft dann das Asset ab und rendert es auf der Seite. Dieses Attribut wird von <img> benötigt. ohne das Tool, sind keine zum Rendern aus.

Das Attribut alt stellt alternativen Text für das Bild bereit und enthält eine Beschreibung des Bildes für diejenigen, die das Bild nicht sehen können (zum Beispiel Suchmaschinen, Hilfstechnologien oder Alexa, Siri und Google Assistant) und 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 unglaublich nützlich E-Mails, da viele Nutzer Bilder in ihren E-Mail-Anwendungen blockieren.

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

Wenn das Bild einen SVG-Dateityp hat, fügen Sie auch role="img" hinzu. ist aufgrund von VoiceOver-Fehlern erforderlich.

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

Wirkungsvolle alt-Bildbeschreibungen verfassen

ALT-Attribute sollten kurz und prägnant sein und alle relevanten Informationen enthalten, die das Bild vermittelt, während sie ausgelassen werden. Informationen, die redundant zu anderen Inhalten des Dokuments sind oder anderweitig nicht nützlich sind. Der Ton sollte auf jeden Fall den Ton der Website widerspiegeln.

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

Normalerweise würden Sie nicht sagen: „Das ist ein körniges Bild eines Hundes mit einem roten Hut.“ Vielmehr soll vermittelt werden, was das Bild ist. Inhalte, die in Bezug auf den Kontext des übrigen Dokuments vermittelt werden; und was Sie vermitteln, ändert sich je nach Kontext und den Inhalt des umgebenden Textes.

Beispielsweise wird ein Foto eines Hundes je nach Kontext unterschiedlich beschrieben. Wenn Fluffy ein Avatar neben einem Rezension für Hundefutter Yuckymeat, alt="Fluffy" reicht aus.

Wenn das Foto auf der Adoptionsseite von Fluffy auf der Website eines Tierheims zu finden ist, ist die Zielgruppe der potenzielle Hund Parent. Der Text sollte die im Bild vermittelten Informationen beschreiben, die für den Nutzer relevant und nicht doppelt vorhanden sind. im umgebenden Text ein. 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, die Rasse, das Alter und das Geschlecht des adoptierbaren Haustiers, Dieser muss im Alt-Text also nicht wiederholt werden. In der schriftlichen Biografie des Hundes sind jedoch wahrscheinlich keine Haarlängen, Farben, oder Spielzeugpräferenzen. Beachten Sie, dass wir das Bild nicht beschrieben haben: Der potenzielle Hundebesitzer muss nicht wissen, ob der Hund drinnen oder draußen, oder dass er ein rotes Halsband und eine blaue Leine hat.

Wenn Sie Bilder für Symbole verwenden, vermitteln Sie über das Attribut alt den barrierefreien Namen und die Bedeutung des Symbols. und keine Beschreibung des Bildes. Das ALT-Attribut des Lupensymbols lautet beispielsweise search. Das Symbol mit der z. B. ein Haus mit home als Alt-Text ist. Die Beschreibung des 5-Zoll-Diskettensymbols lautet save. Wenn zwei Symbole für Fluffy verwendet werden, Um auf Best Practices und Anti-Patterns hinzuweisen, könnte für den lächelnden Hund in einer grünen Baskenmütze alt="good" festgelegt werden, für den lächelnden Hund in einer roten Baskenmütze steht alt="bad". Verwenden Sie nur Standardsymbole und nicht standardmäßige Symbole wie die guten und schlechten Fluffys, fügen Sie eine Legende ein und stellen Sie sicher, dass 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 eine Grafik handelt, schreiben Sie, was aus dem Bild gelernt wird, anstatt das Erscheinungsbild zu beschreiben. Ein Bild kann definitiv mehr als tausend Worte umfassen. Die Beschreibung sollte aber kurz und bündig sein, was das Gelernte vermittelt.

Lassen Sie Informationen weg, die der Nutzer bereits aus dem Kontext kennt und über die er auch in anderen Inhalten informiert wird. Beispiel: Wenn es um das Klicken auf Symbole im Chrome-Browser geht, wird die URL der Seite in der Bildschirmaufnahme ist nicht wichtig. Beschränke die alt auf das jeweilige Thema: Einstellungen ändern. Das alt könnte „Das Symbol für die Einstellungen befindet sich in der Navigationsleiste unter dem Suchfeld.“ Fügen Sie „Screenshot“ nicht hinzu. oder „maschinelles Lernen“ Nutzende müssen nicht wissen, dass es sich um einen Screenshot handelt und wo der Techwriter beim Schreiben surft. in der Anleitung. Die Beschreibung des Bildes basiert auf dem Kontext, warum das Bild überhaupt verwendet wurde.

Wenn anhand des Screenshots zu sehen ist, wo Sie die Versionsnummer des Browsers über chrome://version/ finden, fügen Sie die URL in das Inhalt der Seite als Anleitung und geben Sie einen leeren String als ALT-Attribut an, da das Bild keine Informationen liefert. der nicht im umgebenden Text enthalten ist.

Wenn das Bild keine zusätzlichen Informationen enthält oder nur dekorativen Zwecken dient, sollte das Attribut weiterhin vorhanden sein, lediglich als leerer String.

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

MachineLearningWorkshop.com hat sieben Bilder im Vordergrund, daher sieben Bilder mit ALT-Attributen: ein Easter Egg-Lichtschalter, ein manuelles Symbol, zwei biografische Fotos von Hal und Eve und drei Avatare eines Mixers, eines Staubsaugers und eines Toasters. Die Vordergrundbild, das wie eine Zeitschrift aussieht, ist das einzige, das rein dekorativ ist. Die Seite enthält auch zwei Hintergrundbilder haben, Sie sind außerdem dekorativ und, da sie über CSS hinzugefügt werden, nicht zugänglich.

Die Zeitschrift ist rein dekorativ und hat ein leeres alt-Attribut und ein role von none, da das Bild ein reines SVG-Präsentation. SVG-Bilder sollten das role="img" enthalten, sofern sie aussagekräftig sind.

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

Unten auf der Seite werden drei Rezensionen angezeigt, die jeweils ein Bild des Posters enthalten. Normalerweise 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 vermitteln, was für Nutzer mit eingeschränktem Sehvermögen möglicherweise nicht offensichtlich ist, damit sie die Humor verwenden wir die ursprüngliche Maschinenfunktion als alt anstelle des Zeichennamens:

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

Die Fotos der Trainer sind nicht nur Avatare: Es handelt sich um biografische Bilder, weshalb eine ausführlichere Beschreibung möglich ist.

Bei einer echten Website würden Sie mindestens beschreiben, wie die Lehrkraft aussieht, damit ein potenzieller Schüler oder Student wenn Sie das Klassenzimmer 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, geben Sie stattdessen die Informationen an, die im Zusammenhang mit diesem Witz 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 über das Telefon vorlesen, wäre für ihn egal, wie der rote Punkt aussieht. In diesem Fall die Geschichte der Filmreferenz.

Berücksichtigen Sie beim Verfassen des beschreibenden Textes, welche Informationen das Bild vermittelt, die für die Nutzenden wichtig und relevant sind, und und diese einfügen. Denken Sie daran, dass der Inhalt des Attributs alt für ein Bild je nach Kontext variiert. Alle in einem Bild vermittelten Informationen auf die ein sehender Nutzer Zugriff hat und für den Kontext relevant ist, muss vermittelt werden. nicht mehr. Fassen Sie sich kurz, präzise, und nützlich zu machen.

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

Responsive Bilder

Es gibt zahlreiche Größen des Darstellungsbereichs. Außerdem gibt es unterschiedliche Bildschirmauflösungen. Sie möchten nicht, dass mobile Nutzer indem Sie ihnen ein Bild zur Verfügung stellen, das breit genug für einen großen Bildschirm ist. Möglicherweise möchten Sie aber auch eine höhere Auflösung für winzige Geräte mit viermal höherer Bildschirmauflösung. Es gibt mehrere Möglichkeiten, basierend auf der Größe des Darstellungsbereichs und der Bildschirmauflösung.

<img> srcset Attribut

Mit dem Attribut srcset können mehrere Bilddateien vorgeschlagen werden. Dabei wählt der Browser anhand mehrerer Medienabfragen, wie 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. Das srcset akzeptiert eine Liste mit kommagetrennten Werten, die jeweils die URL des Assets, gefolgt von einem Leerzeichen gefolgt von Deskriptoren für diese Image-Option. Wenn ein Breitendeskriptor verwendet wird, müssen Sie auch das Attribut sizes mit einem Medienobjekt Abfrage- oder Quellgröße für jede srcset-Option außer der letzten auswählen. Es lohnt sich, die Lernabschnitte zu responsiven Bildern mit srcset und beschreibenden Syntaxen zu lesen.

Im Fall einer Übereinstimmung hat das Bild srcset Vorrang vor dem Bild src.

<picture> und <source>

Eine weitere Methode, um mehrere Ressourcen bereitzustellen und dem Browser zu ermöglichen, das am besten geeignete Asset zu rendern, ist die Verwendung des <picture>-Element. Das Element <picture> ist ein Container -Element für mehrere Bildoptionen in einer unbegrenzten Anzahl von <source> und ein einziges erforderliches <img>-Element.

Zu den <source>-Attributen gehören srcset, sizes, media, width und height. Das Attribut srcset ist für img, source und link gleich, wird aber in der Regel etwas anders implementiert. da Medienabfragen stattdessen im Medienattribut der <srcset> aufgeführt werden können. <source> unterstützt auch im Attribut type definierte Bildformate.

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 ist ausgewählt. Der zugängliche Name stammt aus dem Attribut alt des verschachtelten <img>. Lesen Sie auch die Lernabschnitte zu <picture>-Elementen und präskriptiven Syntaxen.

Zusätzliche Funktionen zur Leistungssteigerung

Lazy Loading

Das Attribut loading teilt dem JS-fähigen Browser mit, wie das Bild geladen werden soll. Der Standardwert für eager bedeutet, dass das Bild werden beim Parsen des HTML-Codes sofort geladen, auch wenn sich das Bild außerhalb des sichtbaren Darstellungsbereichs befindet. Durch Festlegen von loading="lazy" wird das Bild erst dann geladen, wenn es wahrscheinlich in den Darstellungsbereich gelangt. „Wahrscheinlich“ vom Browser anhand der Entfernung definiert, das Bild aus dem Darstellungsbereich stammt. Diese Ansicht wird aktualisiert, wenn der Nutzer scrollt. Lazy Loading spart Bandbreite, CPU und verbessert die Leistung für die meisten Nutzenden. 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 beim Empfang mit dem Rendern des HTML-Codes und senden Assets, wenn diese gefunden werden. Das bedeutet, dass der Browser Der HTML-Code wird bereits gerendert, wenn das <img>-Tag gefunden wird und die Anfrage gestellt wird. Das Laden der Bilder kann etwas dauern. Standardmäßig reservieren Browser keinen Platz für Bilder, abgesehen von der Größe, die zum Rendern von alt-Text erforderlich ist.

Das <img>-Element unterstützt seit jeher die Attribute height und width ohne Einheit. Diese Eigenschaften wurden nicht zugunsten genutzt von CSS. CSS kann die Bildabmessungen definieren und dabei oft eine einzelne Dimension wie max-width: 100%; festlegen, damit das Seitenverhältnis erhalten bleibt. Da CSS normalerweise in <head> enthalten ist, wird es geparst, bevor <img> gefunden wird. Ohne die explizite Auflistung der height oder Seitenverhältnis ist der reservierte Platz der Höhe (oder Breite) des alt-Textes. Da die meisten Entwickler nur eine Breite angeben, der Erhalt und das Rendern von Bildern führen zu kumulativen Layout Shifts, was sich negativ auf Web Vitals auswirkt. Um dieses Problem zu beheben, unterstützen Browser Bildseitenverhältnisse. Die Angabe der Attribute height und width für <img> hat folgende Auswirkungen: Größenhinweise angeben, die den Browser über das Seitenverhältnis informieren, Platz, der für das spätere Rendern von Bildern reserviert ist. Wenn Sie einem Bild einen Wert für Höhe und Breite hinzufügen, das Seitenverhältnis des Bildes kennt. Wenn der Browser auf eine einzelne Dimension stößt, z. B. unser 50-%-Beispiel, spart er Platz für das Bild, das der CSS-Dimension entspricht, und das Seitenverhältnis der Breite zur Höhe wird bei der anderen Dimension beibehalten.

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

Ihre Bilder sind auch dann responsiv, wenn der CSS-Code korrekt eingerichtet wurde. Ja, die enthaltene Einheit ohne Die Werte height und width werden mit CSS überschrieben. Diese Attribute dienen dazu, das richtige Seitenverhältnis und verbessert die Leistung durch Reduzieren von Layout Shifts. Die Ladezeit der Seite bleibt ungefähr gleich. zum Laden dauert, aber die Benutzeroberfläche springt nicht, wenn das Bild auf den Bildschirm gezeichnet wird.

Weitere Bildfunktionen

Das <img>-Element unterstützt auch crossorigin, decoding, referrerpolicy sowie in blinkbasierten Browsern: fetchpriority-Attribute. Selten verwendet, wenn das Bild Teil einer serverseitigen Karte ist, das boolesche Attribut ismap einschließen und verschachtele die <img> in einem Link für Nutzer ohne Zeigegeräte.

Das Attribut ismap ist im <input type="image" name="imageSubmitName"> weder erforderlich noch unterstützt, da x und y Die Koordinaten der Klickposition werden während der Formulareinreichung gesendet, wobei die Werte an den Eingabenamen angehängt werden, sofern vorhanden. Beispiel: wird etwas wie &imageSubmitName.x=169&imageSubmitName.y=66 mit dem Formular gesendet, wenn der Nutzer auf das Bild klickt. senden können. Wenn das Bild kein name-Attribut hat, werden x und y gesendet: &x=169&y=66.

Wissen testen

Testen Sie Ihr Wissen über Bilder.