art-d-sign
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Grundlagen > Grafikformate

Grafikformate

Die Welt der Grafik hat für das Web verschiedene Grafikformate vorgesehen. Einen Überblick sollen euch diese Grundlagen verschaffen.

Im Internet sind nur wenige Grafikformate sinnvoll nutzbar.
Kleine Dateigröße und damit schnelle Ladezeit der Website sind für Internet-Grafiken sehr wichtig. Und alle auf dem Markt befindlichen Browser müssen mit dem verwendeten Grafikformat umgehen können.

Für Pixelgrafiken erfüllen drei Datei-Formate diese Voraussetzungen: gif, jpg und png:

GIF:

Das älteste Format im Web ist gif (Grafic Interchange Format), welches schon 1987 im Auftrag des Onlinedienstes Compuserve entwickelt wurde. Das gif-Format eignet sich hervorragend zum Komprimieren von Grafiken mit wenigen Farben und zusammenhängenden Farbflächen (z.B. Logos, Buttons u.ä.)

Weitere Vorteile des gif-Formats: Es kann eine beliebige Farbe der Ausgangsgrafik als transparent definiert werden. Das Ergebnis ist dann z.B. ein freigestelltes Bild, welches problemlos auf jedem Hintergrund, auch mit Farbverläufen, platziert werden kann. Diese Variante des gif-Formats heißt korrekt "gif89a".

Außerdem können gif-Bilder im "Interlaced"-Modus gespeichert werden. Ergebnis beim Betrachter mit seinem Browser ist: Das Bild baut sich stufenweise von grob bis fein auf. Subjektiv hat der Betrachter das Gefühl des schnelleren Ladens, da er die Grafik schon frühzeitig erkennen kann, objektiv ist die Datei aber sogar etwas größer, aber nur wenige Bytes.

Auch die beliebten animierten Grafiken im Web sind gif-Dateien (animated gif). Diese können z.B. mit Macromedia Fireworks, Adobe Image Ready (im Lieferumfang von Photoshop seit Vers. 5.5) und vielen speziellen Free- und Shareware "Gif-Animations-Programmen" erstellt werden.

Der große Nachteil des gif-Formats liegt in seiner Farbbeschränkung: Es können maximal 256 Farben je Grafik gespeichert werden. Damit ist es für alle Bilder mit Farbverläufen, z.B. Fotos, untauglich.

PNG:

(gesprochen "ping") steht für "Portable Network Graphics" und ist die Alternative und Nachfolger des gif. Dieses Format kann 16,7 Mio Farben darstellen, komprimiert sehr gut und verlustfrei und ist im Gegensatz zu gif für die Softwarehersteller ohne Lizenzgebühren implementierbar.

Auch mit dem png-Format lässt sich wie beim gif eine Transparenz einstellen. Im Gegensatz zum gif-Format sogar "auslaufend" von Teil-Transparenz auf komplette Transparenz. Leider kann der allseits beliebte Internet-Explorer einer großen amerikanischen Software-Firma png-Bilder mit Transparenz bis einschließlich der Version IE 6 immer noch nicht korrekt darstellen. Deswegen muss man leider von der Verwendung von png-Grafiken mit Transparenz im Web nach wie vor abraten. Der IE 7 versteht dann endlich auch transparente png, Netscape-Browser kommen schon seit Vers. 4.0 (von 1996!) mit diesem Format klar, alle anderen Browser (Opera, Firefox, Safari ...) auch.

JPEG oder JPG:

Das jpg-Format (Joint Photographic Experts Group) ist der "Allrounder": Dieses Format kommt zum Einsatz, wenn es sich um Bilder mit vielen Farben handelt, also grundsätzlich für Fotos und für alle Grafiken mit Farbverläufen. Da jpg immer mit 16,7 Mio. Farben speichert, können mit diesem Format solche Bilder am besten dargestellt werden.

Ähnlich wie der interlaced-Modus beim gif-Format funktionieren die "progressiven JPEG-Grafiken": es wird erst eine undeutliche Fassung des Bildes im Browser angezeigt, die Details werden nach und nach sichtbar.

Kleine Beispiele zu den Formaten:

Ein Logo mit wenigen Farben:
  • Abbildung 1: jpg-Format mit 40% Qualität ist bei schlechter Qualität 4,4 kb groß tooltipp
  • Abbildung 2: gif-Format mit 6 Farben, beste Qualität und nur 1,6 kb groß tooltipp
Umgekehrt das Ergebnis mit folgendem Bild mit vielen Farbverläufen:
  • Abbildung 3:
    jpg-Format mit 60% Qualität ist bei guter Qualität 10,5 kb groß tooltipp
  • Abbildung 4:
    gif-Format trotz 256 Farben, schlechte Qualität und 18,7 kb groß tooltipp

Zum Vergleich das gleiche Bild als 6-Farben-gif: tooltipp


Du siehst:
Das optimale Web-Grafik-Format gibt es nicht sondern ist vom Ausgangsbild abhängig!

 

Autor: (tw)

Abbildungen

Abbildung 1 - jpg-Format mit 40% Qualität ist bei schlechter Qualität 4,4 kb groß

Abbildung 1 - jpg-Format mit 40% Qualität ist bei schlechter Qualität 4,4 kb groß

Abbildung 2 - gif-Format mit 6 Farben, beste Qualität und nur 1,6 kb groß

Abbildung 2 - gif-Format mit 6 Farben, beste Qualität und nur 1,6 kb groß

Abbildung 3 - jpg-Format mit 60% Qualität ist bei guter Qualität 10,5 kb groß

Abbildung 3 - jpg-Format mit 60% Qualität ist bei guter Qualität 10,5 kb groß

Abbildung 4 - gif-Format trotz 256 Farben, schlechte Qualität und 18,7 kb groß

Abbildung 4 - gif-Format trotz 256 Farben, schlechte Qualität und 18,7 kb groß

Abbildung 5 - 6-Farben-gif

Abbildung 5 - 6-Farben-gif

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping


Ferienwohnungen
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /