Bilder in Webseiten, Animationen, Fotogalerien

DruckversionPDF version

Alle Browser können Bilder im .gif .png und .jpg/.jpeg Format anzeigen. Für andere Formate benötigen ältere Browser besondere Plug-Ins. Sie können sich nicht darauf verlassen, dass Anwender diese Plugins installiert haben.

Empfohlen vom W3C - World Wide Web Consortium - sind "Scalable Vector Graphics" .svg.  SVG Code lässt sich mit HTML 5  in allen neueren Browsern anzeigen. Vorteil: .svg Grafiken verlieren nicht an Qualität, wenn man ihre Größe ändert. Bei unterschiedlichen Bildschirmgrößen und Benutzern, die in ihrem Browser die Anzeige größer zoomen, spielt dies eine wichtige Rolle. Nachteil: Benutzer mit älteren Browsern sehen diese Bilder nicht und man muss für sie Alternativen anbieten.

Sie können .svg Grafiken erzeugen mit dem kostenlos verfügbaren Open Source Programm Inkscape, online oder als Download mit dem von Google zur Verfügung gestellten svg-edit, oder Sie können den Programm-Code direkt in die HTML schreiben, bzw. mit Javascript oder PHP erzeugen.

Für Fotografien eignet sich im allgemeinen das .jpg/.jpeg Format, für mit Grafikprogrammen selbst "gemalte" Bilder das .gif oder .png Format, das weniger Farbabstufungen darstellt. Bei .gif .png und .svg Formaten ist es möglich, Grafiken mit einem transparenten Hintergrund abzuspeichern.

Fotos können lange Ladezeiten verursachen, man sollte sie daher, soweit die Qualität es zulässt,  komprimieren und die Bilder auf die verwendete Größe zuschneiden (z.B. mit Irfanview, Photoscape, Gimp oder Photoshop, eine Auswahl kostenfrei verfügbarer Bildbearbeitungsprogramme finden Sie hier)

In Ihrem HTML Dokument zeigen Sie .jpg/jpeg Bilder, .png bzw. gif Grafiken mit der folgenden Angabe an:

<img src="bild.jpg" alt="mein Bild" width="100" height="100">

(bild.jpg befindet sich in obigem Beispiel in demselben Ordner wie das HTML Dokument) .

Die Breiten- und Höhen-Angabe erhalten Sie über das Bildbearbeitungsprogramm oder den Browser. Die Angabe alt="" signalisiert der Sprachausgabe von Browsern, worum es bei dem Bild geht. Lassen Sie die Angabe zwischen den beiden Anführungszeichen leer, weiß der Browser, dass es sich um ein rein gestalterisches Element handelt. Mit der Angabe title="" können Sie einen sogenannten "tooltip" erzeugen, der erscheint, wenn ein Benutzer mit dem Mauszeiger über das Bild fährt.

In grafischen Editoren wie z.b. NVU/KompoZer (professionell Dreamweaver) können Sie Bilder über das Menü einfügen mit "Einfügen" "Grafik". Der zugrunde liegende HTML Code wird automatisch erzeugt.

rhein-main-experten.de wird überprüft von der Initiative-S