JPG vs. PNG vs. GIF: Die Unterschiede zwischen Bilddateiformaten

Eine Rose, die anders genannt wird, mag ebenso süß riechen, wie Shakespeare in Romeo und Julia sagt, aber wenn Sie ein Bild dieser Rose machen und es als JPEG mit hoher Kompression speichern, könnten Sie einen Rückgang der Bildqualität erleben. Das ist jedoch kein Problem, da Sie auch die Möglichkeit haben, PNG, TIFF, GIF, SVG oder sogar ein neues Format wie HEIC oder WebP zu verwenden. Einige dieser Formate würden großartig im Newsletter der Familie Capulet aussehen, während andere besser auf Romeos Blog passen würden, sodass das Entschlüsseln dieser Dateitypen ziemlich nützlich sein kann.

Verlustbehaftet vs. Verlustfrei

image-formats-lossy

Jedes Bildformat kann als „verlustbehaftet“ oder „verlustfrei“ kategorisiert werden, und diese Begriffe erklären sich größtenteils von selbst. Verlustbehaftete Kompression reduziert die Dateigröße, indem sie dauerhaft Informationen über eine Datei löscht, wodurch sie kleiner wird, aber auch die Qualität beeinträchtigt. Verlustfreie Kompression ordnet die Daten lediglich so um, dass sie weniger Platz einnehmen, aber ohne Beschädigung der Datei gepackt und entpackt (oder entzippt!) werden können.

Raster vs. Vektor

image-formats-raster-vector

Wenn Sie an „Bildformat“ denken, denken Sie wahrscheinlich an ein Raster. Es hat nichts mit Bob Marley zu tun – es bedeutet einfach, dass die Datei im Wesentlichen ein Gitter aus farbigen Pixeln ist, die ein Bild ergeben. JPG, PNG, GIF, TIFF und die meisten anderen Fotodateien sind Raster. Die einzige Information, die sie haben, ist, welche Farbe die Pixel haben, sodass das Vergrößern oder Dehnen in der Regel nur zu einem pixeligeren Bild führt.

Vektoren hingegen sind so konzipiert, dass sie unbegrenzt skaliert werden können. SWF-, EPS- und PDF-Dateien speichern Bilder nicht als Pixel, sondern als mathematische Gleichungen, die als Punkte und Linien gerendert werden können. Das Bild kann so groß oder klein werden, wie Sie es benötigen, ohne Qualitätsverlust, aber diese Erweiterungen sind im Web nicht so verbreitet, da Vektoren nicht so leicht mit Rasterbildern kompatibel sind.

Joint Photographic Experts Group (JPEG) – Verlustbehaftetes Raster

image-formats-jpeg

Die JPEG-Datei ist nach der Gruppe benannt, die sie erstellt hat, und dominiert die Welt der Webbilder aufgrund ihrer nahezu universellen Kompatibilität und kleinen Größe. Ihr Auge könnte wahrscheinlich einen leicht komprimierten JPEG nicht von einem hochqualitativen Bild unterscheiden, ohne ein paar Sekunden genau hinzusehen, und es lädt schnell, sodass es für die meisten des Webs gut genug ist.

JPEG-2000 ist die aktualisierte Version, die einige Verbesserungen gegenüber dem Original aufweist, aber sie hat sich nie wirklich durchgesetzt, sodass Sie dieses Format wahrscheinlich nicht oft sehen werden.

Gut für: das Hochladen von Fotos ins Web, das Speichern und Versenden kleiner Bildgrößen, allgemeine Verwendung, das Ausdrucken von Bildern.

Portable Network Graphics (PNG) – Verlustfreies Raster

image-formats-png

Dieses Format ist zum Standard für hochwertige Webgrafiken geworden, insbesondere wenn Sie einen transparenten Hintergrund benötigen. PNG wurde ursprünglich als GIF-Alternative entwickelt, unterstützt jedoch viel mehr Farben und ist flexibler in Bezug auf Transparenzeinstellungen. Die Dateigröße ist im Allgemeinen größer als die von GIF oder JPEG, aber PNG bewahrt die Qualität besser und ist flexibler.

Sie könnten auch auf PNG-8 und PNG-24 in einigen Programmen stoßen. Diese werden immer noch als normale PNGs exportiert, aber PNG-8 unterstützt nur 256 Farben und erlaubt keine partielle Transparenz, was Ihnen eine kleinere Dateigröße als das voll ausgestattete PNG-24 einbringt.

Gut für: Webgrafiken, hochwertige Fotos, bei denen die Größe kein Problem darstellt, Transparenz.

Graphical Interchange Format (GIF) – Verlustfreies Raster

image-formats-gif

Der Vorgänger von PNG, das GIF-Format, ist jetzt am bekanntesten dafür, die kurzen Video-Loops zu ermöglichen, die Sie in sozialen Medien nicht aufhören können zu betrachten. Die Debatte darüber, ob man es als „ g if“ oder „ j if“ aussprechen sollte, ist ziemlich hitzig, aber wenn Sie beide Seiten verärgern möchten, versuchen Sie es mit „jeff“.

GIFs unterstützen nur 256 Farben, was sie zu einer schlechten Wahl für hochwertige Fotos macht, aber ihre Kompression ist ausgezeichnet, sodass sie einfache Bilder ohne großen Qualitätsverlust verkleinern können. Pixel können auch transparent gemacht werden, müssen jedoch entweder ein- oder ausgeschaltet sein, nicht dazwischen.

Gut für: einfache Grafiken, Animationen, Icons.

Tagged Image File Format (TIFF) – Verlustfreies Raster

image-formats-tif

Sie sind möglicherweise noch nie persönlich auf ein TIFF gestoßen, aber wenn Sie in der Fotografie tätig sind oder viel mit Druckmedien arbeiten, erkennen Sie sie möglicherweise als das große, aber hochwertige Format, das oft von Verlegern bevorzugt wird. Außerdem streitet niemand über die Aussprache.

Gut für: das Drucken von hochwertigen Fotos, das Scannen von hochwertigen Bildern, alles, wo die Größe kein Problem darstellt.

Scalable Vector Graphics (SVG) – Vektor

image-formats-svg

Wenn Sie jemals versucht haben, ein Bild aus dem Internet zu speichern und stattdessen die Option „als Webseite speichern“ erhalten haben, haben Sie möglicherweise ein SVG gesehen. Diese sind möglicherweise die am weitesten unterstützten Vektorgrafiken, und ihre Fähigkeit, gute Qualität und Skalierbarkeit bei niedrigen Dateigrößen zu erhalten, macht sie beliebt für Logos, Website-Grafiken und überall dort, wo ein Vektor nützlich wäre.

Gut für: Geschäftsgrafiken, skalierbare Grafiken, Logos.

Neue Formate

Sie haben diese Formate möglicherweise noch nicht in freier Wildbahn gesehen, aber sie bieten einige Vorteile gegenüber den heutigen Standards.

High Efficiency Image Format

HEIF ist im Wesentlichen JPEG, aber mit höherer Qualität und kleineren Dateigrößen. Dies ist jetzt das Standardbildformat in iOS 11 und später.

image-formats-heif

WebP

WebP ist Googles Format, und es kann so ziemlich alles: bessere Kompression als JPEG, bessere Animationen als GIF und Transparenz auf Augenhöhe mit PNG. Es wird von mehreren Browsern unterstützt und wird derzeit von YouTube, Facebook und einigen anderen Websites verwendet, wenn Sie sie mit einem unterstützten Browser besuchen.

image-formats-webp

Warum so viele Formate?

Es ist unwahrscheinlich, dass es jemals ein Format geben wird, das alle anderen beherrscht, da verschiedene Bereiche unterschiedliche Bildbedürfnisse haben. Allgemeine Internetbrowser müssen sich nicht wirklich über JPEG und PNG (und vielleicht WebP und HEIC in der Zukunft) hinausdenken, aber für Geschäfts- und Verlagsanwendungen macht es das Leben einfacher, Optionen wie TIFF und SVG zu haben.

Und wenn Sie es noch nicht getan haben, sollten Sie darüber nachdenken, eine Seite in der GIF-Debatte zu wählen, bevor das Format verschwindet. Seien Sie Teil der Geschichte.

Bildnachweise: Vergleich zwischen JPEG, JPEG 2000, JPEG XR und HEIF, Google Developers, W3C.org, Es ist einfach Neon animiertes Gif, JPEG JFIF und 2000 Vergleich, JPEG-Kompressionsbeispiel