Zehn Bild­for­ma­te im Überblick: Was ist der Un­ter­schied zwischen JPG, PNG und Co.?

Gängige Bild­for­ma­te wie JPG und PNG sind den meisten Nutzern bekannt. Das Wissen über die genauen Un­ter­schie­de und Vorteile der ver­schie­de­nen Formate ist hingegen weniger weit ver­brei­tet. Für Nutzer ist oft nicht oder nur schwer erkennbar, wodurch sich eine JPG-Datei von einer PNG- oder GIF-Datei un­ter­schei­det. Doch ein genauer Blick auf die un­ter­schied­li­chen Bild­for­ma­te lohnt sich. Jedes Format bringt Vor- und Nachteile mit sich und ist auf un­ter­schied­li­che An­wen­dungs­be­rei­che aus­ge­rich­tet. Wir zeigen die gän­gigs­ten Bild­for­ma­te (Pixel- und Vek­tor­gra­fi­ken) und erklären, wann Sie sich für welches Format ent­schei­den sollten.

Bevor wir uns im Detail ansehen, welche Bild­for­ma­te es gibt, lohnt sich ein Blick auf die grobe Un­ter­schei­dung zwischen Pixel- oder auch Ras­ter­gra­fi­ken und Vek­tor­gra­fi­ken.

Wie der Name bereits vermuten lässt, bestehen Pi­xel­gra­fi­ken aus Pixeln. Doch was bedeutet das genau? Stellen Sie sich Pixel wie einzelne Punkte vor, aus denen sich ein Bild oder eine Grafik zu­sam­men­setzt. Je größer die Anzahl der Pixel in einem Bild, desto höher auch Auflösung und Da­tei­grö­ße. Der Nachteil von Pi­xel­gra­fi­ken ist, dass eine Ska­lie­rung mit einem Qua­li­täts­ver­lust ein­her­geht. Jeder Pixel hat eine de­fi­nier­te Größe. Ver­grö­ßern Sie eine Datei, werden auch die Pixel gestreckt und die Qualität nimmt ab.

Diesen Nachteil haben vek­tor­ba­sier­te Grafiken nicht. Bei ihnen setzt sich ein Bild aus zwei­di­men­sio­na­len Objekten zusammen, deren Position, Maße und Farben be­schrie­ben werden. Dadurch lassen sich Vek­tor­gra­fi­ken bei kon­stan­ter Qualität beliebig skalieren. Bild­for­ma­te dieser Kategorie eignen sich für Grafiken, die in ver­schie­de­nen Größen ein­ge­setzt werden, also ty­pi­scher­wei­se Logos oder andere Mar­ke­ting­ma­te­ria­li­en.

Welches Bild­for­mat die richtige Wahl ist, hängt primär vom Ver­wen­dungs­zweck ab. Folgende Faktoren be­ein­flus­sen die Auswahl:

• Benötigen Sie das Bild in ver­schie­de­nen Größen?
• Verwenden Sie das Bild im Web oder als Print?
• In welcher Da­tei­grö­ße benötigen Sie das Bild und wie wichtig ist eine hohe Qualität?
• Be­inhal­tet das Bild eine große Anzahl Farb­nu­an­cen?

Bei der Ver­wen­dung im Web steht die Qualität in vielen Fällen erst an zweiter Stelle. Wichtiger sind eine geringe Da­tei­grö­ße und eine damit ver­bun­de­ne kurze Ladezeit. Dem­entspre­chend wird häufig eine ver­lust­rei­che Kom­pres­si­on in Kauf genommen. In diesem Fall führt der Vorgang zu einem Qua­li­täts­ver­lust, weil Daten aus dem Bild entfernt oder zu einem Bildpunkt reduziert werden. Bei einer ver­lust­frei­en Kom­pri­mie­rung hingegen bleibt die Qualität auch bei einer re­du­zier­ten Da­tei­grö­ße erhalten. Für die Kom­pri­mie­rung werden Pixel der gleichen Farb­ka­te­go­rie gruppiert und Metadaten entfernt.

JPG, PNG oder GIF: Die be­kann­tes­ten Bild­for­ma­te zählen größ­ten­teils zu den Pi­xel­for­ma­ten. Der Grund: Ras­ter­gra­fi­ken sind für nahezu alle An­wen­dungs­be­rei­che geeignet und lassen sich pro­gramm­un­ab­hän­gig öffnen und be­ar­bei­ten. Zudem sind die meist de­tail­lier­ten Farb­ab­stu­fun­gen und komplexen Farb­ver­läu­fe ideal zur Dar­stel­lung von Fo­to­gra­fien geeignet. Die ver­lust­freie Kom­pres­si­on er­mög­licht auch im Web die Dar­stel­lung von de­tail­lier­ten Grafiken. Im Folgenden prä­sen­tie­ren wir Ihnen die gän­gigs­ten Pi­xel­for­ma­te sowie ihre Vor- und Nachteile:

Sind Ihnen auf einer Website schon einmal animierte Wer­be­ban­ner oder im Facebook-Feed bewegte Bilder auf­ge­fal­len? Dabei handelte es sich ver­mut­lich um GIFs. Diese zeichnen sich durch ihre animierte Form aus. In nur einer einzigen GIF-Datei sind alle Frames und Zeit­in­for­ma­tio­nen für die Animation enthalten.

Dieses Bild­for­mat besteht aus bis zu 256 Farben im RGB-Farbraum und ist daher nicht für farb­star­ke und komplexe Fotos geeignet, die nor­ma­ler­wei­se mehrere tausend Farben abdecken. Die be­schränk­te Farbwahl bringt zugleich einen Vorteil bei der Ver­wen­dung im Web, denn die re­du­zier­te Da­tei­grö­ße führt zu kurzen La­de­zei­ten – auch bei ani­mier­ten Dateien. Scharfe Kanten von Formen oder Schriften bildet das GIF-Format sogar deutlich besser als ein JPG ab. Dieses Bild­for­mat ist daher für kleine grafische Elemente und für Web­gra­fi­ken optimal geeignet.

Das PNG-Bild­for­mat wurde als wei­ter­ent­wi­ckel­te Al­ter­na­ti­ve zu GIFs ent­wi­ckelt. Ein PNG lässt sich im Gegensatz zum GIF mit trans­pa­ren­tem oder halb­trans­pa­ren­tem Hin­ter­grund speichern und un­ter­stützt den Alpha-Kanal. Zudem passt sich das PNG-Format an op­ti­mier­te Computer und damit an die größer werdende Farb­aus­wahl an. Das Farb­spek­trum umfasst bis zu 16 Millionen Farben und damit deutlich mehr als ein GIF. Für den Druck ist dieses Bild­for­mat dennoch nicht geeignet, da PNGs den CMYK-Farbraum nicht un­ter­stüt­zen. Daher rührt auch der Name „Portable Network Graphics“, der die primär digitale Ver­wen­dung im­pli­ziert.

PNG ist ein typisches Web-Bild­for­mat, das sich durch eine ver­lust­freie Kom­pres­si­on aus­zeich­net. Auch kleine Dateien behalten ihre hohe Qualität und Auflösung und zeigen feine Nuancen. Dem­entspre­chend eignen sich PNGs für Logos oder andere kleine Bilder mit vielen Schat­tie­run­gen zur Wei­ter­ver­ar­bei­tung und zum Speichern in ver­schie­de­nen Größen. Damit einher geht jedoch auch ein höherer Spei­cher­be­darf. Eine PNG-Datei ist bis zu zehn Mal größer als ein ver­gleich­ba­res JPG.

Das JPG-Format ist das am meisten ver­wen­de­te Bild­for­mat. Die Dateien zeichnen sich durch hohe Kom­pa­ti­bi­li­tät und uni­ver­sel­le Ein­satz­mög­lich­kei­ten aus. Mit nahezu jeder Anwendung lässt sich dieses Format öffnen und kon­ver­tie­ren. Zudem bieten JPGs das volle Farb­spek­trum mit bis zu 16 Millionen Farben. Der Nachteil: Die Kom­pri­mie­rung einer Bilddatei führt durch die Zu­sam­men­fas­sung ähnlicher Pixel zum Verlust von Bild­in­for­ma­tio­nen und damit auch zu Qua­li­täts­ein­bu­ßen. Dies ist zugleich der Haupt­un­ter­schied zum PNG-Format.

Für die Ver­wen­dung im Web ist die Qualität eines JPGs in vielen Fällen aus­rei­chend, sodass Sie von einer schnellen Ladezeit dank geringer Da­tei­grö­ße pro­fi­tie­ren. So­ge­nann­te pro­gres­si­ve JPEGs bieten einen zu­sätz­li­chen Vorteil in der User Ex­pe­ri­ence, da Bilder pi­xel­wei­se geladen werden und so keine un­ge­woll­ten weißen Flächen auf Websites entstehen. Auch als Vorschau lässt sich ein JPG schnell und einfach per E-Mail versenden. Ohne Kom­pres­si­on sind hoch­wer­ti­ge JPG-Dateien auch für den Druck geeignet.

Das TIFF-Format un­ter­schei­det sich deutlich von den bisher vor­ge­stell­ten Bild­for­ma­ten. Die meisten Web­brow­ser un­ter­stüt­zen dieses Format nicht, weswegen es für die Anzeige im Web un­ge­eig­net ist. Bei der Be­ar­bei­tung von Bildern bietet TIFF hingegen deutliche Vorteile. Das Format un­ter­stützt sowohl den RGB- als auch den CMYK-Farbraum und hat eine hohe Farbtiefe von bis zu 32 Bit pro Farb­kom­po­nen­te. Zudem lassen sich Ebenen, Masken und Trans­pa­ren­zen speichern.

Die ver­lust­freie Kom­pres­si­on er­mög­licht be­lie­bi­ges Speichern oder Kopieren ohne Qua­li­täts­ver­lust. Das TIFF-Format ist daher ideal für den Druck von hoch­qua­li­ta­ti­ven Bildern geeignet. Bild­in­for­ma­tio­nen werden entweder gar nicht oder ver­lust­frei kom­pri­miert. Die hohe Qualität bedingt jedoch, dass Bilder mehr Spei­cher­platz benötigen. Auch diese Ei­gen­schaft schließt eine Ver­wen­dung im Web nahezu aus.

Das Format BMP ist bereits seit 1990 und Windows 3.0 ein in­te­gra­ler Be­stand­teil des Microsoft-Be­triebs­sys­tems. Dem­entspre­chend lassen sich BMPs ohne zu­sätz­li­che Plug-ins oder Programme von Dritt­an­bie­tern öffnen. Zwar wurde dieses Bild­for­mat mitt­ler­wei­le größ­ten­teils von anderen Formaten abgelöst, findet jedoch nach wie vor Ver­wen­dung.

Bei BMP handelt es sich um ein einfach struk­tu­rier­tes Bild­for­mat, das sich durch eine schnelle Be­ar­bei­tung aus­zeich­net. Auch nach der ver­lust­frei­en Kom­pres­si­on sind Bilddaten ver­hält­nis­mä­ßig groß, da alle Pixel mit ihrem je­wei­li­gen Farbwert ge­spei­chert werden. Mitt­ler­wei­le gibt es andere Bild­for­ma­te, mit denen eine ebenso ver­lust­freie Kom­pres­si­on mit einer ge­rin­ge­ren Da­tei­grö­ße ein­her­geht. Im Zeitalter von Über­tra­gun­gen per E-Mail und Web wird dieses Bild­for­mat daher zunehmend un­in­ter­es­sant und ist für moderne An­wen­dungs­be­rei­che un­ge­eig­net.

PSD: Photoshop Document

PSD ist das Format des führenden Bild­be­ar­bei­tungs­pro­gramms Adobe Photoshop und ein von Gra­fik­de­si­gnern häufig genutztes Format. Die Be­ar­bei­tung setzt jedoch die passende Software voraus. Daher ist das PSD-Format für Pri­vat­per­so­nen und zum ko­ope­ra­ti­ven Arbeiten häufig un­ge­eig­net. Dieses Problem lässt sich umgehen, indem Sie die Datei mit Adobe Photoshop in ein anderes Bild­for­mat umwandeln. Auch vor dem Druck ist eine vor­an­ge­hen­de Kon­ver­tie­rung notwendig.

Im PSD-Format besteht jedes Bild aus mehreren Ebenen, die sich leicht be­ar­bei­ten lassen. Prin­zi­pi­ell handelt es sich bei diesen Dateien um Ras­ter­gra­fi­ken, die jedoch auch Vek­tor­gra­fi­ken enthalten können. Dieses Bild­for­mat ist daher ideal für die um­fang­rei­che Be­ar­bei­tung von Bildern geeignet.

Im Gegensatz zu den in ihrer Größe fest de­fi­nier­ten Pi­xel­gra­fi­ken sind Vek­tor­gra­fi­ken deutlich flexibler und daher ideal für die Dar­stel­lung von geo­me­tri­schen Formen und Schriften. Die ver­lust­freie Ska­lie­rung er­leich­tert zudem die Er­stel­lung von re­spon­si­ven We­b­ele­men­ten. Vor­aus­set­zung für die Be­ar­bei­tung sind in den meisten Fällen spezielle Gra­fik­pro­gram­me. Daher werden die folgenden Bild­for­ma­te zum Großteil nur von Grafikern genutzt. Doch auch Pri­vat­per­so­nen finden zunehmend Gefallen an den leicht ad­ap­tier­ba­ren Vek­tor­gra­fi­ken und bedienen sich kos­ten­lo­ser Software-Al­ter­na­ti­ven.

Das Bild­for­mat PDF ist eine Ent­wick­lung von Adobe, setzt jedoch – im Gegensatz zu anderen Adobe-Formaten – keine fir­men­spe­zi­fi­sche Software voraus (obwohl der Acrobat Reader der ent­spre­chen­de Standard ist). Im Gegenteil: Das PDF-Format hat sich als zu­ver­läs­si­ges Aus­tausch­for­mat etabliert und lässt sich ohne kos­ten­pflich­ti­ge Be­ar­bei­tungs­soft­ware ansehen – auf jedem Gerät, jedem Be­triebs­sys­tem und jedem Web­brow­ser. Besonders beliebt ist das Format zur Wei­ter­ga­be an den Druck.

Mit den kos­ten­pflich­ti­gen Adobe-Pro­gram­men lassen sich PDFs viel­sei­tig und flexibel be­ar­bei­ten. Das Fundament dieses Bild­for­mats ist besonders leis­tungs­stark bei Vek­tor­gra­fi­ken, bildet jedoch auch Pi­xel­gra­fi­ken ab. PDFs er­mög­li­chen auch in der kos­ten­lo­sen Dar­stel­lungs­va­ri­an­te zu­sätz­li­che Funk­tio­na­li­tä­ten wie das Hin­zu­fü­gen von Notizen, Kom­men­ta­ren oder Da­tei­an­hän­gen. Mit ent­spre­chen­den Si­cher­heits­ein­stel­lun­gen lässt sich das Be­ar­bei­ten durch Dritte ver­hin­dern.

Das AI-Format ist, wie auch das PDF-Format, ein natives Bild­for­mat des Pro­gramm­her­stel­lers Adobe. Im Gegensatz zum PDF benötigen Sie jedoch selbst für die reine Dar­stel­lung bereits das da­zu­ge­hö­ri­ge Programm Adobe Il­lus­tra­tor. Das vek­tor­ba­sier­te Format lässt sich frei skalieren und bietet zudem die Mög­lich­keit, Ras­ter­gra­fi­ken ein­zu­bet­ten oder zu verlinken. Das Bild­for­mat wird meist zum Speichern von Logos und anderen Mar­ke­ting­ma­te­ria­li­en ein­ge­setzt, das in ver­schie­de­nen Größen benötigt wird.

Mit Adobe Il­lus­tra­tor lassen sich Dateien auch in jedem anderen gängigen Bild­for­mat speichern. Dies er­leich­tert den Austausch von Dateien zwischen Grafikern und Pri­vat­per­so­nen. Ein weiterer Vorteil: Durch das Ein- und Aus­blen­den von Ebenen können Sie mehrere Varianten in nur einer Datei speichern.

1987 ver­öf­fent­lich­te Adobe das Format EPS in der Pro­gram­mier­spra­che Post­Script. Mitt­ler­wei­le wurde das Bild­for­mat größ­ten­teils vom weit ver­brei­te­ten PDF abgelöst, das ebenso auf Post­Script basiert.

EPS er­mög­lich­te es erstmals, Dokumente genauso dar­zu­stel­len, wie sie auch beim Druck er­schei­nen. EPS-Dateien lassen sich ebenso wie PDFs platt­form­über­grei­fend mit kos­ten­frei­er Software öffnen. Das gängigste Programm zum Öffnen ist der Adobe Acrobat Reader, es steht al­ler­dings eine große Anzahl an Al­ter­na­ti­ven zur Verfügung. Das ver­lust­freie Format bindet Pixel- und Vek­tor­gra­fi­ken ein und zeichnet sich durch eine besonders hohe An­pas­sungs­fä­hig­keit und Ska­lier­bar­keit aus. Zu den Nach­tei­len zählt, dass EPS-Dateien auf eine Do­ku­men­ten­sei­te be­schränkt sind und nicht zwischen Vektor und Bitmap un­ter­schei­den.

Das XML-basierte Vek­tor­for­mat SVG erschien 1999 und stellt Bilder und ihre Elemente im Text­for­mat dar. Da nicht alle Nutzer, allen voran Pri­vat­per­so­nen, Zugriff auf die Adobe Creative Suite haben, sind AI-Dateien zum Austausch mit anderen Personen mitunter un­ge­eig­net. SVG-Grafiken hingegen sind ideal zum Versenden von Vek­tor­gra­fi­ken, da sie keine bestimmte Software vor­aus­set­zen. Theo­re­tisch lässt sich das Vek­tor­for­mat auch in einem einfachen Text-Editor erzeugen, dies ist jedoch in der Praxis unüblich.

Das Bild­for­mat SVG gibt es bereits seit über 20 Jahren. Durch die zu­neh­men­de Vielfalt an Bild­schirm­grö­ßen und dem damit ver­bun­de­nen re­spon­si­ven Design erlebt es einen Auf­schwung. SVG-Grafiken werden bei jedem Bild­schirm­auf­bau neu skaliert. Dem­entspre­chend sind die Dateien immer in maximaler Schärfe ab­ge­bil­det und er­leich­tern das Ein­rich­ten eines re­spon­si­ven Designs erheblich. Auch das World Wide Web Con­sor­ti­um (W3C) stan­dar­di­sier­te das Format 2001 und empfiehlt SVG für die Dar­stel­lung von zwei­di­men­sio­na­len Vek­tor­gra­fi­ken im Web.