it-swarm.com.de

Was sind die verschiedenen Anwendungsfälle von PNG vs. GIF vs. JPEG vs. SVG?

Wann sollten bestimmte Bilddateitypen verwendet werden, wenn Websites oder Schnittstellen erstellt werden?

Was sind ihre Stärken und Schwächen?

Ich weiß, dass PNG & GIF verlustfrei sind, während JPEG verlustbehaftet ist.
Aber was ist der Hauptunterschied zwischen PNG & GIF?
Warum sollte ich eins bevorzugen? Was ist SVG und wann sollte ich es verwenden?

Wenn Sie sich nicht um jedes Pixel kümmern, sollten Sie immer JPEG verwenden, da es das "leichteste" ist?

540
Faruz

Sie sollten einige wichtige Faktoren kennen ... 

Erstens gibt es zwei Arten der Komprimierung: Lossless und Lossy

  • Lossless bedeutet, dass das Bild verkleinert wird, jedoch die Qualität nicht beeinträchtigt wird. 
  • Lossy bedeutet, dass das Bild (noch) kleiner gemacht wird, jedoch zu Lasten der Qualität. Wenn Sie ein Bild immer wieder in einem verlustbehafteten Format speichern, wird die Bildqualität immer schlechter.

Es gibt auch unterschiedliche Farbtiefen (Paletten): Indizierte Farbe und Direkt Farbe

  • Indiziert bedeutet, dass das Bild nur eine begrenzte Anzahl von Farben (normalerweise 256) speichern kann, die vom Autor gesteuert werden, in einer so genannten Color Map
  • Direct bedeutet, dass Sie viele tausende Farben speichern können, die nicht direkt vom Autor ausgewählt wurden

BMP - verlustfrei/indiziert und direkt 

Dies ist ein altes Format. Es ist verlustfrei (beim Speichern gehen keine Bilddaten verloren), aber es gibt auch wenig bis keine Komprimierung, was bedeutet, dass das Speichern als BMP sehr große Dateigrößen ergibt. Es kann Paletten sowohl mit Index als auch mit Direkt enthalten, aber das ist ein kleiner Trost. Die Dateigrößen sind so unnötig groß, dass niemand dieses Format jemals wirklich verwendet.

Gut für: Nichts wirklich. Es gibt nichts, was BMP von anderen Formaten hervorhebt oder besser ist.

BMP vs GIF


GIF - Nur verlustfrei/nur indexiert 

GIF verwendet eine verlustfreie Komprimierung, was bedeutet, dass Sie das Bild immer wieder speichern können und niemals Daten verlieren. Die Dateigrößen sind viel kleiner als bei BMP, da tatsächlich eine gute Komprimierung verwendet wird, jedoch nur eine indizierte Palette gespeichert werden kann. Dies bedeutet, dass für die meisten Anwendungsfälle nur maximal 256 verschiedene Farben in der Datei vorhanden sein können. Das hört sich nach einer kleinen Menge an und ist es auch.

GIF-Bilder können auch animiert und transparent sein.

Gut für: Logos, Strichzeichnungen und andere einfache Bilder, die klein sein müssen. Nur wirklich für Websites verwendet.

GIF vs JPEG


JPEG - Verlust/Direkt 

JPEG-Bilder wurden entwickelt, um detaillierte fotografische Bilder so klein wie möglich zu machen, indem Informationen entfernt werden, die das menschliche Auge nicht bemerkt. Infolgedessen handelt es sich um ein Lossy-Format. Wenn Sie die gleiche Datei immer wieder speichern, gehen mit der Zeit mehr Daten verloren. Es hat eine Palette von Tausenden von Farben und eignet sich daher hervorragend für Fotos, aber die verlustbehaftete Komprimierung bedeutet, dass es für Logos und Strichzeichnungen schlecht ist: Sie sehen nicht nur unscharf aus, sondern diese Bilder haben auch eine größere Dateigröße als GIFs!

Gut für: Fotografien. Auch Steigungen.

JPEG vs GIF


PNG-8 - verlustfrei/indiziert 

PNG ist ein neueres Format, und PNG-8 (die indizierte Version von PNG) ist ein guter Ersatz für GIFs. Leider hat es jedoch einige Nachteile: Erstens kann es keine Animationen unterstützen, wie es GIF kann (gut möglich, aber nur Firefox scheint dies zu unterstützen, im Gegensatz zu GIF-Animationen, die von jedem Browser unterstützt werden). Zweitens gibt es einige Supportprobleme mit älteren Browsern wie IE6. Drittens haben wichtige Programme wie Photoshop eine sehr schlechte Implementierung des Formats. (Verdammt noch mal, Adobe!) PNG-8 kann nur 256 Farben wie GIFs speichern.

Gut für: Die Hauptsache, die PNG-8 besser macht als GIFs, ist die Unterstützung von Alpha Transparency.

PNG-8 vs GIF


PNG-24 - Verlustfrei/Direkt

PNG-24 ist ein großartiges Format, das verlustfreie Kodierung mit direkter Farbe kombiniert (Tausende von Farben wie bei JPEG). In dieser Hinsicht ist es BMP sehr ähnlich, mit der Ausnahme, dass PNG Bilder tatsächlich komprimiert, was zu sehr viel kleineren Dateien führt. Leider sind PNG-24-Dateien immer noch größer als JPEGs (für Fotos) und GIFs/PNG-8s (für Logos und Grafiken). Sie müssen also immer noch überlegen, ob Sie eine solche Datei wirklich verwenden möchten.

Obwohl PNG-24s während der Komprimierung Tausende von Farben zulassen, sollen sie JPEG-Bilder nicht ersetzen. Ein als PNG-24 gespeichertes Foto ist wahrscheinlich mindestens fünfmal so groß wie ein gleichwertiges JPEG-Bild, wobei die sichtbare Qualität nur geringfügig verbessert wird. (Dies kann natürlich ein wünschenswertes Ergebnis sein, wenn Sie sich nicht um die Dateigröße kümmern und die bestmögliche Bildqualität erhalten möchten.)

Genau wie PNG-8 unterstützt auch PNG-24 Alpha-Transparenz.


SVG - Verlustfrei/Vektor

Ein Dateityp, der derzeit an Popularität gewinnt, ist SVG. Dies unterscheidet sich von allen anderen darin, dass es sich um ein Vektor Dateiformat handelt (die oben genannten sind alle raster ). Das heißt, es besteht eigentlich aus Linien und Kurven statt aus Pixeln. Wenn Sie ein Vektorbild vergrößern, sehen Sie immer noch eine Kurve oder eine Linie. Wenn Sie ein Rasterbild vergrößern, werden Pixel angezeigt.

Zum Beispiel:

 PNG vs SVG

 SVG vs PNG

Das bedeutet, dass SVG ideal für Logos und Symbole ist, die auf Retina-Bildschirmen oder in verschiedenen Größen scharf bleiben sollen. Dies bedeutet auch, dass ein kleines SVG-Logo in einer viel größeren (größeren) Größe verwendet werden kann, ohne dass die Bildqualität beeinträchtigt wird. Dies würde eine separate Datei (im Hinblick auf die Dateigröße) mit Rasterformaten erfordern.SVG-Dateien sind oft klein, auch wenn sie optisch sehr groß sind, was großartig ist. Es ist jedoch zu beachten, dass es von der Komplexität der verwendeten Formen abhängt. SVGs erfordern mehr Rechenleistung als Rasterbilder, da beim Zeichnen der Kurven und Linien mathematische Berechnungen erforderlich sind. Wenn Ihr Logo besonders kompliziert ist, kann dies den Computer eines Benutzers verlangsamen und sogar eine sehr große Datei haben. Es ist wichtig, dass Sie Ihre Vektorformen so weit wie möglich vereinfachen.

Darüber hinaus werden SVG-Dateien in XML geschrieben und können daher in einem Texteditor (!) Geöffnet und bearbeitet werden. Dies bedeutet, dass seine Werte im Handumdrehen geändert werden können. Sie können beispielsweise JavaScript verwenden, um die Farbe eines SVG-Symbols auf einer Website zu ändern, ähnlich wie bei Text (z. B. kein zweites Bild erforderlich) oder sogar animiert.

Sie eignen sich am besten für einfache flache Formen wie Logos oder Grafiken.

Ich hoffe das hilft!.

I hope that helps!

1338
Chuck Le Butt

JPEG ist nicht das hellste Bild für alle Arten von Bildern (oder sogar für die meisten). Ecken und gerade Linien sowie einfache "Füllungen" (Volltonblöcke) erscheinen je nach Komprimierungsgrad verschwommen oder weisen Artefakte auf. Es ist ein verlustbehaftetes Format und eignet sich am besten für Fotos, bei denen Artefakte nicht deutlich sichtbar sind. Gerade Linien (wie Zeichnungen und Comics usw.) werden in PNG sehr gut komprimiert und es ist verlustfrei. GIF sollte nur verwendet werden, wenn Transparenz in IE6 oder Animationen verwendet werden soll. GIF unterstützt nur 256-Farbpaletten, ist aber auch verlustfrei.

Im Grunde gibt es hier eine Möglichkeit, das Bildformat zu bestimmen:

  • GIF, wenn Animation oder Transparenz erforderlich ist, die auf IE6 funktioniert (Hinweis: PNG-Transparenz funktioniert nach IE6)
  • JPEG, wenn das Bild ein Foto ist. 
  • PNG, wenn gerade Linien wie in einer Comic- oder anderen Zeichnung oder wenn ein breiter Farbbereich mit Transparenz benötigt wird (und IE6 ist kein Faktor)

Wenn Sie sich nicht sicher sind, welche Qualifikation für Sie in Frage kommt, probieren Sie jedes Format mit unterschiedlichen Kompressionsverhältnissen aus, und wägen Sie die Qualität und Größe des Bildes ab. Ich gebe nur Daumenregeln.

47
Earlz

Normalerweise gehe ich mit PNG, da es gegenüber GIF einige Vorteile zu haben scheint. Früher gab es Patentbeschränkungen für GIF, die jedoch abgelaufen sind.

GIFs eignen sich für scharfkantige Strichzeichnungen (z. B. Logos) mit einer begrenzten Anzahl von Farben. Dies nutzt die verlustfreie Komprimierung des Formats, die flache Bereiche mit gleichmäßigen Farben mit gut definierten Rändern bevorzugt (im Gegensatz zu JPEG, die weiche Farbverläufe und weichere Bilder bevorzugen).

GIFs können für kleine Animationen und Filmclips mit niedriger Auflösung verwendet werden.

In Anbetracht der allgemeinen Beschränkung der GIF-Bildpalette auf 256 Farben wird sie normalerweise nicht als Format für die digitale Fotografie verwendet. Digitalfotografen verwenden Bilddateiformate, die eine größere Farbpalette wiedergeben können, beispielsweise TIFF, RAW oder das verlustbehaftete JPEG-Format, das sich zum Komprimieren von Fotos eignet.

Das PNG-Format ist eine beliebte Alternative zu GIF-Bildern, da es bessere Komprimierungsverfahren verwendet und keine Beschränkung auf 256 Farben hat. PNGs unterstützen jedoch keine Animationen. Die von PNG abgeleiteten MNG- und APNG-Formate unterstützen Animationen, werden jedoch nicht häufig verwendet.

7
David Bridges

JPEG hat schlechte Qualität um scharfe Kanten usw. und ist daher für die meisten Webgrafiken ungeeignet. Es zeichnet sich durch Fotos aus.

Im Vergleich zu GIF bietet PNG eine bessere Komprimierung, größere Palette und mehr Funktionen, einschließlich Transparenz. Und es ist verlustfrei.

5
Konrad Garus

GIF ist auf 256 Farben beschränkt und unterstützt keine echte Transparenz. Sie sollten PNG anstelle von GIF verwenden, da es eine bessere Komprimierung und Funktionen bietet. PNG eignet sich hervorragend für kleine und einfache Bilder wie Logos, Symbole usw.

JPEG hat eine bessere Komprimierung bei komplexen Bildern wie Fotos.

5
Desintegr

png hat eine breitere Farbpalette als gif und gif ist nicht normal. gif kann animationen machen, was normal-png nicht kann. png -transparenz wird nur von Browsern unterstützt, die etwas jünger als IE6 sind. Für dieses Problem gibt es jedoch eine Javascript-Korrektur. Beide unterstützen Alpha-Transparenz. Im Allgemeinen würde ich sagen, dass Sie png für die meisten Webgrafiken verwenden sollten, während Sie jpeg für Fotos, Screenshots oder ähnliches verwenden, da die png-Komprimierung nicht gut funktioniert.

3
HalloDu

GIF basiert auf einer Palette von 256 Farben pro Bild (zumindest in der grundlegenden Inkarnation). PNG kann "TrueColour", d. H. 16,7 Millionen Farben, aus der Schachtel heraus. Verlustfreies PNG komprimiert besser als verlustfreie GIFs. GIF kann "binäre" Transparenz ausführen (0% Deckkraft oder 100% Deckkraft). PNG kann Alpha-Folien verarbeiten. 

Alles in allem ist PNG wahrscheinlich die bessere Wahl, wenn Sie keine pixeltransparenten Bilder verwenden und IE6 unterstützen müssen. JPG ist für Fotos unschlagbar.

3
Pekka 웃

Es gibt einen Hack, mit dem GIF-Bilder verwendet werden können, um echte Farben darzustellen. Man kann eine GIF-Animation mit 256 farbpalettierten Bildern mit einer Verzögerung von 0 Bildern vorbereiten und die Animation so einstellen, dass sie nur einmal angezeigt wird. So können alle Frames gleichzeitig angezeigt werden. Am Ende wird ein echtfarbiges GIF-Bild gerendert.

Viele Software ist in der Lage, solche GIF-Bilder zu erstellen. Die Ausgabedatei ist jedoch größer als eine PNG-Datei. Es muss verwendet werden, wenn es wirklich notwendig ist.

3
MT San

Der Hauptunterschied ist, dass GIF patentiert ist und etwas mehr Unterstützung bietet. PNG ist eine offene Spezifikation und Alpha-Transparenz wird in IE6 nicht unterstützt. Der Support wurde im IE7 verbessert, aber nicht vollständig behoben.

In Bezug auf die Dateigrößen hat GIF eine kleinere Standardfarbpalette, daher sind sie auf den ersten Blick tendenziell kleiner. PNG-Dateien haben eine größere Standardpalette. Sie können jedoch ihre Farbpalette verkleinern, sodass sie zu einer geringeren Dateigröße als GIF führen. Das Problem ist wiederum, dass diese Funktion in Internet Explorer nicht so unterstützt wird.

Da PNGs Alpha-Transparenz unterstützen, sind sie auch die einzige Option, wenn Sie eine andere Transparenzvariation als die binäre Transparenz wünschen.

1
Dan Herbert

GIF verfügt über eine 8-Bit-Palette (256 Farben), bei der PNG als Farbpalette mit bis zu 24 Bit verwendet wird. PNG kann also mehr Farbe unterstützen und der Algorithmus unterstützt natürlich die Komprimierung

0
Abdul Munim

Wenn Sie sich für JPEG entscheiden und mit Bildern für eine Website zu tun haben, sollten Sie den Google Guetzli Perceptual-Encoder in Betracht ziehen, der frei verfügbar ist. Nach meiner Erfahrung erzeugt Guetzli bei fester Qualität kleinere Dateien als Standard-JPEG-Codierungsbibliotheken, wobei die volle Kompatibilität mit dem JPEG-Standard erhalten bleibt (Ihre Bilder werden also die gleiche Kompatibilität wie herkömmliche JPEG-Bilder haben).

Der einzige Nachteil ist, dass Guetzli lot Zeit braucht, um zu codieren. Dies geschieht jedoch nur einmal, wenn Sie das Bild für die Website vorbereiten, während der Nutzen für immer bleibt! Das Herunterladen kleinerer Bilder dauert weniger Zeit, sodass die Geschwindigkeit Ihrer Website im täglichen Gebrauch steigt.

0
Marco Fontani

Seit 2018 gibt es mehrere neue Formate, bessere Unterstützung für vorherige Formate und einige clevere Hacks bei der Verwendung von Videos anstelle von Bildern. 

Für Fotos 

jpg - immer noch das am häufigsten unterstützte Bildformat.

webp - Neues Format von Google. Gutes Potenzial, obwohl der Browser Unterstützung nicht großartig ist.

Für Symbole und Grafiken

svg - wann immer es möglich ist. Es eignet sich gut für Retina-Bildschirme, kann in Texteditoren bearbeitet und über JS/CSS angepasst werden, wenn es in DOM geladen wird.

png - wenn es sich um Rastergrafiken handelt (dh wenn in Photoshop erstellt). Unterstützt die Transparenz, die in diesem Anwendungsfall sehr wichtig ist.

Für Animationen

svg - plus CSS-Animationen für Vektorgrafiken. Alle Vorteile von SVG + Power von CSS-Animationen.

gif - immer noch das am häufigsten unterstützte Format für animierte Bilder.

mp4 - wenn animierte Bilder eigentlich kurze Videoclips sind. Twitter /Whatsapp konvertiert Gifs in mp4.

apng - anständiger Browser Unterstützung (d. h. kein IE, Edge), das Erstellen ist jedoch nicht so einfach wie bei GIFs.

webp - nahe an der Verwendung von mp4. Schlechter Unterstützung

Dies ist ein Nizza Vergleich verschiedener animierter Bildformate.

Unabhängig davon, um welches Format es sich handelt, vergewissern Sie sich, dass Sie es optimieren. Für jedes Format gibt es Tools (z. B. SVGO, Guetzli, OptiPNG usw.), die erhebliche Bandbreite einsparen können.

0
aarjithn