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 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 schließendes Tag notwendig.

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

src ist die URL des Bildes. Dieses Attribut ist zwingend.
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 keine Grafik darstellen kann (z.B. Screenreader). Der alt-Text soll nicht einfach das Bild beschreiben, sondern soll die Aussage des Bildes beschreiben.

Obwohl das IMG-Tag auch ohne alt-Attribut funktioniert, sollte dieses Attribut stets angegeben werden. Wenn keine sinnvolle Beschreibung angegeben werden kann, sollte man ein leeres alt-Attribut (alt="") angeben.
border ist die Rahmenstärke des Bildes in Pixel. 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 immer angegeben 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 um. Das ist unangenehm für den Leser der Seite.

Ein Bild mit einem Link verknüpfen

HTML Tags können verschachtelt werden. Du erhältst ein anklickbares Bild 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 Komponenten, die auf keiner Internetseite fehlen dürfen. Da für die Suchmaschinenoptimierung die Ladezeit der Seite von großer Bedeutung ist, ist die Wahl des richtigen Grafikformats und eine geeignete Kompression der Bilder besonders wichtig. Wenn die Dateigröße der Bilder in KB zu groß ist, wirkt sich das negativ auf die Ladezeit aus. Eine zu lange Ladezeit wirkt sich auch negativ auf das Ranking in Suchmaschinen aus.

Grundsätzlich sollte eine Webseite in maximal 2 Sekunden geladen sein, um ein akzeptables Nutzererlebnis zu erreichen. Eine Ladezeit von weniger als eine Sekunde ist sehr gut. 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 lieber die Bild-Formate PNG bzw. APNG benutzt 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 (abgestufte) 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 ein besseres Kompressionsverfahren als GIF. 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 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 und 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.