Homepage   Bundesgymnasium und Bundesrealgymnasium Villach - Peraustrasse    Translation

Beiträge für die Homepage der Schule
Hinweise zur Anpassung von Bildern für HTML-Seiten
Zuletzt geändert am 31.12.2004

1) Bildbearbeitung:
Folgende einfache Vorbereitungen sind bei Bildern fast immer nötig:
Ausschnitt herausnehmen, verkleinern, komprimiert speichern. Einscannen (Papierbilder).
Dafür verwendet man ein Programm wie z.B.: Photo Editor, Paint Shop Pro, Photoshop.
2) Dateitypen:
Die Browser können nur Bilder in den Dateitypen GIF, JPG oder PNG anzeigen. Das GIF-Format eignet sich für flächige Grafiken mit wenigen Farbabstufungen, JPG für Photos, PNG ist universell verwendbar aber speicherintensiv.
3) Dateigröße:
Damit das Laden von (Seiten mit) Bildern nicht zu lange dauert, ist es nötig, die Dateigrößen von Bildern klein zu halten. Das erreicht man durch...
a) die Verkleinerung des Bildes. Die Breite wird im Bildbearbeitungsprogramm verringert, z.B. von 1280 pixels auf 600 oder 300 px. Ein Bild mit der halben Breite (und Höhe) hat nur mehr ein Viertel der Bildpunkte, womit es auch nur ein Viertel des Speicherplatzes braucht. (Bei einer Verkleinerung mittels HTML-Befehlen (width, height) bliebe die Dateigröße erhalten!)
b) das passende Speicherformat. Bei flächigen Grafiken (mit wenigen Farbabstufungen) wählt man den Dateityp GIF, bei vielfarbigen Grafiken wie Photos den Dateityp JPG, bei dem man vor dem Speichern den Grad der Kompression einstellen kann. Im Zweifelsfall muß man ausprobieren, welches Speicherformat besser geeignet ist.
c) die Kompression eines JPG-Bildes. Diese bedingt eine Vergröberung der Bildbezirke, die vor allem an scharfen Grenzlinien in Form von Schlieren sichtbar wird. Man muß daher probieren, welcher Kompressionsgrad (meist zwischen 20% und 60%) beim vorliegenden Bild einen akzeptablen Kompromiss zwischen guter Bildqualität und kleiner Dateigröße ergibt. Bei zu hohem Kompressionsgrad kann die Vergröberung sehr störend wirken.
4) Dateinamen:
Bei Webservern unter Unix wird (im Gegensatz zu Windows) zwischen Groß- und Kleinschreibung unterschieden. Am besten schreibt man daher alle Dateinamen klein; sie sollen außerdem keine Umlaute und Leerstellen enthalten.
5) Farben: Bei einfärbigen Flächen (GIF) soll die Farbwiedergabe überprüft werden.

Tipp 1: Wenn auf einer Seite viele Bilder untergebracht werden sollen, fertigt man jeweils zwei Größen an, wobei eine zur Vorschau und die andere für den Einzelaufruf nach Klick auf das Vorschaubild dient ( Beispiel).
Tipp 2: Photos von Digitalkameras sollen für die Verwendung am Monitor mit einer Auflösung von nur 1024 oder 1280 pixels aufgenommen werden, weil große Bilder durch die nachfolgend nötige Verkleinerung unschärfer werden.

  Online-Skripten zur Bildbearbeitung
SH, 2001-11-08