Screendesign: Bilder auf der Homepage

Einen immer stärker werdenden Aspekt nimmt die digitale Bildbearbeitung auch im Bereich des Webdesigns ein.

Manche Seiten bestehen eigentlich nur noch aus Bildern, die dann womöglich auch noch über den Bildschirm tanzen oder in schrillen Farben nervtötend aufblinken. Sicher ist jedoch auch, dass eine gut gemachte Webseite nicht mehr ohne irgendwelche Grafiken auskommt. Entweder als aufwendige Hintergrundgrafik, sehr oft als Button oder als im Internet wichtige Bannergrafik usw. Ärgerlich und störend sind aber auch Bilder, die einfach zu groß im Ausmaß und als Datei sind und somit eine unnötig lange Ladezeit der Webseite zur Folge haben. Hier könnte so mancher Fehler vermieden werden, wenn man einige Grundregeln im Bezug auf die Darstellung von Fotos und Grafiken auf der Homepage befolgen würde.

  1. Fotoähnliche Bilder immer im .jpg-Format einbinden

  2. Grafiken, die nur aus wenigen Farben bestehen, immer im .gif-Format einbinden

  3. Bilder immer in der Originalgröße erscheinen lassen - nicht im Quellcode künstlich verkleinern, da dies keine Verkleinerung auf die Dateigröße zur Folge hat.

  4. Nicht zu viele Bilder und Bildchen auf der Webseite platzieren - besondere Vorsicht bei animierten .gif-Bildern

  5. Wenn Sie schon dem Betrachter Ihrer Homepage viele Bilder anbieten wollen oder müssen, sollten Sie Ihm die Möglichkeit bieten, die Bilder einzeln zu betrachten, indem Sie von allen Bildern kleinere Versionen (sogenannte Thumbnails) zur Verfügung zu stellen, aus denen man sich das gewünschte Bild im Großformat auswählen kann.

  6. Bedenken Sie bei Verwendung von Flash-Filmen oder vrml-Dateien: Nicht jeder hat die entsprechenden Plugins in seinem Browser installiert!

Das .jpg-Format

Das .jpg-Bildformat ist das Bildformat, in dem überwiegend Fotos oder fotoähnliche Bilder abgespeichert werden. Der große Vorteil bei diesem Format liegt darin, dass Sie die Möglichkeit haben, den Komprimierungsgrad selbst einzustellen, mit der sie einen vernünftigen Kompromiss zwischen Dateigröße und Bildqualität erzielen müssen. Oftmals ist es besser, das Bild etwas stärker zu komprimieren, da dies die Ladezeit der Webseite doch erheblich verkürzt, was Ihnen der Betrachter sicherlich danken wird.

 
14 kb


 9 kb


 3 kb

Das .gif-Format

Das andere Bildformat, das wir uns ein wenig näher anschauen wollen, ist das .gif-Format. Was man vielleicht als großen Nachteil dieses Bildformates ansehen könnte, ist die Tatsache, dass in .gif-Bildern lediglich max.256 Farben dargestellt werden können. Doch glauben Sie mir, in vielen Fällen sind das sogar schon viel zu viele Farben. Eine einfache Grafik kommt in der Regel sogar mit nur einer Farbe aus. Doch lassen sich auch wunderschöne Grafiken farbig darstellen, die mit weniger als den besagten 256 Farben auskommen, was zudem die Dateigröße erheblich einschränkt. Ferner hat das .gif-Format einen weiteren großen Vorteil, nämlich die Bestimmung einer Transparenzfarbe. Diese Tatsache erlaubt es Ihnen, Grafiken in allen möglichen Formen darzustellen. 

Das .png-Format

Ähnlich wie das .gif-Format besteht auch das .png-Format aus 256 Farben (8 Bit) oder sogar aus 16,7 Mill. Farben (24 Bit). Und genau wie beim gif-Bild kann man eine Transparenzfarbe bestimmen. Leider wird diese Transparenz aber immer noch nicht vom am häufigsten verwendeten Webbrowser (IE bis Version 6) unterstützt, sodass sich dieses Dateiformat noch nicht großartig durchgesetzt hat.

animierte .gifs

Eine besondere Form des .gif-Formats ist das "animierte .gif". Es gibt mittlerweile eine Reihe von Programmen, die sich darauf spezialisiert haben, eben auch dieses gif-Format zu erzeugen. Bei animierten .gifs handelt es sich eigentlich nur um mehrere Bilder, die nacheinander gezeigt werden. Auch hier können Sie nur 256 Farben darstellen, haben aber auch den bereits genannten Vorzug einer Transparenzfarbe. Außerdem haben Sie noch die Möglichkeit, das Abspieltempo der einzelnen Bilder zu bestimmen, so dass sich auch hierbei tolle Effekte erzielen lassen.

animierte 3D-Bilder & Co.

Es gibt noch speziellere Arten von Animationen auf einer Homepage. Als Beispiel sehen Sie hier eine 3D-Animation im .gif-Format, das mit einem 3D-Programm erstellt wurde.

Wesentlich komfortablere und vor allem interaktive Animationen lassen sich mit Programmen wie z.B. Flash erstellen. Diese haben allerdings den Nachteil, dass sie einerseits zum Teil sehr große Dateien beinhalten und andererseits auch nicht von jedem Surfer auf der Homepage gesehen werden können, da Flash-Dateien nur mit einem Plugin im Browser funktionieren.
Da es bei den heute üblichen Übertragungsgeschwindigkeiten im Internet noch nicht tragbar ist, Videos etwa im .avi- oder .mov- Format abzuspielen, bleibt nur noch die Möglichkeit mit einem Java-Applet etwas Dynamik in eine Webseite zu zaubern.

Dazu sehen Sie hier jeweils eine kleine Flash-Animation und zweitens ein 360°-Panoramabild als Java-Applet (wenn installiert!).


Hier gibt´s noch mehr Flash-Filme


Mehr Panoramabilder gibt es hier.