"Ein Bild sagt mehr als 1.000 Worte" - dies ist im Webdesign genauso -
wobei man aus mehreren Gründen den Einsatz von Grafiken nicht übertreiben sollte.
Da ein nicht unerheblicher Teil des verbrauchten Speicherplatz eines Webprojekts auf
Grafiken (bzw. Multimedia) fällt, ist mit dem Umgang von Grafiken hier besondere Sorgfalt geboten.
Nicht nur, weil man sonst eventuelle Quotas überschreitet, sondern auch weil diese Datenmenge zum User
transferiert werden muss - und im Web zählt vorallem eines -
speed.
Welches Grafikformat ist nun das beste Format für das Web?
Diese Frage kann man nicht einfach beantworten, da es immer auf den Verwendungszweck und den Bildinhalt
(Icon, Personenfoto, Produktgrafik, etc.) ankommt.
Die folgende Tabelle liefert in einer kompakten Art und Weise einen Überblick:
|
Dateiformat
|
Farbtiefe
|
Transparenz
|
Kompression / Beschreibung / Verwendungszweck
|
Animation
|
.jpg
.jpeg
|
24 Bit
16,7 Mio. Farben
|
nein
|
Kompression:
verlustbehaftete
Beschreibung:
JPEG steht für Joint Photographic Expert Group.
Bei der JPG-Kompression werden technisch gesehen je nach Kompressionsfaktor
mehr oder weniger Pixel aus dem Bild gelöscht und beim Laden durch einen
Algorithmus wieder berechnet.
Bei zu hohen Kompressionsfaktoren kommt es zur Artefaktbildung (Klötzcheneffekt).
Verwendungszweck:
JPEG wird bei Personenfotos, Produktfotos - die viele Farben und Einzelheiten
darstellen sollen - verwendet. |
nein
|
|
.gif
|
8 Bit
256 Farben
|
ja
|
Kompression:
verlustfreie
Beschreibung:
GIF steht für Graphics Interchange Format.
Die Besonderheit von GIF-Grafiken ist die Transparenz.
Eine Farbe kann man als "transparent" bestimmen, worauf sie dann im
konvertierten Bild nicht mehr aufscheint und der Hintergrund
(einer Webseite) durchscheint ("Stempeleffekt").
Verwendungszweck:
GIF wird besonders gerne bei Icons bzw. kleinen Animationen verwendet, wobei beide
nicht auf Farbvielfalt setzen. |
ja
|
|
.png
|
(PNG-8)
8 Bit
256 Farben
bzw.
(PNG-24)
24 Bit
16,7 Mio. Farben
|
Ja
|
Kompression:
verlustfreie
Beschreibung:
PNG bedeutet Portable Network Graphic
(ausgesprochen: PING).
Die Besonderheit von PNG ist, dass dieses Format die besten Eigenschaften
vom JPG bzw. GIF vereint - mit Ausnahme der Animation die nur dem
GIF-Dateiformat vorbehalten bleibt.
Einzig die noch nicht 100% Unterstützung einiger Webbrowser - bremsen
den definitiven Durchbruch von PNG.
Verwendungszweck:
Dort wo man mehr Farben als beim GIF-Format (256 Farben) einsetzen möchte und bei
gleichzeitiger Verwendung von Transparenz. Da PNG nicht so hoch wie JPG komprimieren kann
(ist logisch, da ja JPG verlustbehaftet komprimiert *g*) ist PNG bei größeren
Webgrafiken sicherlich nicht zu favorisieren.
|
nein
|
Welche »guten« Grafiktools gibt es nun?
-
Photoshop CS2 (Adobe) - »Die Referenz«
Photoshop ist schlichtweg die Referenz unter den Bildbearbeitungstools - aber mit Kosten von rund 900 Euro
leider auch relativ teuer...
Besonderheiten:
-
Bildaufbau/bearbeitung mit Ebenen
-
Sehr viele Filter und Plug-Ins
-
Unterstützung von Digitalkamera-Rohdaten (RAW-Format)
-
Stapelverarbeitung von Bildkorrekturen
Homepage:
http://www.adobe.com/de/products/photoshop
-
GIMP
GIMP steht für
GNU
Image
Manipulation
Program.
Da GIMP unter der
GNU General Public License erstellt wurde, ist der Einsatz
kostenlos
und die Software muss den Vergleich mit Photoshop (Adobe) nicht scheuen - ist also eine kostenschonende
Alternative zur »Referenz«

.
-
Paint.NET
Paint.Net ist ein
kostenloses Bildbearbeitungsprogramm
(Entwickelt von der Washington State University) welches wesentlich mächtiger ist als das
wahrscheinlich bekanntere Microsoft Paint welches immer mit Windows "mitkommt".
|
|
Besonderheiten:
-
kostenlos
-
History-Palette (Bearbeitungen Schritt für Schritt rückgängig machen)
-
Bildaufbau/bearbeitung mit Ebenen
Homepage:
http://www.getpaint.net
(Downloadgröße: ca. 1,6 MB)
Info:
Damit Paint.NET funktioniert benötigt man das ".NET Framework 2.0" von Microsoft.
Dieses bekommt man - sofern es noch nicht am System installiert ist - direkt bei
Microsoft (direkter Link).
|