HTML
Bilder

Syntax

• <img src="" alt="">

Parameter

Bild erstellen

Verwenden Sie das Image-Tag, um ein Bild zu einer Seite hinzuzufügen.

Bild-Tags ( img ) haben keine schließenden Tags. Die zwei Hauptattribute, die Sie dem img Tag src , sind src , die Bildquelle und alt , ein alternativer Text, der das Bild beschreibt.

<img src="images/hello.png" alt="Hello World">

Sie können Bilder auch von einer Web-URL erhalten:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Hinweis: Bilder werden technisch nicht in eine HTML-Seite eingefügt, Bilder werden mit HTML-Seiten verknüpft. Das <img> -Tag erstellt einen Speicherplatz für das referenzierte Bild.

Es ist auch möglich, Bilder mit base64 direkt in die Seite einzubetten:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Tipp: Um ein Bild mit einem anderen Dokument zu verknüpfen, verschachteln Sie einfach das <img> -Tag in den <a> -Tags.

Bildbreite und -höhe

Hinweis: Die Breiten- und Höhenattribute sind für Bilder nicht veraltet und waren es noch nie. Ihr Einsatz wurde jedoch viel strenger gemacht.

Die Abmessungen eines Bildes können mithilfe der Attribute width und height des Image-Tags festgelegt werden:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Durch die Angabe der width und height eines Bildes gibt Ihre Struktur dem Browser einen Hinweis, wie die Seite angeordnet werden soll, auch wenn Sie nur die tatsächliche Bildgröße angeben. Wenn die Bildmaße nicht angegeben werden, muss der Browser das Layout der Seite nach dem Laden des Bildes neu berechnen. Dies kann dazu führen, dass die Seite beim Laden "herumspringt".

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Wahl des alten Textes

Alttext wird von Bildschirmleseprogrammen für sehbehinderte Benutzer und von Suchmaschinen verwendet. Es ist daher wichtig, guten Text für Ihre Bilder zu schreiben.

Der Text sollte auch dann korrekt aussehen, wenn Sie das Bild durch das alt-Attribut ersetzen. Zum Beispiel:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Ohne die Bilder würde dies folgendermaßen aussehen:

Anonymer Benutzer avatar Ein anonymer Benutzer schrieb:

Lorem ipsum dolor sed.

Symbol bearbeiten / Symbol löschen

Um dies zu korrigieren:

• Entfernen Sie den Alternativtext für den Avatar. Dieses Bild fügt Informationen für sehende Benutzer hinzu (ein leicht erkennbares Symbol, um anzuzeigen, dass der Benutzer anonym ist), diese Informationen sind jedoch bereits im Text verfügbar. ¹
• Entfernen Sie das "Symbol" aus dem Alt-Text für die Symbole. Zu wissen, dass dies ein Symbol wäre, wenn es dort wäre, hilft nicht, seinen tatsächlichen Zweck zu vermitteln.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Ein anonymer Benutzer schrieb:

Lorem ipsum dolor sed.

Bearbeiten / Löschen

Fußnoten

¹ Es besteht ein semantischer Unterschied zwischen dem Einschließen eines leeren alt-Attributs und dem Ausschluss davon. Ein leeres alt-Attribut gibt an, dass das Bild kein wesentlicher Bestandteil des Inhalts ist (wie es in diesem Fall der Fall ist - es handelt sich lediglich um ein additives Bild, das zum Verständnis des Rests nicht erforderlich ist) und kann daher beim Rendern weggelassen werden. Jedoch zeigt das Fehlen eines alt - Attributs , dass das Bild ein wichtiger Teil des Inhalts ist , und dass es einfach kein Text äquivalent zum Rendern.

Responsives Bild mit dem Attribut srcset

Srcset mit Größen verwenden

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes sind wie Medienabfragen. Sie beschreiben, wie viel Platz das Bild des Ansichtsfensters benötigt.

• Wenn der Darstellungsbereich größer als 1200px ist, ist das Bild genau 580px (z. B. ist unser Inhalt in einem Container zentriert, der maximal 1200px breit ist. Das Bild nimmt die Hälfte minus Ränder).
• Wenn der Darstellungsbereich zwischen 640px und 1200px liegt, nimmt das Bild 48% des Darstellungsbereichs ein (beispielsweise skaliert die Bildgröße auf unserer Seite und die Hälfte der Breite des Darstellungsbereichs minus Rändern).
• Wenn der Darstellungsbereich eine andere Größe hat, in unserem Fall weniger als 640 Pixel, nimmt das Bild 98% des Darstellungsbereichs ein (beispielsweise skaliert die Bildgröße bei unserer Seite und die gesamte Breite des Darstellungsbereichs minus Rändern). Der Medienzustand muss für den letzten Artikel weggelassen werden.

srcset sagt dem Browser nur, welche Bilder wir haben und welche Größe sie haben.

• img/hello-300.jpg ist 300px breit,
• img/hello-600.jpg ist 600px breit,
• img/hello-900.jpg ist 900px breit,
• img/hello-1200.jpg ist 1200px breit

src ist immer eine obligatorische Bildquelle. Bei Verwendung von srcset src ein Fallback-Bild, falls der Browser srcset nicht unterstützt.

Srcset ohne Größen verwenden

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset bietet eine Liste der verfügbaren Bilder mit dem Geräte-Pixel-Verhältnis x Deskriptor.

• Wenn das Geräte-Pixel-Verhältnis 1 ist, verwenden Sie img/hello-300.jpg
• Wenn das Geräte-Pixel-Verhältnis 2 ist, verwenden Sie img/hello-600.jpg
• Wenn das img/hello-1200.jpg 3 ist, verwenden Sie img/hello-1200.jpg

src ist immer eine obligatorische Bildquelle. Bei Verwendung von srcset src ein Fallback-Bild, falls der Browser srcset nicht unterstützt.

Responsives Bild mit Bildelement

Code

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Verwendungszweck

Um verschiedene Bilder mit unterschiedlicher Bildschirmbreite anzuzeigen, müssen Sie alle Bilder, die das Quell-Tag verwenden, in ein Bild-Tag einfügen, wie im obigen Beispiel gezeigt.

Ergebnis

• Auf Bildschirmen mit einer Bildschirmbreite von> 600px wird large_image.jpg angezeigt
• Auf Bildschirmen mit einer Bildschirmbreite von> 450px wird small_image.jpg angezeigt
• Auf Bildschirmen mit anderer Bildschirmbreite wird default_image.jpg angezeigt