Vorteile von JPG und PNG kombinieren

Wenn Fotos mit Transparenz versehen werden sollen, wünscht man sich ein Bildformat, das verlustbehaftet komprimiert und Transparenz unterstützt.

Wann verwendet man JPG, wann PNG (oder SVG)

Die zur Zeit nutzbaren Formate fürs Web sind — neben SVG — PNG und JPEG. Die Unterschiede sind:

• JPG komprimiert verlustbehaftet (mit Qualitätsverlust) und ist damit gut geeignet für Fotos und andere Bilder mit vielen Farben
• PNG komprimiert ohne Einbußen in der Qualität, funktioniert aber nur bei Illustrationen mit wenigen Farben gut — wofür SVG meist besser geeignet wäre

Fotos mit Transparenz?

Möchte man zum Beispiel ein Foto freistellen und auf z.B. einem Verlauf platzieren, ist Transparenz nötig.

Nur PNG unterstützt Transparenz, in der 24-bit-Version sogar mit einem vollwertigen Alphakanal. Man kann also Verläufe zu Transparenz realisieren, was wesentlich weicher aussieht.

Leider fallen Fotos als PNG abgespeichert in der Dateigröße sehr groß aus, zumal die Komprimierung keine Verluste zulässt, die in einem Foto oft aber gar nicht bemerkbar wären.

Verlustbehaftete PNG erstellen mit TinyPNG

Die klasse Webseite TinyPNG bietet uns den grandiosen kostenlosen Dienst, genau dieses Dilemma zu lösen: Man lädt seine PNGs einfach hoch und die Seite erstellt eine indizierte Version der Dateien, die wesentlich kleiner ausfallen.

Dabei wird ein sehr guter Algorithmus angewandt, der ähnliche Farben zusammen fasst. Ein Unterschied zum Original ist kaum merkbar — von der Dateigröße mal abgesehen.

Mein Beispielbild mit 625x305 px² hatte aus Photoshop exportiert stolze 341 KiB, nach der Komprimierung mit TinyPNG nur noch 85,7 Kib. Das kann sich sehen lassen! Ich nehme keinen Unterschied war, ihr vielleicht?