Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » (Kostenlose) Services » GIF, JPG oder PNG?

GIF, JPG oder PNG?

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. GIF Das GIF-Format, für den Online-Dienst Compuserve entwickelt,...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 11 Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 18. September 2006
Bookmarke mich
Share on pocket

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.

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

BIZ Digital Marketing

Nürtingen

Niels Neumann Online Marketing

Limburgerhof

Homepage & Design Heroes GmbH

Balingen

wolpersweb.de Webdesign & SEO

Düsseldorf

HELD Werbeagentur

Traunstein

Alle Agenturpartner

Jobs

Webdesigner – Vollzeit

Remote

Junior Webdesigner/ Mediengestalter

Innsbruck

Cloud Engineer Container & Kubernetes

Karlsruhe

Web Development & Project Management

Remote

Projektmanager – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Social Media: 8 handverlesene Bilder-Tools

Im Allgemeinen erreicht man durch die Verwendung von Bildern in Social-Media-Beiträgen mehr, als wenn man nur Text posten würde. Experimente haben gezeigt, dass man mit bebilderten

 →   

Design mit Spark, Canva, Crello: So erstellst du perfekte Bilder für deine Website

Es ist schon erstaunlich, aber wahr. Für die Erstellung plakativer Bildkompositionen für deine sozialen Medien, deine Website und sogar deine sonstigen Kommunikationsmittel musst du nicht

 →   

Stock-Videos kostenlos: Tausende Filme für deine Designs

Wir haben zwanzig der besten kostenlosen (und fast kostenlosen) Anbieter von Stock-Videos im folgenden Beitrag gesammelt: Vor wenigen Jahren noch undenkbar, findest du heutzutage eine

 →   

11 Antworten zu „GIF, JPG oder PNG?“
— was ist Deine Meinung?

  1. Vanessa sagt:
    21. August 2015 um 11:12 Uhr

    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/

    Antworten
  2. Thomas B. sagt:
    24. September 2013 um 14:40 Uhr

    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ß

    Antworten
  3. laura sagt:
    13. Juli 2013 um 2:46 Uhr

    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 🙂

    Antworten
  4. DonPraeder sagt:
    9. Februar 2010 um 22:06 Uhr

    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

    Antworten
  5. Walter Naas sagt:
    8. Februar 2010 um 14:14 Uhr

    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

    Antworten
  6. Alex sagt:
    27. Juni 2009 um 15:05 Uhr

    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? =(

    Antworten
  7. mansch sagt:
    30. Dezember 2008 um 15:54 Uhr

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

    http://www.irfanview.de/

    Antworten
  8. troublemakerXL sagt:
    8. Dezember 2008 um 9:46 Uhr

    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.

    Antworten
  9. Sven Lennartz sagt:
    4. Dezember 2008 um 11:33 Uhr

    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?

    Antworten
  10. troublemakerXL sagt:
    4. Dezember 2008 um 10:36 Uhr

    http://www.chip.de/downloads/GIMP_12992070.html

    Antworten
  11. Tadeusz Zalasik sagt:
    4. Dezember 2008 um 8:18 Uhr

    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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.