Menü

Downloadarea

Benutzer:  
Passwort:
  Zugangsdaten vergessen?

Foto der Woche

Riesenrad - Waggon 24
"Riesenrad - Waggon 24"

Webdesign - Grafiktools

Webdesign
"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« .

    Gimp

    screenshot vergrößern


    Besonderheiten:


    Homepage: http://www.gimp.org

    Download-Site: http://gimp-win.sourceforge.net
    (Downloadgröße: ca. 16,5 MB)
  • 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".

    Paint.NET screenshot vergrößern
    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).