HTML/Tutorials/Bilder im Internet/Einbindung mit img
Text-Info
- 10-15min
- einfach
- Kenntnisse in
● Einstieg in HTML
● Einstieg in CSS
Mit dem img-Element – image (englisch für Bild) – können Sie Grafikdateien in Ihre HTML-Dokumente einbinden. <img>
ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.
Neben den immer nötigen src- und alt-Attributen sind folgende Angaben außerdem möglich:
- alt: (engl. alternative) gibt den Alternativtext an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder soll. Screenreader lesen den Text vor.
- crossorigin: Wenn Sie externe Grafiken einbinden, können Sie eine CORS-basierte Anfrage starten, sodass diese Grafiken dann identifiziert werden können
- anonymous: (Standardwert) credentials flag ist auf 'same-origin' gesetzt
- use-credentials: credentials flag ist auf 'include' gesetzt
- height: Angabe einer optionalen Höhe
- ismap: Falls Bild Teil einer Server-seitigen verweis-sensitiven Grafik ist
- loading: Angabe, ob Bilder schnell oder erst beim Scrollen geladen werden sollen.
- referrerpolicy:
- sizes: eine kommagetrennte Liste mit einem Medienmerkmal (media condition) und einer Größenangabe Beachten Sie: Der letzte Wert darf kein Medienmerkmal haben.
- src (engl. source für Quelle) für die Referenz der Bilddatei.
- srcset: eine kommagetrennte Liste mehrerer …
- URLs , ergänzt durch die optionale Angabe der
- Breite: positive Zahl gefolgt von einem w. (Defaultwert ist unendlich)
- Pixeldichte: positive Zahl gefolgt von einem x. (Defaultwert ist 1x)
- title: Zeigt einen Tooltip, wenn mit der Maus über das Bild gefahren wird.
- width: Angabe einer optionalen Breite
- usemap: zeigt an, dass Bild Teil einer verweissensitiven Grafik ist
Inhaltsverzeichnis
Pflichtangaben[Bearbeiten]
alt - Beschreibungen für Bilder und Grafiken[Bearbeiten]
Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Oft ist die Bedeutung in wenigen Worten hinreichend erklärt.[1] Gelegentlich kann es jedoch notwendig sein, eine längere Erläuterung beizufügen, etwa bei Fotos oder Karikaturen. Hier eignet sich die Einbindung der Grafik in ein figure-Element mit einer figcaption-Bildunterschrift besser als der Alternativtext. Dennoch darf auch hier nicht auf ein alt-Attribut verzichtet werden.[2]
Das alt-Attribut ist eine Pflichtangabe.src - Bildquellen angeben[Bearbeiten]
Das src-Attribut referenziert die Quelle (engl. source) der Bilddatei. Diese kann wie in HTML üblich relativ oder absolut angegeben werden.
Es ist auch möglich, mehrere Bildquellen mit srcset anzugeben, um so auf responsiven Seiten jeweils die passenden Grafiken zu laden,
optionale Angaben[Bearbeiten]
(optionale) Breiten- und Höhenangaben[Bearbeiten]
-
width
-
height
geben die Bildbreite bzw. -höhe an.
Wenn Sie als Maßeinheit Pixel angeben wollen, notieren Sie die Maße ohne Einheitenangabe. Während bei HTML4 noch Prozentangaben zulässig waren, ist diese Einheit im HTML5-Standard als Breiten- bzw. Höhenangabe für Bilder gestrichen worden: Es sind nur noch Angaben in Pixeln (das heißt ohne Einheit) erlaubt.
<figure>
<img src="Hund.gif" alt="Hund mit Halsband und gefletschten Zähnen.">
<figcaption>Das Bild enthält die Quellenangabe src="..." und einen alt-Text.</figcaption>
</figure>
<figure>
<img src="Hund.gif" width="104" height="90" alt="Hund">
<figcaption>Das Bild enthält neben den Pflichtangaben noch feste Abmessungen,
sodass es auf 50% seiner Größe skaliert wird.
</figcaption>
</figure>
Ebenso bleibt ggf. das Layout bei fehlenden Bildern erhalten.
Lazy Loading[Bearbeiten]
Das loading-Attribut legt fest, wie externe Medien geladen werden sollen.
- Browserunterstützung
- caniuse.com
erlaubte Werte
- auto (Standardwert) Browser lädt Grafiken …
- eager: Medien above the fold sollen bevorzugt geladen werden. (Der Begriff Above the fold beschreibt im Printdesign die sichtbare Hälfte einer Zeitung, im Webdesign den Bereich einer Website, der dem Besucher auf den ersten Blick angezeigt wird, also nicht erst durch Scrollen sichtbar wird. Mit CSS allein kannn nicht erkannt werden, ob sich ein Bereich innerhalb des Viewports befindet. Mit getBoundingClientRect kann dies per JavaScript ermittelt werden.)
- lazy: Medien außerhalb des sichtbaren Bereichs sollen erst geladen werden, wenn der Benutzer scrollt.
<img src="celebration.jpg" loading="lazy" alt="..." >
srcset - mehrere Bildquellen[Bearbeiten]
Über media queries können Sie Formate für unterschiedliche Bildschirmgrößen definieren. Mit dem Attribut srcset können Sie Bilder in verschiedenen Größen referenzieren, die dann entsprechend geladen werden.
Als Parameter enthält das srcset-Attribut eine kommagetrennte Liste mehrerer …
- URLs , ergänzt durch die optionale Angabe der
- Breite: positive Zahl gefolgt von einem w. (Defaultwert ist unendlich)
- Pixeldichte: positive Zahl gefolgt von einem x. (Defaultwert ist 1x)
In diesem Beispiel werden im srcset mehrere URL angeboten. Browser ohne srcset-Support zeigen das mit src
referenzierte Bild an, für Retina-Displays werden alternative hochauflösende Bilder zur Verfügung gestellt.
obsolete Angaben[Bearbeiten]
-
align
ersetzt durch: CSS - Ausrichtung border
ersetzt durch: CSS - Rahmen-
hspace
ersetzt durch: CSS - Abstand -
longdesc
war ein Link zu einer längeren Beschreibung als im alt-Text, kann durch figcaption ersetzt werden. -
vspace
ersetzt durch: CSS - Abstand
Hinweis
src
und alt
sind Pflichtangaben.width
und height
sind für die Darstellung des Bildes empfehlenswert, aber optional.
Alle anderen Vorgaben sollten mit CSS umgesetzt werden.
Siehe auch[Bearbeiten]
- Grafik (Portalseite mit vielen Links)
- Barrierefreiheit/Grafiken und Multimedia zugänglich gestalten
Referenz: