Formatwahl für Grafik

[HP-User]

Abend Leute

Für die Formatwahl einer Grafikdatei (ImCSS als Backgroundgrafik) hätte ich gerne gewußt, was besser ist:

Grafik.png oder Grafik.jpg?

Normalerweise nehme ich für die Grafikelemente, die für das Seitendesign zuständig sind immer "png". Für die Grafiken, die den Content betreffen "jpg". Kann ich das so lassen oder gibt es zwischenzeitlich andere "Gepflogenheiten" ?

Gruß HP-User

[Felix Riesterer]

Lieber HP-User,

PNG-Grafiken eigenen sich insbesondere für Transparenz-Effekte bei überlappenden Grafiken, was mit dem JPEG-Format nicht möglich ist.

Aktuelle Browser haben mit PNG-Grafiken kein Darstellungsproblem, ältere IEs dagegen schon.

Eine generelle Empfehlung für ein Grafikformat bei Hintergrundbildern ist hier wohl ebenso wertvoll, wie die generelle Empfehlung für Marmelade als Brotaufstrich.

Liebe Grüße,

Felix Riesterer.

[Vinzenz Mai]

Hallo,

PNG-Grafiken eigenen sich insbesondere für Transparenz-Effekte bei überlappenden Grafiken, was mit dem JPEG-Format nicht möglich ist.

PNG-Grafiken eignen sich ganz besonders für Logos, Icons und ähnliche Symbolgrafiken, da das PNG-Format verlustfrei komprimiert.

Aktuelle Browser haben mit PNG-Grafiken kein Darstellungsproblem, ältere IEs dagegen schon.

Das betrifft *ausschließlich* die Alphatransparenz im IE 6 und älter.

Das JPEG-Format ist hervorragend für Fotos geeignet (eben wegen der verlustbehafteten Kompression), siehe auch hier im Wiki.

Freundliche Grüße

Vinzenz

[Encoder]

Normalerweise nehme ich für die Grafikelemente, die für das Seitendesign zuständig sind immer "png". Für die Grafiken, die den Content betreffen "jpg".

Sinn?

Scharfe Kanten im Bild (also auch Grafiken!) => png
viele Farbverläufe, Farbtreue ist nicht 100% wichtig erkennbar => jpg

Vergiss gif nicht. Ich stelle immer wieder fest dass ein typisches "Grafik" Bild (einfarbiger Hintergrund, wenige Änderungen im Vordergrund) als png wahnsinnig groß ist. Da ist dann ein jpg mit hoher Qualität viel kleiner und optisch nicht zu unterscheiden. Oder eben gif.
Keine Ahnung woran das liegt, ist vielleicht auch ne Frage des Bildbearbeitungsprogramms.

[JürgenB]

Hallo Encoder,

... gif ... png ...
Keine Ahnung woran das liegt, ist vielleicht auch ne Frage des Bildbearbeitungsprogramms.

GIFs haben defaultmäßig 256 Farben also 8 Bit pro Pixel, bei PNGs können es auch 24 Bit pro Pixel sein. Wenn man also die Größe von GIF und PNG vergleichen will, dann erst die Farbtiefe sinnvoll reduzieren. Oft reichen 16 Farben oder weniger.

Ich habe gestern noch ein Stück Wanderkarte eingescannt und die Einstellungen von IrfanVIEW nicht verändert:

GIF: 2.1 MB
PNG: 8.2 MB
JPG: 2.8 MB

Auf den ersten Blick sehen alle Scans gleich gut aus.

Gruß, Jürgen

[Der Martin]

Hi Jürgen,

GIFs haben defaultmäßig 256 Farben also 8 Bit pro Pixel

ich würde statt "defaultmäßig" eher sagen: "maximal".
Denn es gibt eigentlich keinen Standardwert; jeder Wert von 1..8 bit/Pixel ist gleichermaßen erlaubt und sinnvoll.

bei PNGs können es auch 24 Bit pro Pixel sein.

Oder sogar 32bit, wenn noch ein Alphakanal dazukommt.

Ich habe gestern noch ein Stück Wanderkarte eingescannt und die Einstellungen von IrfanVIEW nicht verändert:
GIF: 2.1 MB
PNG: 8.2 MB
JPG: 2.8 MB
Auf den ersten Blick sehen alle Scans gleich gut aus.

Das glaube ich dir sofort. Und ich vermute, dass die Karte auch nur eine Handvoll Farben wirklich braucht, so dass man das GIF durch Reduktion auf 4bit (16 Farben) nochmal auf die Hälfte stauchen könnte. Unter Umständen sogar mit einem Qualitätsgewinn, weil bei einer Reduktion der Farbtiefe auch das Bildrauschen geringer wird.

Ciao,
 Martin

[JürgenB]

Hallo Martin,

GIFs haben defaultmäßig 256 Farben also 8 Bit pro Pixel

ich würde statt "defaultmäßig" eher sagen: "maximal".
Denn es gibt eigentlich keinen Standardwert; jeder Wert von 1..8 bit/Pixel ist gleichermaßen erlaubt und sinnvoll.

na ja, meine Grafikprogramme wählen da erst mal 256 Farben.

Das glaube ich dir sofort. Und ich vermute, dass die Karte auch nur eine Handvoll Farben wirklich braucht, so dass man das GIF durch Reduktion auf 4bit (16 Farben) nochmal auf die Hälfte stauchen könnte. Unter Umständen sogar mit einem Qualitätsgewinn, weil bei einer Reduktion der Farbtiefe auch das Bildrauschen geringer wird.

bestimmt. Da ich die Karte aber nur für einen Test benötigt habe, habe ich da nicht weiter optimiert und nur aus Neugier mal die drei Formate verglichen.

Gruß, Jürgen

[Vinzenz Mai]

Hallo Jürgen,

GIFs haben defaultmäßig 256 Farben also 8 Bit pro Pixel, bei PNGs können es auch 24 Bit pro Pixel sein.

nimm den Alphakanal noch mit, dann sind's schon 32 Bit pro Pixel ...

Wenn man also die Größe von GIF und PNG vergleichen will, dann erst die Farbtiefe sinnvoll reduzieren. Oft reichen 16 Farben oder weniger.

Ich habe gestern noch ein Stück Wanderkarte eingescannt und die Einstellungen von IrfanVIEW nicht verändert:

GIF: 2.1 MB
PNG: 8.2 MB
JPG: 2.8 MB

sieht nach dem oben angeführten Faktor 4 zwischen GIF und PNG aus, während JPG aufgrund 24 Bit nicht unter die GIF-Größe kommt ...

Freundliche Grüße

Vinzenz

[Der Martin]

Hallo,

Scharfe Kanten im Bild (also auch Grafiken!) => png
viele Farbverläufe, Farbtreue ist nicht 100% wichtig erkennbar => jpg

ja, diese Unterscheidung ist gut. Sinnvoller als die des OP.

Vergiss gif nicht. Ich stelle immer wieder fest dass ein typisches "Grafik" Bild (einfarbiger Hintergrund, wenige Änderungen im Vordergrund) als png wahnsinnig groß ist. Da ist dann ein jpg mit hoher Qualität viel kleiner und optisch nicht zu unterscheiden. Oder eben gif.
Keine Ahnung woran das liegt, ist vielleicht auch ne Frage des Bildbearbeitungsprogramms.

Vermutlich. Bei Bildern mit nur wenigen Farbnuancen (Skizzen, Piktogramme, Logos) ist GIF deshalb gut, weil es erlaubt, die Zahl der Bits pro Pixel zu reduzieren - bei einem Bild mit maximal 16 Farbtönen zum Beispiel auf 4bit pro Pixel. Dazu kommt eine Palette mit 16 Einträgen à 24bit (3 Bytes). Im Gegensatz dazu braucht ein Truecolor-PNG eben 24bit für *jedes* Pixel.
Die Kompression kann bei einem GIF mit wenigen Farben auch effizienter sein, weil bei nur 16 Farben die Wahrscheinlichkeit größer wird, dass gleichfarbige Pixel beieinanderliegen, als das bei 16M möglichen Kombinationen der Fall ist.

Allerdings -und da komme ich wieder aufs Bildbearbeitungsprogramm- bietet auch PNG die Variante mit nur 8bit pro Pixel (PNG8) und Farbpalette. Dann ist es einem "ausgewachsenen" GIF mit 256 Farben in etwa ebenbürtig. Diese Variante bietet aber nicht jedes Programm an.

Unterm Strich also: Ist die Zahl der Farben im Bild *deutlich* kleiner als 256, dann ist GIF in der Regel das günstigste Format. Bei größerer Farbanzahl entscheidet es sich zwischen PNG und JPEG, wobei JPEG wegen der verlustbehafteten[1] Kompression immer etwas Qualitätsverlust bedeutet[2].

Ciao,
 Martin

[1] In einem Fachartikel über JPEG-Kompression mal gelesen: "Not a lousy, but a lossy compression technique"
[2] Gerüchten zufolge erlaubt auch das JPEG-Format eine verlustlose Speicherung, das habe ich aber in freier Wildbahn noch nicht angetroffen

[Encoder]

Allerdings -und da komme ich wieder aufs Bildbearbeitungsprogramm- bietet auch PNG die Variante mit nur 8bit pro Pixel (PNG8) und Farbpalette. Dann ist es einem "ausgewachsenen" GIF mit 256 Farben in etwa ebenbürtig. Diese Variante bietet aber nicht jedes Programm an.

Nachdem png ja auch komprimiert, geh ich eigentlich davon aus dass solche Dinge da nicht mehr ins Gewicht fallen dürften.
Aktueller Versuch mit Paint.NET. Zwei scharfe Linien ins Bild, das png Bild mit AutoErkennung ließ sich mittels zip von 11 kB auf 7 kB reduzieren. Das dürfte ja eigentlich nicht sein.

[2] Gerüchten zufolge erlaubt auch das JPEG-Format eine verlustlose Speicherung, das habe ich aber in freier Wildbahn noch nicht angetroffen

Man kann ja die Kompressionsrate frei einstellen. Bei maximaler Qualität lässt sich hier zumindest theoretisch (in der zugrundeliegenden Mathematik) eine verlustfreie Kompression einstellen. Ob natürlich in der Praxis beim hin und herrechnen der Bytes wirklich wieder das selbe rauskommt, ist ne andere Frage. Der Fehler ist dann aber nur sehr gering ist und kann somit toleriert werden.

[Der Martin]

Hallo,

Allerdings -und da komme ich wieder aufs Bildbearbeitungsprogramm- bietet auch PNG die Variante mit nur 8bit pro Pixel (PNG8) und Farbpalette. Dann ist es einem "ausgewachsenen" GIF mit 256 Farben in etwa ebenbürtig. Diese Variante bietet aber nicht jedes Programm an.
Nachdem png ja auch komprimiert, geh ich eigentlich davon aus dass solche Dinge da nicht mehr ins Gewicht fallen dürften.
Aktueller Versuch mit Paint.NET. Zwei scharfe Linien ins Bild, das png Bild mit AutoErkennung ließ sich mittels zip von 11 kB auf 7 kB reduzieren. Das dürfte ja eigentlich nicht sein.

entspricht aber auch ungefähr meiner Erfahrung: Sehr simple PNG-Bilder lassen sich oft noch deutlich mehr komprimieren; selbst fotorealistische PNGs haben beim Zippen plötzlich noch 2..3% Luft.
Wir schließen daraus also, dass der Kompressionsalgorithmus von PNG (keine Ahnung, was da genau verwendet wird) nicht optimal ist.

[2] Gerüchten zufolge erlaubt auch das JPEG-Format eine verlustlose Speicherung, das habe ich aber in freier Wildbahn noch nicht angetroffen
Man kann ja die Kompressionsrate frei einstellen. Bei maximaler Qualität lässt sich hier zumindest theoretisch (in der zugrundeliegenden Mathematik) eine verlustfreie Kompression einstellen.

Ja, das könnte auch gehen, aber das meinte ich nicht. Ich meine, ich hätte tatsächlich mal in der Spec gelesen, dass alternativ zur DCT und dem bewussten Reduzieren hochfrequenter Anteile auch ein anderer Kompressionsalgorithmus verwendet werden kann, der dann prinzipbedingt verlustfrei ist.

Ciao,
 Martin

[Gunnar Bittersmann]

@@HP-User:

nuqneH

Grafik.png oder Grafik.jpg?

Je nach Bildinhalt. Lies dazu die Artikel Das richtige Grafikformat für den richtigen Zweck und mit anschaulichen Beispielbildern GIF oder JPEG (das für GIF Gesagte gilt auch für PNG-8).

Normalerweise nehme ich für die Grafikelemente, die für das Seitendesign zuständig sind immer "png". Für die Grafiken, die den Content betreffen "jpg".

Je nach Bildinhalt kann sowohl das eine als auch das andere falsch sein.

Qapla'

[HP-User]

Hi Gunnar

Normalerweise nehme ich für die Grafikelemente, die für das Seitendesign zuständig sind immer "png". Für die Grafiken, die den Content betreffen "jpg".

Je nach Bildinhalt kann sowohl das eine als auch das andere falsch sein.

Zur Erkärung, wieso ich bisher so verfahren habe:
König Kunde sagt normalerweise, was er für Inhalt haben will - und dazu gehöhren i. d. R. auch die Bilder, die er meistens mitbringt. Und Kunde tut dies fast immer im jpg-Format. Was anderes kennt der sowieso net. Und was der Bauer nicht kennt - blablabla.

So daß ich immer gut erkennen konnte, was im Projekt zu mir gehört, und was von Kd. kam. Der Inhalt ist von der Menge her gesehen eh größer als die Designelemente der Seite. Was auch für die Nutzung der jpgs für Kundeninhalt sprach.

Also war das von dieser Seite her nicht so abwegig oder falsch - wie du schreibst.

Betrachtet man rein den technichen Bereich, kann man natürlich auch mischen - da habt ihr alle Recht *g*

Gruß HP-User

[Gunnar Bittersmann]

@@HP-User:

nuqneH

König Kunde sagt normalerweise, was er für Inhalt haben will - und dazu gehöhren i. d. R. auch die Bilder, die er meistens mitbringt. Und Kunde tut dies fast immer im jpg-Format. Was anderes kennt der sowieso net.

Wenn ein Bild einmal (mit Verlust!) im JPEG-Format vorliegt, wird die Bildqualität natürlich nicht besser, wenn man dieses in ein anderes Format konvertiert.

Für Logos, Textgrafiken u.a. Grafiken mit wenigen Farben und scharfen Kanten ist JPEG nun einmal ungeeignet. Es wäre dein Job nachzufragen, ob du das Bild im Original (Bitmap, Photoshop) bekommen kannst und selber in das passende Format konvertierst.

Wenn der Kunde nur JPEG liefert: SISO (shit in – shit out).

Qapla'

PS: Das Grafikformat heißt JPEG, nicht JPG.