Bilder in HTML-Seiten
Die wichtigsten Bestandteile in HTML-Seiten sind Text und Links. Außerdem können "Multimedia"-Daten eingefügt werden, unter anderem Bilder über das img-Tag. Ein großer Vorteil, Bilder so einzubinden, ist: Jeder, der im Web unterwegs ist, kann sie anschauen, auch mit alten Webbrowsern. Auch in näherer Zukunft wird das so bleiben. Außerdem weiß der Betrachter, wie er von Bild zu Bild gelangt, er kann auf gewohnte Weise navigieren.
Meistens besteht eine Web-Galerie aus Übersichts- und Einzelbildseiten.
Übersichtsseiten
Übersichtsseiten enthalten Links auf mehrere Einzelbildseiten. Klicke ich auf einen Link, erscheint eine Einzelbildseite. In Webgalerien sind alle Links kleine Vorschaubilder (Thumbnails) von den großen Bildern auf den Einzelbildseiten. Anhand der Vorschaubilder entscheide ich, ob ich ein Bild anzuschauen will oder finde schnell eines, das ich kenne.
Wie klein die Vorschaubilder sein sollten, hängt davon ab, wieviele Details auf den Bildern sind. Bei zahlreichen Einzelheiten sollten die Vorschaubilder größer sein.
Meist ist die lange Seite aller Vorschaubilder gleich ohne Berücksichtigung des Bildinhalts. Wie finde ich die richtige "Standardgröße"? Sind die Vorschaubilder zu groß, dauert es länger, bis die HTML-Seite geladen ist und ich kann weniger überblicken, "blättere" mehr (scrollen). Zu kleine Vorschaubilder nützen nichts. Die lange Seite meiner ersten Vorschaubilder hatten 100 Pixel, aktuell sind es 150 Pixel.
Einige Fotografen zeigen in Vorschaubildern nur einen Ausschnitt vom größeren Bild. Mir gefällt das weniger, da ich so nicht die Komposition erkennen kann.
Einzelbildseiten
Die Einzelbildseiten zeigen das Bild möglichst groß. Über die "richtige" Bildgröße wird im übernächsten Artikel geschrieben. Um das Bild herum kann ein "Zierrand" sein, ähnlich einem Passepartout. Diesen realisiere ich mit CSS, durch ein Format für das img-Tag (padding, border, color, background-color).
Ich statte Einzelbildseiten möglichst "spartanisch" aus, viele Elemente lenken ab vom Bild. Für unwichtig halte ich die Anzeige der EXIF-Daten des Ursprungsfotos. Wer meint, diese seien nützlich, kann sie in das Bild einbetten. Es gibt Plugins für Webbrowser, die auf Wunsch EXIF-Daten anzeigen.
Eine Einzelbildseite kann mehrere (größere) Einzelbilder enthalten, die in ihrer Zusammenstellung gut wirken oder etwas "erzählen".
Navigation
In den HTML-Dateien wird über die Links navigiert. Ich benutze folgende Links:
- Auf der Übersichtsseite verlinkt jedes Vorschaubild auf eine HTML-Seite mit großem Einzelbild
- Jede Einzelbildseite hat einen Link auf ihre Übersichtsseite
- Von einer Einzelbildseite führt ein Link auf eine "nächste" Einzelbildseite und ein weiterer zurück zur vorherigen Einzelbildseite
Abbildung: Bilder in HTML-Seiten. Die Übersichtsseite hat kleine Vorschaubilder, die Links auf HTML-Einzelbildseiten mit großem Bild sind. Von jeder Einzelbildseite führt ein Link zur nächsten Einzelbildseite und zur vorherigen sowie einer zur Übersichtsseite.
Mit CSS platziere ich die Links so, dass die Maus auf einer Stelle ruhen kann. Es reicht ein Klick und die nächste Einzelbildseite erscheint. Die Maus brauche ich nicht auf den Link zum nächsten (vorherigen) Bild verschieben, da dieser an der selben Stelle bleibt.
Dateiformat
Das Dateiformat für Bilder im Web sollte weit verbreitet sein und bei kleiner Größe möglichst gute Bildqualität ermöglichen. Ich speichere Webbilder im JPEG-Format. Ein Bildpunkt kann so bis zu 16 Millionen Farben haben und praktisch alle Webbrowser können JPEG-Bilder anzeigen. GIF ist ungeeignet, es kann nur 256 Farben darstellen. Interessant könnte noch PNG sein. Die Bilder wandle ich in den RGB-Farbraum um, die meisten Webbrowser interpretieren nicht die eingebetteten ICC-Profile.
, 24.01.2007.
Letzte Bearbeitung: 21.12.2008.