HTML Grundlagen: IMG • Fotos und Bilder einfügen

Bilder in die Webseite mit dem IMG Tag einfügen

Bilder kannst du mit dem <img …>-Tag in deine HTML-Seite einfügen.

<img src="URL" width="Breite" height="Höhe" alt="Bild-Beschreibung">

Bilder werden technisch nicht in eine Webseite eingefügt, sondern werden mit der Webseite verlinkt. Das HTML IMG-Tag (für Englisch: Image) erzeugt einen Speicherplatz für das referenzierte Bild.

Das <img ...>-Tag hat kein abschließendes End-Tag. Warum ist das so?

Das IMG-Tag ist genau wie das BR-Tag ein sogenanntes Standalone-Tag, d.h. ein HTML-Element ohne Inhalt. Deshalb ist für dieses HTML-Tag kein End-Tag notwendig.

Das HTML IMG-Element unterstützt unter anderem folgende Attribute:

src gibt die URL des Bildes mit relativen oder absoluten Pfad an. Dieses Attribut ist notwendig.
Das alt-Attribut ist eine alternative Beschreibung für das Bild, die angezeigt wird, wenn das Bild noch nicht geladen wurde, nicht geladen kann oder wenn der Browser das Bild nicht darstellen kann (z.B. Screenreader). Der alt-Text sollte die Aussage des Bildes beschreiben.

Obwohl das IMG-Tag auch ohne alt-Attribut funktioniert, sollte man es immer angeben. Wenn für ein Bild keine sinnvolle Beschreibung angeben kann, empfiehlt es sich, ein leeres alt-Attribut (alt="") zu verwenden.
Mit border wird die Rahmenstärke des Bildes in Pixel angegeben. D.h. es wird festgelegt, wie dick der Rahmen ist.
Mit width wird die Breite des Bildes in Pixel oder Prozent festgelegt
Mit height wird die Höhe des Bildes in Pixel oder Prozent definiert.

Die Werte für border, width und height werden ohne Einheit angegeben.

Die Breite und Höhe des Bildes sollte man immer angeben werden. Dadurch reserviert der Browser beim Laden der Seite den erforderlichen Platz für das Bild. Wenn diese Werte nicht angegeben werden, springen die Inhalte der Seite nach dem Laden des Bildes noch einmal. Das ist unangenehm für den Leser der Seite.

Ein Bild mit einem Link verknüpfen

HTML Tags können verschachtelt werden. Ein anklickbares Bild erhält man durch Kombination des A-Tags.mit dem IMG-Tag.

Beispiel

Allgemeiner Aufbau eines HTML-Tags für ein Bild mit Link.

<a href="Linkziel"><img src="Bild-URL" width="Breite" height="Höhe" alt="Beschreibung des Bildes">

Was sind die besten Bildformate für deine HTML-Seiten?

Bilder, Grafiken und Fotos sind elementare Bestandteile, die auf keiner Internetseite fehlen dürfen. Für die Suchmaschinenoptimierung ist die Ladezeit der Seite von großer Bedeutung. Deshalb ist die Wahl des richtigen Grafikformats und eine geeignete Komprimierung der Bilder besonders wichtig. Ist die Dateigröße der Bilder (in KB) zu groß, wirkt sich dies negativ auf die Ladezeit aus. Eine zu lange Ladezeit wirkt sich auch negativ auf das Ranking in Suchmaschinen aus.

Grundsätzlich sollte jede Webseite in maximal 2 Sekunden geladen werden, um ein akzeptables Nutzererlebnis zu erreichen. Eine Ladezeit von weniger als eine Sekunde ist ausgezeichnet. Grundsätzlich gilt, je kürzer die Ladezeit ist, desto besser.

Was sind die besten Bildformate für Web-Seiten?

.gif
GIF (Graphics Interchange Format) wurde früher häufig für Logos und Animationen verwendet. Aufgrund der Patente von Unisys und IBM für den LZW-Algorithmus, der in GIF-Dateien benutzt wird, wird GIF heute praktisch nicht mehr verwendet.

Auch wenn heute keine besondere Patentbedrohung mehr für GIF besteht (die Patente, die zum Angriff auf GIF benutzt wurden, sind erloschen), sollten stattdessen besser die Bild-Formate PNG, APNG und WebP verwendet werden.

GIF hat nur eine Farbtiefe von 8 Bit und ist damit auf max. 256 Farben beschränkt.

.png
Das Bild-Format PNG (Portable Network Graphics) hat das früher häufig benutzte GIF Format nahezu vollständig ersetzt. PNG unterstützt eine Farbtiefe von 24 Bit und damit mehr als 16 Millionen Farben.

PNG unterstützt nicht nur vollständige Transparenz wie GIF, sondern auch partielle Transparenz. GIF ist nicht das einzige Bild-Format, um animierte Bilder zu erzeugen. Mit dem Format APNG (Animated Portable Network Graphics) existiert für Animationen ein freies Bild-Format, das ähnliche Optionen für Animierungen hat wie GIF. APNG hat sogar eine deutlich bessere Qualität der erzeugten Bild-Sequenz.

Eine bessere Qualität der Animation bedeutet aber auch eine größere Datei. APNG hat eine bis zu 25% bessere Kompression als eine vergleichbare GIF-Datei. Dadurch lässt sich die bessere Qualität von APNG auf jeden Fall nutzen.

.apng
APNG ist keine offizielle Erweiterung von PNG, aber APNG ist abwärtskompatibel zu PNG. Der APNG Assembler von Mozilla ist eine leistungsstarke Alernative zu GIF. Die MIT and zlib-lizensierte Software kann man kostenlos von der offiziellen Projektseite herunterladen. Download von sourceforge.net: APNG Assembler

Damit kann man auf jeder Plattform eigene PNG Animationen kostenlos erstellen. Um eigene APNGs zu erstellen, benötigt man natürlich passende Bilder im PNG-Format. Alle wichtigen Browser wie Firefox, Google Chrome, Microsoft Edge, Safari, Opera einschließlich der mobilen Versionen unterstützen das APNG Format.

.jpg / .jpeg
JPG bzw. richtiger JPEG (Joint Photographic Experts Group) ist wahrscheinlich das bekannteste Bild-Format. Nahezu alle gängigen Programme zur Bild-Bearbeitung/Verarbeitung können JPG-Dateien öffnen, anzeigen und konvertieren.

Das JPEG-Format ist frei von Rechten Dritter (z.B. Patentrechte). Die verwendeten Kompressionsverfahren sind für jedermann frei verfügbar.

Aufgrund seines großen Farbspektrums von bis zu 16 Millionen Farben, eignet sich JPG vor allem für Fotos und komplexe Bild-Dateien mit unterschiedlicher Farbtiefe. Der größte Vorteil von JPG ist die variable Kompressionsrate. JPG-Dateien lassen sich um ein Vielfaches verkleinern. Allerdings ist dies immer mit einem Qualitätsverlust verbunden.

Kleinere Dateien haben den Vorteil, weniger Speicherplatz zu verbrauchen und die Ladegeschwindigkeit der Webseite nicht zu stark zu beeinträchtigen.

Um den störenden Effekt des Verpixelns zu vermeiden, sollte immer ein Kompromiss aus Qualität und Dateigröße gewählt werden.

.webp
WebP ist ein Bildformat für statische und animierte Bilder, das 2010 von Google entwickelt wurde. Im Gegensatz zu den etablierten Bildformaten JPG und PNG kann man mit dem WebP-Grafikformat Bilder mit einer kleineren Dateigröße erzeugen. Das wirkt sich positiv auf die Ladegeschwindigkeit der Webseite aus.

Das kostenlose Open-Source-Dateiformat WebP erlaubt sowohl verlustbehaftete als auch verlustfreie Komprimierung. Mit WebP können Bilder in hoher Qualität bei gleichzeitig kleiner Dateigröße gespeichert werden.

Da WebP lizenzfrei ist, wurde dieses Bildformat bereits in viele Anwendungsprogramme integriert. Bilder im WebP-Format werden von allen wichtigen Web-Browsern inklusive der mobilen Versionen angezeigt. Bilder im WebP-Format kann man z.B. mit einem Photo-Editor wie z.B. PhotoShop oder GIMP bearbeiten.