Der Butterfisch-Blog …

… Alles rund um das Thema Websites, Online-Banner etc.

preloader
JPG, PNG, GIF oder SVG?

Grafik

JPG, PNG, GIF oder SVG?

Autor: Samuel Wellach|Datum: 22. Juni 2022

Alle Kategorien anzeigen 16

Wann welches Bildformat verwendet werden sollte.

Es gibt viele verschiedene Formate in denen Bilder abgespeichert werden können. Einige Formate unterstützen Transparenz, andere hingegen lassen sich nur verlustbehaftet komprimieren. Gerade im Internet kommt es auf das richtige Format und die richtige Größe an.

Zunächst einmal lassen sich bei den Bildformaten pixelbasierte und verktorbasierte Dateien unterscheiden.


Bitmapbilder (JPG, PNG, GIF) sind pixelbasiert. D.h. jeder Punkt in dem Bild entspricht einem Pixel. Entsprechend der Bildauflösung und -größe steigt somit auch die Dateigröße dieses Formates. Sie eignen sich am Besten für Fotos oder komplexe Grafiken mit vielen Farbverläufen.


Vektorbasierte Bilder (SVG, EPS) sind immer verlustfrei und lassen sich beliebig hoch skalieren. Ausserdem verfügen vektorbasierte Grafiken in den allermeisten Fällen über kleinere Dateigrößen. Sie eignen sich am Besten für Logos oder einfache Grafiken.

Bitmapbilder

Unterschied zwischen JPG und PNG
Das JPG-Format ist das gängigste Bild-Format und wird wohl am häufigsten genutzt. Aber auch PNG Dateien kommen im Web häufig zum Einsatz. Beide Formate sind sogenannte Bitmapgrafiken (auch Pixelgrafiken genannt). PNGs können Transparenz verwenden, was für Logos, Icons oder freigestellte Bilder perfekt ist. JPG Dateien hingegen ermöglichen eine stärkere Reduzierung der Dateigröße, wodurch Webseiten schneller laden.
Im Internet gibt es viele kostenlose Tools, die JPG-Formate oder auch PNG´s in der Dateigröße komprimieren. Die wohl bekannteste Website zum Komprimieren ist: Tinypng.com. Das Bild verliert hierbei nicht an Qualität, da nur überflüssige Datensätze aus der Datei entfernt werden.

Das Bildformat GIF
Durch Social Media wurde das GIF ein sehr beliebtes Format im Internet. Es ermöglicht kleine Animationen zu erstellen, verfügt dafür aber nur über einen sehr begrenzten Farbraum (max. 256 Farben), was zu einer deutlichen Qualitätsverschlechterung führen kann. In einigen Fällen ist das GIF-Format auch für kleine Logos oder Icons verwendbar, in der Regel sind PNGs oder SVGs hier aber sinnvoller.

Vektorbasierte Bilder

Das SVG-Format
Unter SVG versteht man eine Vektorgrafik, die vor allem in Onlinemedien zum Einsatz kommt. Dieses Format erlaubt ein verlustfreies Skalieren von Grafiken und ist bei responsiven Designs von großem Vorteil. Daher werden immer häufiger z.B. Logos, aber auch Icons und einfache Grafiken als SVG-Dateien in Websites eingebunden.

Eine SVG-Datei (Vektorgrafik) lässt sich nach dem Erstellen jederzeit problemlos mit einem Vektor-Programm wie z.B. Adobe Illustrator nachbearbeiten, ohne dabei irgendwelchen Qualitätseinbußen zu unterliegen. Eine JPG- oder PNG-Datei lässt sich im nachhinein zwar auch skalieren, verliert dabei aber kontinuierlich an Qualität.