Bilder, Fotos U. Grafiken In Websites Einbauen - Wie Es Geht

Fotos, Bilder und Grafiken in HTML-Seiten einbauen - wie, was, wo, wie groß

Es gibt 3 Grafikformate, die in Betracht kommen. Diese 3 Formate werden von allen Browsern unterstützt. JPG, PNG und GIF sind die Grafikformate, die heute im Internet verwendet werden.

Wenn Sie im Browser ein Bild sehen, können Sie beim Internet Explorer mit der rechten Maustaste auf das Bild klicken. Sie erhalten dann ein Menü - der letzte Punkt „Eigenschaften“ zeigt den Namen, die Dateigröße und die Abmessung des Bildes.

Jedes Bild kann mit der rechten Maustaste auch auf die eigene Festplatte gespeichert werden (beachten Sie unbedingt das Copyright!). In dem Menü, das Sie durch die rechte Maustaste erhalten, gibt es den Punkt „speichern unter...“. Jetzt können Sie das Bild auf Ihrer Festplatte speichern. Machen Sie dies mit dem folgenden Bild „jetzt HTML lernen“ und speichern Sie das Bild in den Dateiordner, in dem Sie bisher Ihre HTML-Dateien (index.htm, ueber-mich.htm) gespeichert haben! Es ist extrem wichtig, dass sich das Bild im Ordner der HTML-Datei befindet. Ansonsten findet der Browser später das Bild nicht und kann es dann auch nicht anzeigen!

Teilweise ändert der IE die Endung - anstatt .jpg steht dann .jpeg - dann entweder wieder umbenennen oder als html-seminar.jpeg einbinden.

Dieses Bild integrieren wir als Beispiel auf die Startseite (index.htm). Die Grundstruktur des HTML-Befehls dafür lautet: <img src="html-seminar.jpg">

(img = engl. image = Bild) (src= engl. source = Quelle)

Im Browser kommt es dann wie folgt raus:

Dabei gibt es für Bilder weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind.

Attribut	Bedeutung
width="X"	Die Breite X des Bildes - sollte angegeben werden, damit der Browser den Platzhalter in entsprechender Größe vorsehen kann, solange das Bild noch nicht komplett übertragen ist!
height="Y"	Die Höhe des Bildes - sollte angegeben werden, damit der Browser den Platzhalter in entsprechender Größe vorsehen kann, solange das Bild noch nicht komplett übertragen ist!
alt="ERKLÄRUNG ZUM BILD"	Der ALTernativtext - dieser ist aus verschiedenen Gründen sehr wichtig: für Sehbehinderte (die ihn von speziellen Browsern vorgelesen bekommen) für Suchmaschinen, da diese auch diesen Text indizieren zur Information für Besucher, wenn Bilder ausgeschaltet sind
title="Tooltip für Mausberührung"	Dieser Text erscheint als Tooltip (auch Mouse-Over genannt), wenn man mit der Maus über dem Bild den Mauszeiger bewegt, und dann die Maus darauf ruhen lässt.

Der komplette Code sieht also wie folgt aus:

<img src="html-seminar.jpg" width="474" height="66" alt="Logo für HTML-Seminar" title="jetzt HTML lernen">

Mehr Ordnung durch Verzeichnisse

Und wenn Sie mehr Ordnung im Verzeichnis haben möchten, legen Sie ein Unterverzeichnis für Ihre Bilder z.B. mit dem Ordnernamen „bilder“ an und schreiben dann:

<img src="bilder/html-seminar.jpg" width="474" height="66" alt="Logo für HTML-Seminar">

Welches Format soll ich verwenden?

Die Unterschiede der Formate sind in folgender Tabelle dargestellt. Wenn Sie sich nicht entscheiden können, dann speichern Sie das gewünschte Bild über ein Bildbearbeitungsprogramm sowohl in GIF als auch als JPG ab und schauen sich die Dateigröße an.

Unterschiede der Formate:	GIF	JPG	PNG
Anzahl der Farben:	256	16,7 Mio.	16,7 Mio.
Möglichkeiten zur Animation:	Ja	Nein	Nein
Möglichkeiten zur Kompression:	automatisch	Kompressions-Grad einstellbar	Kompressions-Grad einstellbar
Eignung:	kleine Grafiken, Logos, animierte Grafiken	Bilder mit vielen Farben (Fotos)	Bilder mit vielen Farben (Fotos)
Besonderheit:	Anzeige erfolgt stufenweise, dadurch kann der Surfer früher erahnen, was für ein Bild kommt.	bietet transparente Bereiche

Übertragungszeiten abhängig von der Leitungsgeschwindigkeit am Beispiel einer Grafik mit 100 Kilobyte (kB) finden Sie im nächsten Abschnitt bei Übertragungsdauer allgemein.

Besonders bei Grafiken ist auf die Dateigröße zu achten. Werden die Dateien zu groß, was je nach Geschmack schon bei 100 kB beginnt, entwickelt sich das WWW für langsame Zugänge (z. B. Modem) vom „World Wide Web“ zum „World Wide Wait“. Daher sollte unbedingt auf die Dateigröße geachtet werden. Getreu dem Motto: weniger ist mehr. Das entwickelt sich oft zur Gratwanderung zwischen Bildqualität und Übertragungsgeschwindigkeit.

Um den Anforderungen des WWW gerecht zu werden, sollte die Datengröße eines Bildes also möglichst gering sein. Zu bedenken gilt auch, dass Zeit Geld ist und hier im speziellen Kosten (z.B. beim Handy, wenn keine Flatrate da ist) verursacht, die es so weit als möglich zu vermeiden gilt. Nicht jeder hat einen schnellen Internetzugang!

Dateiformat GIF

Das Dateiformat GIF (Graphics Interchange Format, Grafik-Austauschformat) war das erste Format im Internet und wurde von der Firma CompuServe entwickelt. Es setzte sich durch, da es, zusätzlich zu seinen Vorteilen und Möglichkeiten, erstmals lizenzfrei zu bekommen war. Die GIF-Datei hat eine Palette von 256 Farben und wird zusätzlich komprimiert. Das Format GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt „interlaced“), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen abspeichern, die dann selbstständig ablaufen (s. Bsp. Verkehrsschild). Mit GIFs kann zudem eine Farbe transparent dargestellt werden, was den Vorteil hat, dass man sie im Browser nicht sieht und man somit mit den Hintergründen spielen kann, ohne die Position der Grafik berücksichtigen zu müssen. So können Grafiken im Vordergrund harmonisch integriert werden, ohne dass der Hintergrund störend zum Tragen kommt. Als Beispiel kann als Hintergrund eine Gesteinsstruktur gewählt werden und als Vordergrundgrafik das Firmenlogo, das sich durch die transparente Farbe nahtlos einfügt. Durch einen Stern (ich möchte hier keinen Stuttgarter Automobilhersteller nennen) kann dann durch die inneren Kreissegmente hindurch der Hintergrund zur Geltung kommen.

Dateiformat JPG

Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind bis zu 16,7 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die Darstellung von Fotos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei auf ein Minimum reduziert werden.

Dateiformat PNG

PNG (portable Network Graphics, engl. portierbare Netzwerkgrafiken) ist ein Rasterformat. Die Nachteile von GIF und JPG sind in diesem Format nicht vorhanden, aber viele Vorteile. Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei (was man bei JPG nicht sagen kann) und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für diese Transparenzen werden Alphakanäle genutzt. Grafiken können so z.B. auf jeden farbigen Hintergrund eingesetzt werden.

Ein kleiner Nachteil ist, dass sehr alte Browserversionen ein paar Probleme mit dem PNG-Format haben. Es werden z.B. die transparenten Bereiche dann nicht transparent dargestellt. Gilt aber primär für sehr alte Browser!

Animation von Bildern

Die Animation von GIF-Grafiken erfolgt durch Einzelbilder wie bei folgendem Verkehrszeichen, das von der Bürgerinitiative für animierte Verkehrszeichen Bifaz uns zur Verfügung gestellt wurde.

Nun die Einzelbilder:

Solche Animationen sind natürlich aufwendiger, da nicht nur 1 Bild benötigt wird, sondern zahlreiche und wenn man nicht aufpasst, die Dateigröße der Grafik dann heftig groß wird.

Zum Erstellen solcher Animationen gibt es zahlreiche Programme. Näheres dazu im Kapitel über Software

Übertragungsdauer allgemein

Für einen Eindruck der Übertragungszeiten einer Datei (egal ob Homepage, Bild oder beides zusammen) gebe ich circa-Werte an. Diese können zusätzlich noch von der Auslastung des Netzes negativ beeinflusst werden.

Bei einer Dateigröße von 108 kB betragen die Übertragungszeiten je nach Übertragungsart, also was für eine Modemgeschwindigkeit, ISDN oder DSL verwendet wird:

Übertragungsgeschwindigkeit	Übertragungsdauer
14.4k	62.39 Sekunden
28.8k	32.20 Sekunden
56k	17.36 Sekunden
ISDN (128k)	8.79 Sekunden
T1 (1.44 MB)	2.60 Sekunden

Als Faustgröße für gute Internetseiten gilt: nicht mehr als 60 kB für Text, Hintergrundbild, Logos und sonstige Bilder zu überschreiten! Ansonsten werden die Übertragungszeiten zu lang und ungeduldige Surfer sind schon weitergesurft (und zwar auf eine andere Seite - die treulosen Tomaten).

Copyright von Bildern

I. d. R. unterliegen Bilder und Grafiken (auch Bereiche davon) einem Copyright - also jemand hat die Rechte an dem Werk. Daher sollten Sie, um rechtliche Probleme zu vermeiden, entweder nur eigene Werke verwenden oder den Copyright-Besitzer fragen, ob er einer Verwendung auf Ihrer Homepage zustimmt. Am Beispiel des oben verwendeten Verkehrszeichens war das eine freundliche E-Mail, die ebenso schnell wie freundlich zurückkam mitsamt der Zusage.

Tipp: Links mit Grafiken - Bild verlinken

Auch wenn ich kein Freund von Links mit Grafiken bin, da diese - außer verspielt zu sein - keinen Mehrwert bringen und noch den Nachteil der erhöhten Übertragungsdauer haben, möchte ich Ihnen diese Möglichkeit nicht vorenthalten.

Mit dem bisherigen Wissen können Sie das. Kombinieren Sie nur einen Link und eine Grafik

HTML-TAG: Link

<a href="DATEINAMEN.HTM"> BESCHREIBUNG </a>

HTML-TAG: Grafik

<img src="bilder/html-seminar.jpg" width="474" height="66" alt="jetzt HTML lernen">

Und als Kombination sieht das Ganze dann wie folgt aus:

<a href="https://www.html-seminar.de/"> <img src="bilder/html-seminar.jpg" width="474" height="66" alt="html-seminar.de - jetzt HTML lernen"> </a>

Das Bild wird also umschlossen von dem Link, und somit kommt der Surfer nach Anklicken des Bildes auf die Seite, die in dem Link angegeben wurde.

Noch geschickter ist die Variante, wenn Sie die Grafik nicht auf Ihrem Webserver oder Festplatte haben wollen, diese direkt von der fremden Seite anzugeben (sollte von der fremden Seite abgesegnet sein).

<a href="https://www.html-seminar.de/"> <img src="https://www.html-seminar.de/bilder/html-seminar.jpg" width="474" height="66" alt="html-seminar.de - jetzt HTML lernen"> </a>

PS: Über diese Art, einen kleinen Vermerk auf www.html-seminar.de einzubinden, freue ich mich prinzipiell. Also nur zu! Das ist auch eine gute Übung.

Weiterempfehlen • Social Bookmarks • Vielen Dank

• tweet
• Facebook teilen
• pin it
• mitteilen
• teilen
• teilen
• teilen

Trennlinie <hr> Bildmaterial Bitte unterstützen

X

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

• Bücher zu HTML
• Bücher zu CSS
• Webdesign

Vielen Dank für Ihre Hilfe

• • 
  • E-Books kaufen