Der <img>-Tag in HTML: Bilder einfügen und optimieren

Der <img>-Tag in HTML wird verwendet, um Bilder auf einer Webseite darzustellen. Dieser Tag ist ein zentrales Element, um visuelle Inhalte einzubinden und die Attraktivität sowie den Informationsgehalt von Webseiten zu erhöhen. In diesem Artikel erklären wir die grundlegende Verwendung, Attribute und Techniken zur Optimierung des <img>-Tags.

Grundlegende Syntax des <img>-Tags

Der <img>-Tag ist ein selbstschließender Tag, der keine schließende Variante benötigt. Um ein Bild einzufügen, sind mindestens das src-Attribut (Quelle des Bildes) und das alt-Attribut (alternative Beschreibung) erforderlich.

Beispiel:

<img src="beispielbild.jpg" alt="Beschreibung des Bildes">

Attribute des <img>-Tags

  1. src (source): Gibt die Quelle des Bildes an. Dies kann eine relative oder absolute URL sein. <img src="bilder/logo.png" alt="Logo">
  2. alt (alternative): Beschreibt den Inhalt des Bildes für Screenreader und als Fallback, wenn das Bild nicht geladen werden kann. <img src="fehlerhaftes-bild.jpg" alt="Alternativtext, wenn das Bild fehlt">
  3. width und height: Legen die Abmessungen des Bildes in Pixeln oder Prozent fest. <img src="beispielbild.jpg" alt="Bildbeschreibung" width="300" height="200">
  4. title: Zeigt einen Tooltip, wenn der Mauszeiger über das Bild fährt. <img src="beispielbild.jpg" alt="Bildbeschreibung" title="Tooltip-Text">
  5. loading: Optimiert das Laden von Bildern. Der Wert lazy verzögert das Laden, bis das Bild im Sichtbereich erscheint. <img src="beispielbild.jpg" alt="Bildbeschreibung" loading="lazy">

Erweiterte Nutzung des <img>-Tags

Responsive Bilder mit srcset

Das srcset-Attribut ermöglicht es, verschiedene Bildgrößen bereitzustellen, um die Darstellung auf unterschiedlichen Geräten zu optimieren.

Beispiel:

<img
    src="kleines-bild.jpg"
    srcset="kleines-bild.jpg 480w, mittleres-bild.jpg 1024w, großes-bild.jpg 1600w"
    sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
    alt="Ein responsives Bild">

Bilder mit CSS stylen

Der <img>-Tag kann durch CSS individuell gestaltet werden, um ihn besser in das Design der Webseite einzubinden.

Beispiel:

<style>
    img {
        border: 5px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>

Optimierung von Bildern

  1. Bildformat: Nutzen Sie moderne Formate wie WebP oder AVIF, um die Ladezeit zu verbessern.
  2. Komprimierung: Reduzieren Sie die Dateigröße mit Tools wie TinyPNG oder ImageOptim.
  3. Lazy Loading: Aktivieren Sie das loading="lazy"-Attribut, um die Performance zu verbessern.
  4. Responsive Design: Setzen Sie srcset und sizes, um die richtige Bildgröße für jedes Gerät bereitzustellen.

Barrierefreiheit und SEO

  • Alt-Attribute nutzen: Suchmaschinen und Screenreader verwenden das alt-Attribut, um den Bildinhalt zu interpretieren.
  • Sinnvolle Dateinamen: Verwenden Sie beschreibende Dateinamen wie produktbild-schuh.jpg.

Fazit

Der <img>-Tag ist ein unverzichtbares Werkzeug in HTML, um Bilder auf einer Webseite einzubinden. Durch die Nutzung von Attributen wie srcset, loading und alt sowie durch CSS- und Performance-Optimierungen können Sie ansprechende, schnelle und barrierefreie Webseiten erstellen. Bilder sind ein mächtiges Medium – setzen Sie sie gezielt ein, um Ihre Inhalte zu bereichern.

Letzte Bearbeitung am Montag, 30. Dezember 2024 – 8:57 Uhr von Alex, Webmaster für Google und Bing SEO.

Konnten wir deine Fragen zu img Befehl – Das img-Tag in HTML wird verwendet, um Bilder in ein Webdokument einzubinden beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema img Befehl – Das img-Tag in HTML wird verwendet, um Bilder in ein Webdokument einzubinden.