# HTML-Tag img: So fügen Sie Bilder auf Ihrer Website ein

Das img-Tag erlaubt es Ihnen, ganz einfach **Bilder auf Ihrer Website einzubauen**. Dabei werden zahlreiche Formate unterstützt. Durch eine Vielzahl unterschiedlicher Attribute fügt sich das img-Tag in HTML noch besser ein.

## Wozu wird der img-Tag benötigt?

Das [HTML-Tag](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/ "HTML-Tags") img **fügt Bilder und Grafiken in Websites ein**. Dabei fungiert das img-Tag quasi als Platzhalter. Wird eine Website aufgerufen, verlinkt das hinterlegte src-Attribut auf den eigentlichen Speicherort der Grafik. Diese wird dann in die Website eingebettet. Neben dem src-Attribut benötigt das img-Tag ein alt-Attribut, das einen alternativen Text hinterlegt für den Fall, dass das Bild nicht angezeigt werden kann. Unterstützt werden mit dem img-Tag bei HTML u. a. JPEG, GIF und PNG.

## Wie sieht die Syntax des HTML-Tags img aus?

Die Syntax eines img-Tags ist sehr übersichtlich und benötigt nur wenige Komponenten. Die einfachste Variante ist diese:

```none
<img src="rotesauto.png" alt="Roter Sportwagen an einer Ampel">
```

Es ist allerdings sicherer, wenn Sie bei der Verwendung eines img-Tags immer auch zumindest die **Höhe und Breite** des Bildes auf der Website definieren. So können Sie sicherstellen, dass die Grafik richtig angezeigt wird. Diese Einstellungen nehmen Sie über die [HTML-Attribute](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-attribute/ "HTML Attribute") *width* und *height* vor. Der passende Code sieht beispielsweise so aus:

```none
<img src="rotesauto.png" width="500" height="200" alt="Roter Kleinwagen an einer Ampel">
```

Auch das **Attribut *loading*** ist für das img-Tag in HTML empfehlenswert. Dadurch wird die entsprechende Grafik erst geladen, wenn Nutzerinnen oder Nutzer bis zu der entsprechenden Stelle scrollen. Dafür stellen Sie den Wert des loading-Attributs auf *lazy*. So sieht das im Code aus:

```none
<img src="rotesauto.png" width="500" height="200" alt="Roter Kleinwagen an einer Ampel" loading="lazy">
```

## Welche Attribute können für den img-Tag in HTML verwendet werden?

Neben den genannten Attributen *width*, *height* und *loading* gibt es zahlreiche weitere Attribute, die durch das img-Tag in HTML unterstützt werden. Dazu gehören **sämtliche globalen, Event- und weitere spezifische Attribute**. Hier ein Auszug der Attribute, die mit dem img-Tag verwendet werden können:

<table>
  <tbody>
    <tr>
      <td><strong>Attribut</strong></td>
      <td><strong>Wert</strong></td>
      <td><strong>Beschreibung</strong></td>
    </tr>
    <tr>
      <td>alt</td>
      <td>"Text"</td>
      <td>Obligatorisch; gibt einen Alternativtext für das Bild an.</td>
    </tr>
    <tr>
      <td>crossorigin</td>
      <td>anonymus, use-credentials</td>
      <td>Legt fest, welche fremden Websites durch ein Skript auf das entsprechende Bild zugreifen können.</td>
    </tr>
    <tr>
      <td>decoding</td>
      <td>auto, sync, async</td>
      <td>Definiert, wie und ob ein Bild decodiert werden darf.</td>
    </tr>
    <tr>
      <td>height</td>
      <td>Pixel oder Prozent</td>
      <td>Legt fest, wie hoch das Bild auf der Website sein soll.</td>
    </tr>
    <tr>
      <td>ismap</td>
      <td>true, false</td>
      <td>Regelt den Zugriff des Bildes auf eine serverseitige Image-Map.</td>
    </tr>
    <tr>
      <td>loading</td>
      <td>auto, eager, lazy</td>
      <td>Bestimmt, wann ein Bild geladen werden soll.</td>
    </tr>
    <tr>
      <td>referrerpolicy</td>
      <td>no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url</td>
      <td>Legt fest, ob das Bild auch aus einer unsicheren Quelle stammen darf.</td>
    </tr>
    <tr>
      <td>sizes</td>
      <td>sizes</td>
      <td>Definiert Bildgrößen für unterschiedliche Seitenlayouts.</td>
    </tr>
    <tr>
      <td>src</td>
      <td>URL</td>
      <td>Obligatorisch; gibt die URI-Adresse des Bildes an.</td>
    </tr>
    <tr>
      <td>srcset</td>
      <td>URL-Listen</td>
      <td>Hinterlegt eine Liste von Bildern für verschiedene Einsatzzwecke, z. B. unterschiedliche Geräte und Größen.</td>
    </tr>
    <tr>
      <td>usemap</td>
      <td>\#mapname</td>
      <td>Verknüpft das Element mit einer bestimmten Image-Map.</td>
    </tr>
    <tr>
      <td>width</td>
      <td>Pixel oder Prozent</td>
      <td>Gibt die Breite des Bildes an.</td>
    </tr>
  </tbody>
</table>

Während die oben genannten Attribute alle nach wie vor Verwendung in einem img-Tag finden können, gibt es auch einige Attribute, die seit [HTML5](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-html5/ "Was ist HTML5?") und HTML 5.1 als veraltet gelten. Dazu gehören *align*, *border*, *hspace*, *longdesk* und *vspace*.

Tipp Auf dem Weg zur individuellen und professionellen Website ist der [**Homepage-Baukasten**](https://www.ionos.de/websites/homepage-erstellen "Homepage-Baukasten von IONOS") von IONOS genau das richtige Werkzeug. Dieser erlaubt es Ihnen, eine eigene Onlinepräsenz ganz nach Ihren Vorstellungen zu erstellen – auch ohne großes Vorwissen. Möchten Sie diese Aufgabe doch lieber den Profis überlassen, stehen Ihnen unsere erfahrenen Expertinnen und Experten sehr gerne zur Verfügung.


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-img/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-img/) for AI/LLM consumption.