In diesem Tutorial sollst du ein Überblick über die einzeln Web Bilddateien bekommen.
Was Wann Wo? Um diese Fragen dreht es sich in diesem Tutorial. Es wird dir erklärt wo sind die Vor- und Nachteile dieser Dateitypen.
Die 3 Webgrafiken im Überblick, normal sind es 4 die Photoshop könnte aber wir gehen mal davon aus das wir nur mit dem Standard arbeiten. Die vierte währe noch Flash aber ohne ein Plug in nicht anwendbar. Wir untersuchen die Formate GIF, JPEG und PNG.
Zeit für eine Tabelle:
|
GIF Graphics Interchange Format (Grafikaustausch-Format) |
PNG Portable Network Graphics (Portable Netzwerkgrafik) |
JPEG Joint Photographic Experts Group (Gemeinsame Fotografie Experten Gruppe) |
|
Entwickelt von Compuserve in den 80er Jahren. Ist es in der Lage verlustfreie Kompressionen (weniger Speicherplatz früher wichtiger als heute) für Bilder mit einer Farbtiefe von 256 abzuspeichern. Es lassen sich mehrere Bilder in einem Speichern, was dein Browser dann als Animation erkennt. |
Entwickelt in den späten 90er Jahren um das Angebot der vorhandenen Formate zu verbessern. Im 8-Bit Modus vergleich mit GIF, die Farbtiefe beträgt 256 bietet aber eine bessere Optionen Einstellung wie Transparenz etc.. 24-Bit ist zu vergleichen mit Jpeg, die Farbtiefe beträgt mehrere Millionen, im Gegensatz zu Jpeg lässt sich aber nicht die Qualität und somit der Speicherplatz verkleinern |
Entwickelt von Fotografen und Programmierer in den 90er Jahren. Bietet verlustbehaftete und verlustfreie Kompressionen an, verschiedene Farbtiefen in Millionen Höhe sowie sequenzielle oder progressive Modi abzuspeichern. Als Grundsatz gilt je kleiner die Datei, desto geringer die Qualität. |
Manche Transparenten Einstellungen im PNG Format können im Internet Explorer6 oder niedriger nicht angezeigt werden.
Stellen wir einen Vergleich für Webformate auf
- GIF oder PNG 8-Bit arbeiten am besten im Web wenn es um gestochen scharfe Bilder im 256 Farbraum bewegt auch Textkanten werden geschärft.
- JPEG auch Jpg genannt ist die beste Lösung für Fotos im Millionen Farbraum und geringen Speicherplatz bei wenigem Qualitätsverlust.
- GIF ist immer noch das Format der Wahl wenn es um Animationen geht (PNG ist immer noch nicht fähig Animationen zu erstellen) in manchen Flash Animationen wird aber Jpeg benutzt.
- PNG 24-Bit mehr Speicher Verbrauch als beim 8-Bit Format. Dafür ist der Farbraum aber auch in den Millionen Bereichen z.B. wenn Verläufe in deinem Bild sind sollt es deine erste Wahl sein.
- JPEG mit hoher Qualität Stufe speichert man zwar verlustfrei ab, doch der Speicherplatz ist höher. Und nicht jeder Internetnutzer verfügt über entsprechendes Breitbandgeschwindigkeit, was für einzelne lange Ladezeiten bedeuten würde.
Fazit: In der heutigen Zeit aktuell 2012 ist PNG 8 eine gute Wahl für einfachere Bilder mit schneller Ladezeit. JPEG ist die beste Wahl wenn es um Fotos mit hoher Qualität ohne Verluste geht. PNG 24 sollte deine Wahl sein wenn deine Grafik aufwendiger wird z.b. Verläufe. GIF ist deine Wahl wenn du eine Animation erstellen willst.
Der visuelle Vergleich
Es ist immer hilfreich sich die Begriffe “Verlustfrei“ „Verdichtung“ „Bild Qualität“ visuell darstellen zu lassen. Also nehme dir ein paar Bilder zur Hand und wende dein erlerntes an um die Unterschiede zu erkennen.
Diese Punkte sollten dabei berücksichtigt werden:
- Die meisten Monitore bieten keinen größeren Farbraum als 96Dpi und der Standard liegt sogar nur bei 72Dpi, was zu Problemen beim Druck führen kann. Für High End Monitore schau mal hier.
- Die Darstellung der Bilder wird auch durch dein System beeinflusst und sind Situationsabhängig z.B. durch Beleuchtung. Auf Windows ist die Darstellung dunkler als auf Mac.
- Fehler in Bildern bei verschiedenen Formaten in einem Zoom von 100% sind nicht so offensichtlich, als wenn sie gezoomt wird.
- Die Monitor Einstellungen unterscheiden sich von verschieden Modellen und sollten auf das System abgestimmt werden.
Fazit: Auch wenn bestimmte Einschränkungen vorhanden sind bei der visuellen Betrachtung, sollten sie aber kein Problem darstellen Fehler in Bildern zu erkennen.
JPEG Vor-und Nachteile
Hier mal zusammengefasst auf was zu achten ist.
Ein nachträgliches Heraufsetzen des Qualitätsfaktors vergrößert zwar den Speicherbedarf der Bilddatei, bringt aber verlorene Bildinformation nicht mehr zurück.
Viele Bildbearbeitungsprogramme lassen aber den Benutzer einen pauschalen Qualitätsfaktor zwischen 0 und 100 auswählen, der gemäß einer Formel in der vom JPEG-Komitee.
Auch bei Qualitätsfaktoren wie „100“ findet immer noch eine Quantisierung und damit ein, bei für JPEG ungeeigneten Bildern erheblicher, Qualitätsverlust statt.
Das Öffnen und anschließende Speichern einer JPEG-Datei führt zu einer neuen verlustbehafteten Kompression. Stattdessen werden Formate eingesetzt, die verlustfrei komprimieren, ungeachtet des großen Speicherbedarfs. Beispiele sind TIFF, BMP, TGA oder PNG.
Ein Nachfolger von JPEG zur Speicherung von Bildern ist JPEG 2000, das über eine bessere Kompression und viele sinnvolle Eigenschaften verfügt, sich aber zumindest bis jetzt nicht in breitem Maße durchsetzen konnte.
GIF Vor-und Nachteile
Hier mal zusammengefasst auf was zu achten ist.
Bei GIF sind die Farbinformationen in einer Farbpalette abgelegt. Diese kann bis zu 256 verschiedene Einträge enthalten. Die so entstandenen Farbstufen oder Dithering-Effekte sind besonders bei großen Bildern störend sichtbar.
Man kann die Fähigkeit von GIF, auch zum Speichern von Animationen nutzen. Dabei werden die Einzelbilder zeitverzögert nacheinander vom Webbrowser oder dem Bildbearbeitungsprogramm abgespielt. Somit der Hauptgrund zur Verwendung einer GIF Datei.
GIF-Bilder werden (trotz der Konkurrenz durch PNG) in großer Zahl, besonders für Banner und kleinere Bilder im Internet verwendet.
Für Fotografien im Web hingegen ist GIF nicht geeignet.
PNG Vor-und Nachteile
Hier mal zusammengefasst auf was zu achten ist.
PNG kann wie GIF aus einer Farbpalette mit bis zu 256 Einträgen 8-Bit verarbeiten. Darüber hinaus ist die Speicherung von 24-Bit möglich. Die Kompression von PNG ist meistens besser als bei GIF.
PNG-Dateien können Transparenzinformationen enthalten, entweder in Form eines Alphakanals oder für jede Farbe der Farbpalette.
Der Internet Explorer hat bis zur Version 6 Probleme mit der Darstellung von PNG-Dateien mit Alphakanal. Die neuesten Versionen der Browser Firefox, Safari und Opera sowie der Microsoft Internet Explorer ab der Version 7 unterstützen PNG jedoch weitgehend fehlerfrei.
Keine Möglichkeit zur Animation wie bei GIF.
Und damit sind wir am Ende der Einführung die Web Bilder Formate. Ich hoffe du verstehst den Sinn von den einzelnen Formaten nun besser und kannst sie gezielter einsetzen.
Über ein Feedback würde ich mich freuen.
 Gif, JPEG oder PNG?
v.1.0
|
|
Die PDF für das Tutorial in Photoshop/Grundlagen "Gif, JPEG oder PNG?" zum download. |
|
 Creative Commons   18.09.2014  Deutsch  Windows  150.66 KB  2 |
|