Internet
  
Uni Internet www . grafiken

Einbindung von Grafiken in Webseiten

 

Woher kommt die zu verwendende Grafik?

Grafiken können z.B.

  • eingescannt werden
  • aus dem Internet "geklaut" werden
  • 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 erfaßt. 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.

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

Software: Standardmäßig sollte auf Windows-Computern das Programm Microsoft PhotoEditor installiert sein, das zu MS Office dazu gehört. Hiermit lassen sich die nötigen Arbeitsschritte durchführen.

Zuschneiden

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.

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 Fenterbreite von 800Pixeln zugrunde legt, würde also eine Grafik von 200Pixel Breite ein Viertel der Fensterbreite 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?

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.

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

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

  • GIF
  • JPEG

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

Eigenschaften der beiden Formate in der Gegenüberstellung

GIF 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. Dies ist für feine Verläufe oder für farbenreiche Fotos von Vorteil.
ist pixelgenau - jeder Bildpunkt ist fest definiert. 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. bringt bei flächigen Grafiken evtl. Schliereneffekte.
ergibt bei Fotos und andere Dateien mit vielen Farbnuancen eher große Dateien. 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. hat keine Möglichkeiten, Farben transparent darzustellen.

Es muß also ausgewählt werden, welches der Grafikformate verwendet werden soll. Im Einzelfall ist es auch mal interessant zu überprüfen, welches der beiden 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.

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

Uni | Uni - Aktuelles | Uni - Studium | Uni - Einrichtungen | Uni - Impressum | Uni - Suche