Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dr. Web Team 18. September 2006

GIF, JPG oder PNG?

Kein Beitragsbild

Die richtige Auswahl des Grafik-Formats entscheidet maßgeblich über Qualität und Ladezeit. Wer hier auf das falsche Pferd setzt, kann dies später nicht mehr durch einen anderen Sattel korrigieren.

Anzeige

GIF
Das GIF-Format, für den Online-Dienst Compuserve entwickelt, ist im Laufe der Zeit zum Standard geworden. Es besteht aus maximal 256 Farben und eignet sich in erster Linie für Bilder, die nur geringe Farbtiefen aufweisen. Besonders gut lässt sich das GIF für Navigationselemente einsetzten. Eine GIF-Datei kann durch Farbreduzierung noch verkleinert werden.


GIF-Grafik 5kb


JPG-Grafik 15kb

Wegen der eingeschränkten Farbenzahl eignet sich das Format nicht für Fotos und Farbverläufe. In einem direktem Vergleich sieht man den Unterschied zwischen einem Foto im JPG und GIF-Format.

Im GIF-Format sind deutlich Farbverluste erkennbar. Farbverläufe sehen besonders unsauber aus. Dateigröße:11kb

Das gleiche Foto im JPG-Format kann sich sehen lassen, von der Qualität und der Dateigröße, die nur 6kb beträgt.

Das GIF-Format macht einige Besonderheiten möglich, die für das Web-Design besonders attraktiv sind: das Interlacing, die Farbtransparenz und die Animation.

Interlacing
Der Browser baut das Bild nach dem Laden gewöhnlich Zeile für Zeile auf. Je größer die Datei, desto länger dauert es, bis der Betrachter erkennen kann, was er gerade lädt. Das Interlacing hilft diesem Problem ab. Es baut zunächst ein Gesamtbild mit unscharfen Konturen auf, das zunehmend schärfer kontrastiert. Schon nach dem Runterladen der halben Datenmenge, ist das Bild sichtbar. Auf diese Weise kann der Surfer schon früh erahnen, was auf ihn zukommt und den Ladevorgang abbrechen, wenn er es möchte.

Transparenz
Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am Besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen „durchsichtig“ erscheinen und der Hintergrund schimmert durch. Wie das in der Praxis funktioniert, finden Sie im Artikel über die „Bildkomprimierung mit Fireworks3“.

Das animierte GIF
Animationen sind nichts Neues. Sicher haben Sie im Internet schon mal sich bewegende Pfeile gesehen. Dazu wird die GIF-Grafiken aus mehreren Einzel-Grafiken zusammensetzt, hintereinander gelegt und nach einer vorgegebenen Zeit gegeneinander ausgewechselt.

Das JPG-Format
Das JPG, auch JPEG (Joint Photographic Experts Group), kann bis zu 16,7 Millionen Farben darstellen. Anders als beim GIF, wird beim JPG durch Datenreduktion die Dateigröße verringert. Es wird nur bei Bildern verwendet, die mehr als 256 Farben enthalten. Farbreduzierung wie beim GIF ist hier aber nicht möglich.

PNG
Beim PNG (Portable Network Graphics) handelt es sich um ein schon altes, aber neu ins Spiel gebrachtes Grafikformat. Es vereint die Vorzüge vom GIF und JPG. PNG- Grafiken können mit bis zu 48-Bit-Farben abgespeichert und trotzdem verlustfrei komprimiert werden, und das mit einer Qualität von 16 Millionen Farben + 256 Transparenzstufen (GIF gibt nur bis zu 8 Bit wieder). Moderne Browser haben keine Probleme PNG-Grafiken in vollem Umfange darzustellen.

Das GIF Format konnte es bei der Komprimierung ohne nennenswerte Qualitätsverluste auf 2,8kb bringen.

Das JPG schneidet am schlechtesten ab. Mit einer Dateigröße von 5,3 kb und einem sichtbaren Qualitätsverlust verliert das JPG das Rennen.

Die PNG-Grafik ist mit dem Ergebnis des GIFs vergleichbar (Dateigröße 2,4). Fast die gleiche Dateigröße und ein zufriedenstellendes Ergebnis. Obige Beispiele zeigen, dass PNG dem GIF nahe kommt. Würde man das Beispiel mit einem Foto wiederholen, würde das GIF verlieren und das PNG mit dem JPG gleichziehen.

11 Kommentare

  1. Super Artikel, vor allem mit den Beispielen. Ich denke, eine pauschale Antwort, welches Format am besten geeignet ist, gibt es nicht. Wie im Artikel beschrieben hat jedes Format seine individuellen Eigenschaften und damit auch Vor- und Nachteile. Es hängt, denke ich auch davon ab, was genau in eine Website eingebunden werden soll. Bei Bilder bietet sich JPG an, beim Logo PNG, bei Bannern GIF und bei Icons am besten SVG.
    Ich habe dazu gerade eine Übersicht erstellt, welches Dateiformat man für welches grafische Element idealerweise benötigt. Vielleicht weiterführend noch ganz interessant: http://www.designenlassen.de/blog/2015/08/20/10-wichtige-dateiformate-die-checkliste-fuer-ihr-grafikdesign/

  2. Ich bin gerade am Optimieren unserer Startseite, da diese zu große Dateien hat. Ich werde ihren Vorschlag mal aufgreifen um die Ladezeit der Grafiken mal zu reduzieren. Ohne ihre Informationen wäre ich da nicht automatisch draufgekommen, da nur bei JPEG die Komprimierung mir bewusst war.
    Gruß

  3. ich muss einen Vortrag über PNG vorführen und ist mir gar nicht eingefallen in meinem Vortrag einen Vergleich mit den anderen Format zu machen, erst als ich dank Google auf Ihrem Artikel gestoßen habe :)
    danke dafür Sie haben mich schon irgendwie gerettet :)

  4. Hallo Walter Naas,

    wie mansch weiter oben bereits gepostet hat ist das Programm „Irfanview“ bestens zum öffnen von PNGs (und jeder Menge anderer Formate) geeignet!

    http://www.irfanview.de/

    Gruß
    DonPraeder

  5. Sehr geehrte Damen und Herren,

    Ich habe ein Problem, wie kann ich PNG öffnen, meine Grafikarte ist ok, wurde mir schon bilder zugesandt mit dem öffnen von PNG konnte sie einfach nicht öffen, Gif und JPG kein Problem, könnten sie mich mal aufklären mit dem PNG. Im voraus vielen dank für die Anfrage.

    MFG

    W.Naas

  6. Leute?
    ich hab ein Problem mit einer PNG Werbung, die bei jeder Seite auf Firefox auftaucht, wenn ich sie aufrufe.
    Sie lässt sich nur blocken, aber nicht löschen, also hab ich immer ein Feld im Bild, den ich nicht anklkicken kann =( Könnt ihr mir irgendwie helfen pls? =(

  7. IrfanView, ein sehr guter freier Bildbetrachter. Unterstützt neben PNG auch viele weitere Bildformate.

    http://www.irfanview.de/

  8. GIMP hilft bei fast allem.
    (außer Schnupfen)

    Nene, Spaß beiseite. Ist mir nur als erstes in den Sinn gekommen, damit lässt sich eine PNG Datei bestimmt öffnen.

  9. naja, zum angucken von bilder im PNG-format braucht man nichts besonders. einfach in den browser ziehen, das reicht.

    ob GIMP da ein guter rat ist? und dann noch aus dem chip klick-dschungel?

  10. Betreibe Windows XP SP3.Und Dateie mit *.*.png konnte ich nicht öffnen.Haben Sie welches Mittel um das Problem zu beseitigen?
    Wo event.könnte ich solcher Editor herunterladen?

    mfg
    T.Z.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.