Zum Navigations-Menü
Kein Layout? Lesen Sie hier, warum...

Webplain.de Infosite

Bildbearbeitung (Grundlagen)


Webplain.de » Webdesign & Internet » Bildbearbeitung (Grundlagen)

Zu Webdesign gehört mehr als pures HTML- und Script-Wissen. Die Bearbeitung von Grafiken und Bildern für die Homepage nimmt oft die größte Zeit eines Designers in Anspruch.
Generell gilt: je kleiner, desto besser. Dabei spielen die Formate GIF, PNG und JPEG im Web die größte Rolle. Daneben gibt es noch das unbekanntere Wavelet-Format.
Auch wenn im ISDN- und DSL-Zeitalter Dateigrößen mehr und mehr an Bedeutung verlieren, lohnt es sich dennoch, vor der Veröffentlichung über das richtige Format nachzudenken.

GIF (Graphics Interchange Format)

Dieses Format wurde von Compuserve für die Datenübertragung entwickelt. Es bietet eine Farbtiefe von 8 Bit (256 Farben) und eine Transparenzstufe. Daher eignet sich das GIF am Besten für Zeichnungen und Grafiken (siehe Vergleich unten).

PNG (Portable Network Graphics)

Das PNG-Format arbeitet ähnlich wie das GIF, komprimiert das Bild jedoch zusätzlich in vertikaler Richtung, statt nur horizontal.

JPEG (Joint Photographic Experts Group)

Für die Komprimierung von Fotos entwickelte sich dieses Format (ISO-Norm DIS 10918-1). Es fasst Bereiche mit ähnlichen Farben zu einer Farbe zusammen, was zwar zu Qualitätsverlusten (Blockartefakte) führt, die Datei aber erheblich verkleinern kann.
Die Neuentwicklung JPEG2000 (s. Linkliste unten) verbindet die Features der Formate JPEG und Wavelet und bietet so noch höhere Kompressionsraten bei verbesserter Bildqualität.

Wavelet

Um ein mit Wavelet komprimiertes Bild in einem Webbrowser betrachten zu können, ist ein spezielles Plug-In nötig, das kostenlos von der Website der Herstellerfirma LuraTech heruntergeladen werden kann. Das lwf-Format bietet extrem große Kompressionsraten bei minimalem Qualitätsverlust (Online-Demo).

GIF
1561 Byte
GIF-Zeichnung (1561 Byte)

PNG
1503 Byte
PNG-Zeichnung (1503 Byte)

JPG
13614 Byte
JPG-Zeichnung (13614 Byte)

GIF
2 Farben, 720 Byte
2-Farben-GIF (720 Byte)

GIF
32 Farben, 6285 Byte
32-Farben-GIF (6285 Byte)

GIF
256 Farben, 10810 Byte
256-Farben-GIF (10810 Byte)

PNG
10093 Farben, 23757 Byte
PNG-Bild, 10093 Farben (23757 Byte)

JPG
Kompr. 1, 10841 Byte
JPG Kompressionsstufe 1 (10841 Byte)

JPG
Kompr. 50, 2013 Byte
JPG Kompressionsstufe 50 (2013 Byte)

JPG
Kompr. 99, 447 Byte
JPG Kompressionsstufe 99 (447 Byte)

Wann sollte jetzt welches Format verwendet werden? Die Entscheidung zwischen JPG und GIF/PNG sollte relativ leicht fallen: JPG für Fotos und Bilder mit vielen Farben und Farbverläufen, GIF für Grafiken, Zeichnungen, Screenshots usw. Zwischen PNG und GIF sollte man immer probieren und dann einfach das Format mit der geringsten Dateigröße wählen, die Unterschiede sind oft groß.

Ein Problem besteht beim Verlinken auf Grafiken im Web: JPG- und GIF-Bilder werden problemlos in beiden Browsern angezeigt, während PNG-Grafiken nur in Netscape korrekt geladen werden. Im IE < 5.5 dagegen öffnet sich nach einem Klick auf einen PNG-Link das Fenster »Dateidownload« und das Bild wird nicht direkt angezeigt. Das Problem ist ab dem IE 5.5 behoben.

Dafür gibt es in Netscape 4.x ein anderes Problem: bei PNG-Grafiken wird keine Transparenz dargestellt. Der Internet Explorer arbeitet hier normal.

Zur schnellen Bildbearbeitung und Grafikerstellung empfehle ich die Shareware Paint Shop Pro. Sie bietet unter den Exportfunktionen für GIF, PNG und JPG vielfältige Einstellmöglichkeiten zur Optimierung.

Weitere empfehlenswerte Programme finden Sie auf der Downloadseite.

Weitere Informationen

Alle möglichen Dateiformate mit Angabe der Spezifikationen sind hier aufgeführt:
http://www.faqs.org/faqs/graphics/fileformats-faq/part3/
Viele englischsprachige Informationen zur Verwendung verschiedener Grafikformate im Web:
http://www.projectcool.com/developer/gzone/basics/
Umfangreiche englische Infos rund ums PNG-Format:
http://www.libpng.org/pub/png/
Die Homepage des JPEG- und JBIG-Kommitees mit News und Infos:
http://www.jpeg.org
Englischsprachige FAQ zum JPEG-Format:
http://www.landfield.com/faqs/jpeg-faq/
Neue Informationen zum JPEG2000-Format:
http://www.jpeg2000.de
Die Entwicklerfirma des Wavelet-Formats:
http://www.luratech.com

Kommentare

Es gibt 3 Kommentare zu »Bildbearbeitung (Grundlagen)«.
Neuen Kommentar posten...

1 Am 14. Okt. 2004 schrieb Papito:

Mir scheint, bei den Bildbeispielen für das GIF-Format wurden die Blumenbilder mit 32 Farben und 256 vertauscht. So nehme ich das jedenfalls wahr. Vielleicht liegts auch an meiner Graphikkarte. ;)

2 Am 14. Okt. 2004 schrieb Clemens Weiß:

In der Tat.
Danke für den Hinweis.

3 Am 29. Okt. 2004 schrieb Oliver Keith:

Man sollte vielleicht noch erwähnen, dass es sowohl PNG 8 (ähnlich GIF) und PNG 24 (ähnlich JPG ohne Qualitätsverlust; hohe Dateigröße). Bei PNG 24 wird halbtransparanz (auch Alphatransparenz genannt) unterstützt, die leider der Internet Explorer nicht darstellen kann.

Neuer Kommentar

Richten Sie generelle Fragen bitte ins Webdesign & Internet-Forum!








Webplain.de » Webdesign & Internet » Bildbearbeitung (Grundlagen)

Nach oben
© 2000-2010 Clemens Weiß | Webplain.de
Link zu dieser Seite | Letzte Änderung: 26. Okt. 2008