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

Wann sollten bestimmte Bilddateitypen beim Erstellen von Websites oder Schnittstellen usw. verwendet 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 und GIF?
Warum sollte ich eins dem anderen vorziehen? Was ist SVG und wann soll ich es verwenden?

Wenn Sie sich nicht für jedes Pixel interessieren, sollten Sie immer JPEG verwenden, da es das "leichteste" ist?

Sie sollten sich einiger Schlüsselfaktoren bewusst sein ...

Erstens gibt es zwei Arten von Kompression: Lossless und Lossy .

• Verlustfrei bedeutet, dass das Bild kleiner gemacht wird, ohne die Qualität zu beeinträchtigen.
• Verlust bedeutet, dass das Bild (noch) kleiner gemacht wird, jedoch die Qualität beeinträchtigt. Wenn Sie ein Bild immer wieder in einem verlustbehafteten Format speichern, wird die Bildqualität immer schlechter.

Es gibt auch verschiedene Farbtiefen (Paletten): Indizierte Farbe und Direkte Farbe .

• Indiziert bedeutet, dass das Bild nur eine begrenzte Anzahl von Farben (normalerweise 256), die vom Autor gesteuert werden, in einer sogenannten Farbkarte speichern kann
• Direkt bedeutet, dass Sie viele tausend 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 gar keine Komprimierung, was bedeutet, dass das Speichern als BMP zu SEHR großen Dateien führt. Es kann sowohl indizierte als auch direkte Paletten 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 auszeichnet oder was andere Formate nicht besser machen.

GIF - Nur verlustfrei / indiziert

GIF verwendet verlustfreie Komprimierung, dh Sie können das Bild immer wieder speichern und verlieren niemals Daten. Die Dateigrößen sind viel kleiner als bei BMP, da tatsächlich eine gute Komprimierung verwendet wird, aber nur eine indizierte Palette gespeichert werden kann. Dies bedeutet, dass in den meisten Anwendungsfällen maximal 256 verschiedene Farben in der Datei enthalten sein können. Das klingt nach einer ziemlich kleinen Menge, und das ist es auch.

GIF-Bilder können auch animiert werden und sind transparent.

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

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 verlustbehaftetes Format. Wenn Sie dieselbe Datei immer wieder speichern, gehen im Laufe der Zeit mehr Daten verloren. Es hat eine Palette von Tausenden von Farben und eignet sich daher hervorragend für Fotos. Die verlustbehaftete Komprimierung bedeutet jedoch, dass es für Logos und Strichzeichnungen schlecht ist: Sie sehen nicht nur unscharf aus, sondern haben auch eine größere Dateigröße als GIFs!

Gut für: Fotografien. Auch Farbverläufe.

PNG-8 - Verlustfrei / Indiziert

PNG ist ein neueres Format, und PNG-8 (die indizierte Version von PNG) ist wirklich ein guter Ersatz für GIFs. Leider hat es jedoch einige Nachteile: Erstens kann es keine Animation wie GIF unterstützen (gut, aber nur Firefox scheint es zu unterstützen, im Gegensatz zu GIF-Animationen, die von jedem Browser unterstützt werden). Zweitens gibt es einige Support-Probleme mit älteren Browsern wie IE6. Drittens haben wichtige Software wie Photoshop eine sehr schlechte Implementierung des Formats. (Verdammt, 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-24 - Verlustfrei / Direkt

PNG-24 ist ein großartiges Format, das verlustfreie Codierung mit direkter Farbe kombiniert (Tausende von Farben, genau wie JPEG). In dieser Hinsicht ist es BMP sehr ähnlich, außer dass PNG tatsächlich Bilder komprimiert, was zu 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 wirklich eine verwenden möchten.

Obwohl PNG-24 bei Komprimierung Tausende von Farben zulassen, sollen sie JPEG-Bilder nicht ersetzen. Ein als PNG-24 gespeichertes Foto ist wahrscheinlich mindestens fünfmal größer als ein gleichwertiges JPEG-Bild, wobei die sichtbare Qualität kaum verbessert wird. (Dies kann natürlich ein wünschenswertes Ergebnis sein, wenn Sie sich keine Gedanken über die Dateigröße machen und das bestmögliche Bild erhalten möchten.)

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

SVG - Verlustfrei / Vektor

Ein Dateityp, der derzeit immer beliebter wird, ist SVG, der sich von allen oben genannten darin unterscheidet, dass es sich um ein Vektordateiformat handelt (die oben genannten sind alle Raster ). Dies bedeutet, dass es tatsächlich aus Linien und Kurven anstelle von Pixeln besteht. 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:

Dies bedeutet, dass SVG perfekt für Logos und Symbole geeignet 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 die Bildqualität zu beeinträchtigen. Dies würde eine separate größere Datei (in Bezug auf die Dateigröße) mit Rasterformaten erfordern.

SVG-Dateigrößen sind oft winzig, auch wenn sie optisch sehr groß sind, was großartig ist. Es ist jedoch zu beachten, dass dies 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 es 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 sind SVG-Dateien in XML geschrieben und können daher in einem Texteditor (!) Geöffnet und bearbeitet werden. Dies bedeutet, dass seine Werte im laufenden Betrieb manipuliert werden können. Sie können beispielsweise JavaScript verwenden, um die Farbe eines SVG-Symbols auf einer Website zu ändern, ähnlich wie Sie Text verwenden würden (dh kein zweites Bild benötigen) oder sie sogar zu animieren.

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

Ich hoffe das hilft!

JPEG ist nicht das leichteste für alle Arten von Bildern (oder sogar die meisten). Ecken und gerade Linien sowie einfache "Füllungen" (einfarbige Blöcke) erscheinen je nach Komprimierungsstufe verschwommen oder weisen Artefakte auf. Es ist ein verlustbehaftetes Format und eignet sich am besten für Fotos, bei denen Sie Artefakte nicht klar erkennen können. Gerade Linien (wie in Zeichnungen und Comics usw.) werden in PNG sehr gut komprimiert und sind verlustfrei. GIF sollte nur verwendet werden, wenn Transparenz in IE6 oder Animation gewünscht wird. GIF unterstützt nur eine Palette mit 256 Farben, ist aber auch verlustfrei.

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

• GIF, wenn Animation oder Transparenz für IE6 erforderlich sind (Hinweis: PNG-Transparenz funktioniert nach IE6)
• JPEG, wenn das Bild ein Foto ist.
• PNG, wenn gerade Linien wie in einem Comic oder einer anderen Zeichnung oder wenn ein großer Farbbereich mit Transparenz benötigt wird (und IE6 kein Faktor ist)

Wenn Sie sich nicht sicher sind, was sich qualifizieren würde, probieren Sie jedes Format mit unterschiedlichen Komprimierungsverhältnissen aus, wägen Sie die Qualität und Größe des Bildes ab und wählen Sie das aus, das Ihrer Meinung nach am besten ist. Ich gebe nur Faustregeln.

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

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 einheitlicher Farbe mit genau definierten Kanten bevorzugt (im Gegensatz zu JPEG, das glatte Farbverläufe und weichere Bilder bevorzugt).

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

Angesichts 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, mit denen eine größere Farbpalette reproduziert werden kann, z. B. TIFF, RAW oder das verlustbehaftete JPEG, das sich besser zum Komprimieren von Fotos eignet.

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

JPEG hat eine schlechte Qualität an scharfen Kanten usw. und ist daher für die meisten Webgrafiken ungeeignet. Es zeichnet sich durch Fotografien aus.

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

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 bessere 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.

Es gibt einen Hack, mit dem GIF-Bilder verwendet werden können, um die wahre Farbe anzuzeigen. Man kann eine GIF-Animation mit 256 farbigen Paletten mit 0 Bildverzögerung vorbereiten und die Animation so einstellen, dass sie nur einmal angezeigt wird. Es können also alle Frames gleichzeitig angezeigt werden. Am Ende wird ein echtes GIF-Bild gerendert.

Viele Softwareprogramme können solche GIF-Bilder erstellen. Die Ausgabedateigröße ist jedoch größer als bei einer PNG-Datei. Es muss verwendet werden, wenn es wirklich notwendig ist.

png hat eine breitere Farbpalette als gif und gif ist geeignet, während png dies nicht ist. gif kann animationen machen, was normal-png nicht kann. PNG-Transparenz wird nur von Browsern unterstützt, die ungefähr neuer 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 bei diesen nicht allzu gut funktioniert.

GIF basiert auf einer Palette von 256 Farben pro Bild (zumindest in seiner Grundinkarnation). PNG kann "TrueColour" ausführen, dh 16,7 Millionen Farben sofort. Verlustfreies PNG komprimiert besser als verlustfreie GIFs. GIF kann "binäre" Transparenz erzeugen (0% Deckkraft oder 100% Deckkraft). PNG kann Alpha-Transparentfolien verarbeiten.

Alles in allem ist PNG wahrscheinlich die bessere Wahl, wenn Sie keine pixelgenauen Bilder für Vektorillustrationen und dergleichen benötigen, wenn Sie keine Alpha-transparenten Bilder verwenden und IE6 unterstützen müssen. JPG ist für Fotos unschlagbar.

Ab 2018 haben wir mehrere neue Formate, eine bessere Unterstützung für frühere Formate und einige clevere Hacks, Videos anstelle von Bildern zu verwenden.

Für Fotos

jpg - immer noch das am weitesten verbreitete Bildformat.

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

Für Symbole und Grafiken

svg- wenn möglich. Es lässt sich gut auf Retina-Bildschirmen skalieren, 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 sie in Photoshop erstellt wurden). Unterstützt Transparenz, die in diesem Anwendungsfall sehr wichtig ist.

Für Animationen

svg- plus CSS-Animationen für Vektorgrafiken. Alle Vorteile von svg + power of css animations.

gif - immer noch das am weitesten verbreitete animierte Bildformat.

mp4- wenn animierte Bilder tatsächlich kurze Videoclips sind. Twitter / WhatsApp konvertiert Gifs in mp4.

apng- anständige Browser - Unterstützung (dh keine IE Edge), aber es schafft , ist nicht so einfach , wie Gifs.

webp- kurz vor der Verwendung von mp4. Schlechte Unterstützung

Dies ist ein schöner Vergleich verschiedener animierter Bildformate.

Unabhängig vom Format sollten Sie es optimieren. Für jedes Format gibt es Tools (z. B. SVGO, Guetzli, OptiPNG usw.), mit denen Sie erhebliche Bandbreite sparen können.

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

In Bezug auf die Dateigröße verfügt GIF über eine kleinere Standardfarbpalette, sodass es sich auf den ersten Blick um kleinere Dateigrößen handelt. PNG-Dateien haben eine größere Standardpalette. Sie können jedoch ihre Farbpalette verkleinern, sodass sie in diesem Fall zu einer kleineren 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 können, sind sie die einzige Option, wenn Sie eine andere Transparenzvariante als die binäre Transparenz wünschen.

Wenn Sie sich für JPEG entscheiden und Bilder für eine Website bearbeiten , sollten Sie den frei verfügbaren Wahrnehmungscodierer von Google Guetzli in Betracht ziehen . Nach meiner Erfahrung erzeugt Guetzli für eine feste Qualität kleinere Dateien als Standard-JPEG-Codierungsbibliotheken, wobei die vollständige Kompatibilität mit dem JPEG-Standard beibehalten wird (sodass Ihre Bilder die gleiche Kompatibilität wie herkömmliche JPEG-Bilder aufweisen).

Der einzige Nachteil ist, dass Guetzli viel Zeit zum Codieren benötigt. Dies geschieht jedoch nur einmal, wenn Sie das Bild für die Website vorbereiten, während die Vorteile für immer bestehen bleiben! Das Herunterladen kleinerer Bilder dauert weniger lange, sodass die Geschwindigkeit Ihrer Website im täglichen Gebrauch zunimmt.

GIF hat eine 8-Bit-Palette (256 Farben), wobei PNG eine bis zu 24-Bit-Farbpalette ist. PNG kann also mehr Farbe unterstützen und natürlich unterstützt der Algorithmus die Komprimierung

Wie von @aarjithn hervorgehoben, ist WebP ein Codec zum Speichern von Fotos.

Dies ist auch ein Codec zum Speichern von Animationen (animierte Bildsequenz). Ab 2020 werden die meisten Mainstream- Browser sofort unterstützt ( Kompatibilitätstabelle ). Hinweis für WIC ist ein Plugin verfügbar.

Es hat Vorteile gegenüber GIF, da es auf einem Video-Codec VP8 basiert und einen breiteren Farbbereich als GIF hat. GIF beschränkt sich auf 256 Farben und erweitert es auf 2 ²⁴ = 16777216 Farben, wodurch immer noch viel Platz gespart wird.