Sie befinden sich hier: Thema: Gestaltung Artikel: Bilder

Bilder für das Web

Bei der Optimierung von Digitalfotos für das Internet geht es darum, einen Kompromiß zwischen der Dateigröße und der Bildqualität zu finden. Es bedarf einiges an Vorbereitung, um ein möglichst optimales Resultat zu erziehlen

Unterstützte Formate:

Bilder müssen in eins, der gültigen Webformate konvertiert werden. Die heute am gängigsten Formate sind: .jpg, .gif, und .png. Nur diese Formate können von jedem Browser ohne ein zusätzliches Plug-in gelesen werden.

JPG (JPEG),GIF und PNG:

Man kann vereinfacht sagen, daß .jpg für detailreiche Bilder (bis zu 16,7 Millionen Farben) und .gif für Zeichnungen (max. 256 Farben), verwendet werden. Aber wie so oft keine Regel ohne Ausnahme. Sollen Linien oder Kanten besonders stark hervortreten, ist es auch bei einem detailreichen Bild sinnvoll, es mit dem .gif Format zu versuchen. Beispiele finden Sie in der Bildergalerie. Bei Photoshop 6 kann mann mit „Datei“, „Für Web speichern“, bis zu 4 optimierte Versionen nebeneinander stellen; und die Vor- und Nachteile, einschließlich der Speichergröße der Dateien, miteinander vergleichen.

Das .gif Format bietet, im Gegensatz zum .jpg Format, die Möglichkeit, bestimmte Bereiche einer Farbe transparenz zu zu setzen. Bei der Kompremierung verliert ein .jpg Bild an Qualität, bei der .gif Version ist sie verlustfrei, aber benötigt meist mehr Speicherkapazität. Das .gif Format wird oft bei Bildern mit wenig Farben, wie Beispielsweise Buttons, Logos, animierten Bildern, oder freigestellten Grafiken auf HTML-Seiten mit einer Hintergrundgrafik eingesetzt.

Ein Dasein als Mauerblümchen fristet das .png Format (sprich: „Ping“). Grafikprogramme, wie Macromedia Fireworks, können unter anderem auch dieses Format erzeugen. Leider wird es im Web nur selten verwendet. Dafür würde unter anderem sprechen, daß man einen sogenannten Alphakanal einsetzen kann, um unterschiedliche Transparenzbereiche setzen zu können. Der .png Speicher - Algorithmus ist auch noch verlust- und patentfrei. Er unterstützt wie .jpg 24 Bit Farbtiefe und damit Millionen von Farben. Heute unterstützen alle aktuellen Browser .png, das schon immer als Nachfolger vom .gif Format gedacht war. Nur bei Animationen kommt man noch nicht am .gif Format vorbei.

Neue Formate:

Um die folgenden Formate darstellen zu können, müssen die aktuellen Browser noch mit einem zusätzlichen Plug-in, oder mit einem Active-X-Control nachgerüstet werden.

Ming - MNG:

Alle neuen Grafikformate versuchen, die Vorteile der älteren in sich zu vereinen. Am besten gelingt es dem .mng Format (sprich: „Ming“). Die Abkürzung steht für Multiple Image Network Graphic. Netscape, ab Version 6 und Mozilla unterstützen bereits dieses Format. Der Internet Explorer kann dieses nur mit einem Plug-in, daß Sie unter :http://entropymine.com/jason/mngplg herunterladen können. Wenn Sie MNG einsetzten wollen, sollten Sie auf dieses Plug-in und die Adresse zum herunterladen hinweisen.

Das .mng Format ist viel leistungsfähiger als .gif, ohne auf deren Vorteile zu verzichten. Bilder mit einem transparenten Hintergrund, Animationen, hohe Farbtiefe, flexible Kompressoion, die kleinere Bilddateien zum schnelleren Laden ermöglicht, sprechen für dieses Format. MNG bietet sogar eine dynamische Transparenz, womit Bilder wie aus dem Nichts erscheinen und wieder verschwinden können. Jedem Farbwert kann man 256 Transparenzstufen zuordnen und teiltransparente Bereiche definieren. Das Tool Emngma (www.3-t.com) ist ein gutes Werkzeug zur Erstellung des .mng Formates. Die Vollversion (etwa 30,-- Euro), läßt einen sogar ausgefeilte 3D-Efekte erstellen.

JPEG Network Graphics - JNG:

Das .jng Format, wobei JNG für: JPEG Network Graphics (sprich: „Jing“) steht, bietet eine sehr gute Kompression und hat alle Chancen, Nachfolger von JPEG zu werden. JNG ist ein sehr enger Verwandter von MNG und besteht aus einer Mischung von MNG, PNG und JPEG. Ein zusätzlicher Alphakanal ermöglicht Transparenz. Nur der Netscape und der Mozilla Browser kommen ohne Probleme mit JNG zurecht. Der Bildbetrachter IrfanView, kann ab der Version 3.7 mit dem MNG und dem JNG Format umgehen.

JPEG 2000:

Programme, wie Corel Draw oder Photo Impact haben bereits das .jp2 Format implementiert. Bei Adobe Photoshop ist es noch nicht integriert, sodaß man hier noch auf ein Zusatzmodul, wie Lurawave.JP2, zurückgreifen muß. Sie erhalten es, zusammen mit verschiedenen Browser Pug-ins, unter: http://www.algovisionluratech.com/download. Die Browser Plug-ins benötigen Sie, weil bisher noch keiner JPEG 2000 darstellen kann.

Das Besondere an JPEG 2000 ist der Kompressions - Algorithmus. Bisher zerlegte die JPEG Kompremierung in kleine quadratische bildbereiche, analysierte deren Farbwerte und fasste annähernd gleichfarbige Bereiche zusammen. JPEG 2000 verwendet das sog. Wavelet Verfahren. Dieser Algorithmus analysiert das gesamte Bild auf Farbwechsel. Sie erhalten mit dieser neuen Technik, bei gleicher Qualität deutlich kleinere Dateigrößen, als mit dem bisherigen .jpeg Format.

Durchläuft das Bild nur einmal den Wavelet Algorithmus, ändert sich der Bildinhalt nicht. Somit bekommt man eine verlustfreie Kompremierung. Man kann auch sog. ROIs (Regions of Interest) definieren, in denen sich unterschiedliche Kompremierungsgrade anwenden lassen. So kann man Bildgröße und -qualität optimal aufeinander abstimmen. Im Progressive Modus, in dem der Browser das Bild nach und nach aufbaut, wählt man zwischen Qualität, Auflösung und Farbe aus. Im Farbmodus kann der Bildaufbau von Schwarz-Weiß über Graustufen bis hin zu allen Farben erfolgen. Der Bildbetrachter IrfanView kann ab Version 3.8 JPEG 2000 lesen und erzeugen.

JPEG 2000 findet bislang in der Praxis kaum Anwendung. Wahrscheinlich ist der aufwendige Algorithmus daran schuld. Er erfordert eine so hohe Rechenleistung, sodaß die Hersteller digitaler Kameras momentan noch beim alten JPEG Standard bleiben.

Wissenwertes zu digitalen Bildern:

Digitalkameras erstellen Bilder grundsätzlich mit 72 ppi. Wobei bei einigen Kameras die Möglichkeit besteht, Bilder umzurechnen, sodaß diese als Ausagbegröße 300 ppi betragen. Was eine sehr gute Druckqualität berücksichtigt. Bei der Speicherung der Fotos, kann man unter verschiedenen Kompremierungsgraden auswählen. Je nachdem enthält ein Foto unterschiedlich viele Pixel und somit Bildinformationen. Dies wirkt sich auf die gesamte Qualität (Detailtreue, Farbwiedergabe, ...) aus. Mit genügend Speicher ausgerüstet, kann man dann eine große Anzahl von Bildern, in guter Qualität ablegen, um später genügend große Vorlagen für Ausdrucke, oder Ausschnitte erstellen zu können.

Digitale Fotos müssen meist erst noch bearbeitet und verkleinert werden, um unnötig lange Ladezeiten zu vermeiden. Neben der Farbanzahl und der Kompremierung spielt die Anzahl der Bildpunkte (Breite x Höhe) für die Größe einer Datei eine entscheidende Rolle. Je weniger Pixel eine Datei hat, so kleiner ist diese. Bildbearbeitungsprogramme bieten neben dem verkleinern von Bildern auch verschiedene Methoden zum nachträglichen „scharf zeichenen“ an. Je stärker Sie jedoch ein Foto verkleinern, desto schlechter können Sie einzelne Details erkennen. Dies hängt nicht von der Motivgröße ab, sondern wird stark durch den Wegfall von Pixeln beeinflusst. Deshalb sollten Sie sich überlegen, ob nicht der Ausschnitt eines Fotos zu bevorzugen ist. Bevor Sie Fotos verkleinern, sollten Sie erforderliche Änderungen, wie beispielsweise Farb- und Helligkeitskorrekturen, Entfernung des Hintergrundes, oder eine Retusche bereits durchgeführt haben. Ansonsten kann es zu einer Farbstichigkeit oder Kontrastarmut kommen. Benutzen zum verkleinern von Bildern nie die in den Webeditoren integrierte Methode, Bilder zu markieren und anhand von „Anfassern“ zu verkleinern.. Die Bilder werden nur im Browser kleiner angezeigt, die Dateigröße wird hierbei nicht verändert.

Die Auflösung in dpi (Dots per Inch) spielt im „Screen“-Design keine Rolle, da sie nur im Printbereich wichtig sind, denn sie beziehen sich auf die Auflösung des Druckers. Im Screen (Monitor) Bereich ist die Auflösung in ppi (Pixel per Inch) wichtig. Die höher auflösenden Mac-Monitore stellen mit 72 ppi einen „logischen Inch“ (2,54 cm) dar. Dies entspticht auch der tatsächlichen Ausgabe auf Papier. PC-Monitore benötigen hingegen 1,33 Inch, was 96 ppi entspricht, um einen Inch darzustellen. Das Verhältnis zwischen Papier und Bildschirm beträgt am Mac also 1:1 (72:72), am PC aber 1,33:1 (96:72).

Nachvollziehen können Sie das, wenn Sie den Inch, der Ihnen z.B in Photoshop am Lineal angezeigt wird, mit einem richtigen Lineal nachmessen. Am Mac misst der Photoshop Inch bei 72 ppi 2,54 cm. Am PC hingegen misst ein Inch am Lineal nur 2 cm. Erst wenn Sie die Auflösung auf 96 ppi setzen misst der logische Inch auch am PC 1 Inch (2,54 cm). Am PC passen also zwar 96 Pixel in einen realen Inch, aber nur 72 Pixel in einen „logischen“. Der Unterschied zwichen PC und Mac Monitoren besteht also nur in der Breite und Höhe des Bildschirms, die für die selbe Anzahl an Pixeln benötigt werden. Ganz egal mit wie viel dpi (Dots per Inch) Sie ein Foto einscannen, allein die Ausmaße an Pixel bestimmen, wieviel Pixel das Bild am Monitor einnimmt.

Megapixel, Auflösung und Druckgröße:

Für das „Screen“-Design (Bildschirm) reichen 2 Megapixel. Beim „Print“ Design (Druck) benötigt man eine höhere Auflösung. Im professionellen Bereich (Zeitschriften, Bücher, usw.) müssen es 300 dpi sein. Der Normalanwender erzielt mit 150-200 dpi ausreichende Ergebnisse.

Eine Faustregel für den Druck: Teilt man die Pixelzahl durch hundert, erhält man in etwa das Ausgabeformat in Zentimeter, bei dem man sehr gute Ausdrucke (300 dpi) erhält! Beispiel: 2 Megapixel (1600 x 1200 Pixel) wären 16 cm x 12 cm Bildgröße, wobei dasgängige Druckformat hierfür 10 cm x 15 cm ist.

Bilder Tips:

Warum sieht man am Bildschirm nur einen Ausschnitt seines Fotos? Dies hängt damit zusammen, wieviele Pixel die Digitalkamera erstallen kann; und in welcher Auflösung die Bilder aufgenommen werden. Verändert man die Auflösungsart: jpeg, raw, tif (von Normal über Fein bis Sehr fein, so ändert sich die Anzahl der darstellbaren Pixel. Folgendes sollte man sich vor Augen halten: ein Bild mit 600 x 600 Pixeln nimmt bei einer Bildschirmauflösung von 800 x 600 mehr Platz am Bildschirm ein, als bei einer Auflösung von 1024 x 768.

Achtung!: beim Verändern der Höhe oder Breite eines Fotos, müssen die Proportionen beibehalten werden, damit sie nicht verzerren. Die meisten Bildbearbeitungsprogramme verändern dann automatisch, den jeweils anderen Wert im richtigen Verhältnis. Hat man bei seinem Bildbearbeitungsprogramm die Möglichkeit, Bilder für das Web zu optimieren, so kann man hier das Bildformat, die dafür möglichen Einstellungen und den Kompremierungsgrad einstellen. Wobei hier verschiedene Möglichkeiten ausprobiert werden sollten. Denn oft genug, lassen sich die Bilder ohne großen Verlust stark reduzieren.

Man sollte nach Möglichkeit nicht zu viele Bilder auf einer Website unterbringen. Mehr als 50 KB sollte eine Seite mit Bildern insgesamt nicht haben, da sonst die Ladezeiten zu lange werden. Dadurch müssen die Besucher zu lange warten und brechen generft ab. Die weiteren Seiten werden erst gar nicht angesehen. Man kann allerdings, wenn man ein besseres Bildbearbeitundsprogramm besitzt, Bilder auch in sogenannte Slices („Teilbereiche“) unterteilen. Diese werden dann beim downloaden schneller geladen. Der Besucher merkt vom zusammenfügen der Slices nichts.

Lange Ladezeiten kann man ebenso verhindern, indem man den sinnlosen Einsatz von Grafiken und Animationseffekten unterläßt. Ein Beispiel hierfür ist die Animation von Buttons mit Java, anstatt mit Mouseover. Lassen Sie Ihre Besucher nicht warten, verzichten Sie auf alles, was die Web-Seiten aufbläht und keinen Mehrwert verspricht.

Slicen Sie große Bilder ! Unter Slicen versteht man, die Aufteilung eines Bildes oder einer Grafik in einzelne Teile. Die einzelnen Teile werden dann in einer Tabelle wieder zusammengesetzt. Die Besucher sehen in ihrem Browser keinen Unterschied. Wartet man bei großen Grafikdateien mitunter sehr lange auf das Bild, so werden Slices innnerhalb einer Tabelle hingegen, bereits stückweise aufgebaut.

Manuelle Umwandlung: Digitalkameras mit 2 Mio. Pixeln, können bestenfalls Fotos erstellen, die sich für sehr gute Ausdrucke (300 dpi) bis zum 10 x 15 Druckformat eignen. Bei größeren Formaten, z.B DIN A4 Format (21 x 29,7cm), sind einzelne Pixel zu erkennen.

Fotos müssen für den Ausdruck noch vorbereitet werden. Für einen sehr guten Ausdruck sollten 300 dpi vorhanden sein. 150 dpi reichen aber für den Hausgebrauch!