Web-Layout der Universität

Grafiken für die Verwendung in Webseiten vorbereiten

Woher kommt die zu verwendende Grafik?

Grafiken können z.B.

  • eingescannt werden
  • von einer Digitalkamera übertragen werden
  • aus dem Internet "geklaut" werden (Vorsicht bei Copyright-geschütztem Material!)
  • per Malprogramm selbst hergestellt werden
  • vom Bildschirm kopiert werden

Verarbeiten gescannter Bilder

Bilder sollten für eine möglichst gute Qualität zunächst hochauflösend eingescannt werden (als Speicherformat bietet sich TIF an), z.B. mit einer Punktdichte von 300dpi. So sind viele Details erfasst. Beim späteren Herunterrechnen der Bildgröße auf das tatsächlich gewünschte Maß bringt diese Methode die oft gewünschten weichen Ränder, so daß also nicht mehr jeder Pixel zu sehen ist.

Verarbeiten von Bildern aus einer Digitalkamera

Fotos aus einer Digitalkamera haben üblicherweise sehr viel größere Abmessungen, als sie auf der Webseite benötigt werden, und erfordern deshalb ein Herunterrechnen der Bildgröße. Etwaige Farb- oder Helligkeitskorrekturen könnten sich ebenfalls empfehlen.

Wie muß man eine Grafik aufbereiten, damit sie tauglich für das Internet ist?

Software:
1. Möglichkeit: Man kann seine Bilddatei z.B. mit dem kostenlos nutzbaren Online-Bildeditor Picnik bearbeiten.

2. Möglichkeit: Für Windows-Computer empfiehlt sich das kostenlose Programm IrfanView.

  • IrfanView (Offizielle Website)
  • IrfanView-Archiv (zum Installieren einfach die Exe-Datei starten, benötigt keine Admin-Rechte auf dem Rechner)

Zuschneiden / Freistellen

Als erstes sollten die nicht benötigten Randbereiche eines Bildes abgeschnitten werden. Mit dem Auswahlerkzeug kann ein Rahmen um den benötigten Bereich aufgezogen werden, anschließend wird der Befehl Zuschneiden... (bei Photoshop: Freistellen) gewählt, um alles übrige wegzuschneiden.

Farben und  Konturen optimieren

Bei Fotos kann es erforderlich sein, eine Farbkorrektur des Bildes durchzuführen. Dies kann Helligkeit und Kontrast, aber auch Gamma-Kurve (empfundene Helligkeit des mittleren Helligkeitsbereichs des Bildes) sowie Farbtemperatur ("kalte" bzw. "warme" Wirkung der Farben) betreffen. Gleichzeitig kann ein Bild durch Kantenschärfung "knackiger" gemacht werden.

Größe anpassen

Die Größe der Grafiken für die Bildschirmdarstellung wird normalerweise in Pixel angegeben (Breite x Höhe). Da das Uni-Webseitenlayout eine Inhaltsbreite von 710Pixeln zugrunde legt, würde also z.B. eine Grafik von 200Pixel Breite ein knappes Drittel der Inhaltsbreite ausmachen.

    Beispiel: Eine auf dem Scanner mit 300dpi eingescannte Grafik soll eingebunden werden. Sie erscheint zunächst in vierfacher Größe auf dem Bildschirm, da der Computermonitor die Bildpunkte nur mit einer Dichte von etwa 75dpi (Faktor 1:4) anzeigt.
    Es ergeben sich jetzt zwei Möglichkeiten zur Umrechnung:
    - Größenänderung auf 25% (relative Größenänderung) ergibt originalgetreue Größe
    - Größenänderung z.B. auf 300Pixel Breite (ablolute Größe) ergibt eine gewünschte Größe, die mit Blick auf die 800Pixel-Fensterbreite zu bestimmen ist.

Farbtiefe anpassen (?)

Evtl. muß die Anzahl der verwendeten Farben geändert werden. Wenn das Format GIF gewählt wird, darf die Grafik nur 256 verschiedene Farben enthalten.

Transparenz gewünscht?

Eine Grafik kann in Teilen "durchsichtig" sein, d.h. der Hintergrund zu einem dargestellten Objekt wird nicht-deckend dargestellt und lässt folglich die Hintergrundfarbe der Webseite durchscheinen.

Bei GIF-Grafiken (s.u. Formate) kann die transparent darzustellende Farbe gewählt werden. PhotoEditor speichert die Grafik dann automatisch passend ab. Intern geschieht dies über die Unterscheidung der Varianten GIF87a und GIF89a - letztere ist diejenige Variante, in der die Transparentdarstellung aktiviert ist.

Beim GIF-Nachfolger PNG kann sogar der Grad der Transparenz für jeden Bildpunkt angegeben sein (auf die gesamte Grafik bezogen ist dies der so genannte Alpha-Kanal).

Welche Grafikformate dürfen für Bilder verwendet werden?

Für Grafik-Dateien gibt es im Internet derzeit zwei etablierte Standards:

  • GIF
  • JPEG
  • (PNG als drittes Standardformat ist eine Art Nachfolger des GIF-Formats, wird jedoch vom Internet Explorer 6 noch nicht ausreichend unterstützt)

Je nach Art der einzubindenden Grafik bietet sich jeweils eines der Formate besonders an.

Eigenschaften der beiden Formate in der Gegenüberstellung

GIF PNG
JPEG
kann nur 256 verschiedene Farben enthalten.
Bilder mit mehr Farben müssen daher auf diese Anzahl heruntergerechnet werden. Dies kann z.B. bei Bildern mit sanften Farbverläufen zu Krissel-Effekten führen, weil nicht die nötige Anzahl an Zwischentönen zur Verfügung steht.
kann beliebig viele Farben enthalten und außerdem differenzierte Angaben zur Transparenz. Unterliegt nicht den Beschränkungen des GIF-Formats, bewirkt aber aufgrund der höheren Qualität auch eine höhere Datei-Größe.
kann beliebig viele Farben enthalten. Dies ist für feine Verläufe oder für farbenreiche Fotos von Vorteil.
ist pixelgenau - jeder Bildpunkt ist fest definiert. ist wie GIF pixelgenau und damit frei von Artefakten (z.B. Schliereneffekte) , wie sie bei JPG auftreten können.
komprimiert die Daten intern so, daß kleine Details auch mal verschluckt werden können. Hierfür kann ein Komprimierungsgrad beim Abspeichern eingestellt werden: Je stärker die Komprimierung, desto mehr Qualitätsverluste.
ergibt saubere, kleine Dateien bei flächigen Grafiken ohne häufige Farbnuancen. kann auch feine Farbnuancen sauber auflösen
bringt bei flächigen Grafiken evtl. Schliereneffekte.
ergibt bei Fotos und andere Dateien mit vielen Farbnuancen eher große Dateien. wie bei GIF
ergibt auch bei detailreichen Fotos brauchbar kleine Dateien.
ermöglicht die Auswahl einer Transparent-Farbe. Alle Pixel, die dieser Farbe entsprechen, werden auf der Webseite als transparent dargestellt, was für nicht-rechteckige Formen oder auf farbigen Hintergründen sinnvoll ist. Ermöglicht einen Alpha-Kanal, d.h. unterschiedliche Transparenzstufen, die für jeden Bildpunkt individuell eingestellt sein können
hat keine Möglichkeiten, Farben transparent darzustellen.

Es muß also entschieden werden, welches der Grafikformate verwendet werden soll. Im Einzelfall ist es auch mal interessant zu überprüfen, welches der drei Formate beim Abspeichern eine kleinere Dateilänge ergibt: Ausprobieren.

Wo werden Grafiken abgespeichert?

Grundsätzlich empfiehlt es sich, Grafiken dort abzuspeichern, wo auch die HTML-Datei liegt, in welche die Grafik eingebunden werden soll. Aus Übersichtsgründen bietet sich hier aber ein spezielles Unterverzeichnis für Bilder an, dies wird vom Unicms automatisch entsprechend diesem Beispiel gehandhabt:

Beispiel: Heißt die Webseite index.html, und liegt das Bild namens bild.gif im Unterverzeichnis bilder, dann hieße die relative Position des Bildes zur Webseite
bilder/bild.gif