Hilfe, es pixelt!

aus dem Internet

Was ist ein Bild?

Beim Gestalten für das Internet ist jedes Element ein Bild, das nicht Text, Tabelle oder einfarbiger Hintergrund ist. Eine Internet-Seite besteht aus dem html-Code, in dem der Text, die Formatierungen und die Plätze und Dateinamen der Bilder festgelegt sind, und allen Bilddateien. Jedes Bildelement - egal ob Button oder Foto, hat eine eigene Datei. Wenn Bilder mehrmals auf der Site vorkommen, muß die Bilddatei nur einmal vorhanden sein. Eine Internet-Seite ist erst dann vollständig im Web zu sehen, wenn alle zu einer Seite gehörenden Dateien - Code und Bilddateien - auf den Server übertragen sind.

Das wichtigste Ziel

Das wichtigste Ziel ist, daß Bilddateien im Web möglichst klein sind (gemeint ist die Dateigröße und nicht die tatsächlichen Abmessungen auf der Site). Je kleiner eine Bilddatei ist, desto schneller wird sie übertragen, je früher sieht sie also der Surfer.
Die Maßeinheit des Internets, also der Bildschirmdarstellung, ist Pixel (Bildpunkte). Jeder Bildschirm kann nur eine begrenzte Anzahl von Bildpunkten darstellen. Je größer die Auflösung eines Bildes ist, desto „schärfer" erscheint es uns, weil wir die Punkte, aus denen das Bild besteht, nicht mehr erkennen können, sondern Bilder so aussehen, als würden sie aus tatsächlich ausgefüllten Flächen bestehen. Die Auflösung eines Bildes fürs Web sollte so groß sein, daß die Surfer es gerade noch als „scharf" empfinden.
Im Internet verwendet man sog. Pixelgraphiken. Im Gegensatz zu Vektorgrafiken können Pixelgrafiken nicht vergrößert werden, ohne daß sie „pixeln", also die einzelnen Bildpunkte sichtbar werden. Die gängigen Browser können im wesentlichen zwei Bildformate wiedergeben: *.gif und *.jpg. Jedes Bild, das im Web veröffentlicht wird, sollte eines dieser beiden Formate haben.
Die einfachste Möglichkeit, auf die Dateigröße eines Bildes Einfluß zu nehmen, ist, die Auflösung, also die Anzahl der Bildpunkte zu verändern. Verringert sich die Auflösung, wird das Bild auch auf dem Bildschirm kleiner. Am besten verringert man die Auflösung so lange, bis das Bild so klein ist, wie es auch tatsächlich auf der Web-Seite erscheinen soll. Es empfiehlt sich nicht, Bilder im html-Editor kleinzuziehen. Dabei wird nicht die Auflösung sondern nur die Abmessungen verändert, d.h. die Dateigröße ändert sich nicht. Die Veränderung der Auflösung läßt sich mit jedem gängigen Grafikprogramm vornehmen. Da einige Grafikprogramme das Rückgängigmachen dieses Befehls nicht gestatten, empfiehlt es sich, vorher eine Kopie des Bildes zu machen, bevor man Veränderungen an der Auflösung vornimmt.
Eine weitere Möglichkeit, die Dateigröße zu reduzieren, ist, die Anzahl der Farben zu verändern. Eine s/w Grafik ist verständlicherweise kleiner als ein Bild mit 16 Millionen Farben. Es empfiehlt sich, Farbeinstellungen zu verwenden, die dei Browser unterstützen. So ist die "Netscape" Farbpalette optimiert auf die gute Darstellung von Bildern mit möglichst wenigen Farben.
Man kann sich am schnellsten an die Pixel-Maßzahl gewöhnen, wenn man sich die Größe eines Bildes in Relation zum Bildschirm vorstellt. Die meisten Bildschirme haben eine Auflösung von 800x600 Pixel. Ein 400 Pixel breites Bild nimmt hier also den halben Bildschirm ein.

Die Formate

Dateiformate erkennt man bei Windows an den - in der Regel - dreistelligen Dateiendungen wie *.doc oder *.txt. Diese Endungen sagen dem System, mit welchem Programm die Datei geöffnet werden soll.

Gif

Das Graphics Interchange Format (GIF) wurde für den Bildtransfer innerhalb von Compuserve entwickelt. Ein wichtiges Merkmal ist die besondere Kompressionsmethode, mit der die Dateigröße verringert werden kann. Gifs sind im Schnitt zwanzig- bis dreißigmal kleiner als die gleichen Bitmaps. Gifs können maximal 256 Farben pro Bild enthalten. Gifs eignen sich für Symbole, Buttons und Zeichnungen und weniger für fotorealistische Bilder. Gifs können auch transparent sein, beim Konvertieren in gif kann man die Farbe des Bildes festlegen, die transparent sein soll. Mit dem Spezialeffekt „Interlance" erscheint ein Bild scheinbar langsam auf dem Bildschirm anstatt sich Zeile für Zeile von oben nach unten aufzubauen.

JP(E)G

Die Joint Photographic Experts Group hat das JP(E)G-Bildformat für Hochgeschwindigkeitstransfer über digitale Kommunikationsnetze entwickelt. JPG ermöglicht fotorealistische Digitalbilder. JPEG kann bis zu 16,7 Millionen Farben darstellen. Bei JPG kann man zusätzlich zur Auflösung noch über den Kompressionsfaktor die Dateigröße beeinflussen. Je höher der Kompressionsfaktor desto schlechter ist allerdings auch die Bildqualität (ausprobieren).

aus einer Digitalkamera

Die meisten Digitalkameras speichern die Daten bereits im *.jpg-Format ab, so daß keine Konvertierung mehr notwendig ist. Man muß meistens nur noch die Auflösung verändern und kann das Bild dann sofort einsetzen.

aus dem Web

Bilder aus dem Web können - abgesehen von der evtl auftretenden Urheberrechtsproblematik - technisch problemlos in eigenen Seiten verwandt werden, da sie in der Regel schon im richtigen Format vorliegen. Möglicherweise sind nur noch Änderungen der Auflösung notwendig. Bilder aus dem Internet kann man in der Regel nicht vergrößern, weil sie sonst pixeln.

aus dem Scanner

Beim Scannen von Bildern für das Web reicht eine Auflösung von 72dpi (dots per inch), da Monitore nicht mehr als 72dpi darstellen können. Eine größere dpi-Zahl würde also allenfalls zu einer größeren Datei und in der Regel nicht zu einer verbesserten Darstellung führen.

aus Grafikprogrammen

Für selbstgemachte Grafiken gilt das gleiche wie für andere auch. Beim Exportieren/Konvertieren in die Web-Formate sollte man daran denken, daß die Bilder danach nicht mehr skalierbar sind.

Hintergrund

Ein einfarbiger Hintergrund ist völlig unproblematisch und kann mithilfe eines html-Befehls hergestellt werden.
Nimmt man als Hintergrund ein Bild, „kachelt" der Browser das so oft, bis die Seite voll ist. Das heißt, habe ich ein Hintergrundbild, das 200x100 Pixel groß ist, wird es entsprechend der Auflösung des Monitos mehrmals neben- und untereinander eingefügt. Dieses „Kacheln" kann zum Beispiel bei einem immer wiederkehrenden Muster gewollt sein.
Soll das Hintergrundbild tatsächlich nur einmal zu sehen sein, muß man die Auflösung des Hintergrundbildes so groß machen (1200 Pixel), daß der Browser selbst bei großen Bildschirmen nicht mehr als ein Bild nebeneinander bekommt. Nachteil ist allerdings, daß Nutzer mit kleineren Bildschirmen möglicherweise nicht alles von dem Hintergrundbild sehen können, weil ihnen ja bis zu 400 Pixel fehlen können. Besonderes Augenmerk sollte man dabei auf die Dateigröße richten, da Hintergrundgrafiken in der Regel keine unverzichtbaren Informationen enthalten und wenig Surfer bereit sein werden, darauf zu warten. Bei jpg also Kompression erhöhen und bei gif Farben verringern.

Gif-Animationen

Das gif-Format unterstützt die Möglichkeit, mehrere Grafiken in einer Grafikdatei zusammenzufassen. Die einzelnen Bilder werden dann nacheinander gezeigt, es entsteht der Eindruck einer Bewegung etwa wie bei einem Daumenkino.
Die Bilder für eine gif-Animation sollten gleich hoch und breit sein. In sog. Gif-Animatoren kann man die Einzelbilder zu der Animation zusammensetzen. Gif-Animationen haben den Nachteil, daß sie schnell sehr groß werden.