Die Subsampling-Einstellung 4:4:4 bedeutet kein Chroma-Subsampling, damit auch keine Neigung zu besagten Farbflecken. 4:1:1 bedeutet hingegen stärkstes Subsampling und damit stärkere Neigung zu Farbflecken. Beispiel (Beachte mal den Übergang am linken Rand der Dose):

Das PNG-Format für Text, Grafik und verlustfreie Darstellung

Das PNG-Format ist vergleichsweise neu und hat ein paar andere Tricks auf Lager. So kann man beim PNG die Farben reduzieren. Für den Screenshot eines Programm-Menüs hier, braucht man keine 16,8 Millionen Farben. Man möchte aber scharfe lesbare Schriften und genau das erreicht man mit dem PNG-Format, in dem man die Farben beim Export (in Riot) auf 256 oder 128 reduziert. Im Gegensatz zum JPEG, bleiben bei PNG alle starken Kontrastübergänge (welche man etwa bei schwarzem Text auf weißem Grund hat) scharf.

Beispiel (den Regler zum Vergleich schieben):

Um dieses Menü scharf und gut lesbar darzustellen, brauche ich beim JPEG mit 89% Qualität 66 kB Speicherplatz. Beim PNG mit 256 Farben sind es jedoch nur 12,5 kB! Dabei ist das PNG noch schärfer, wenn du dir den Bereich um die Texte einmal genau ansiehst und die Datei ist trotzdem 81 % kleiner als das JPEG.

Du kannst beim PNG die Anzahl der Farben auch noch weiter reduzieren und kann damit noch mehr einsparen.

PNG ist also die Format-Wahl, wenn es um textlastige und grafische Bildinhalte geht.

PNG kann aber auch 16.8 Millionen Farben (True Color) darstellen und das ohne die Kompressions-Artefakte von JPEG. Allerdings sind diese Dateien dann um ein Vielfaches größer, als das JPEG. Interessant ist das, wenn man eine unkomprimierte, also verlustfreie Datei zum Download oder zur Ansicht bereitstellen möchte, die praktisch jeder öffnen und anzeigen kann.

Ein weiteres Feature von PNG ist die Darstellung von Alpha-Transparenzen, d. h. von transparenten Bereichen im Bild – ideal für freigestellte Bilder. Das könnte z. B. bei Pressemitteilungen mit Produktfotos interessant sein.

Mit PNG zu besserer Bildqualität bei Facebook

Facebook komprimiert bereits komprimierte JPEG-Dateien noch einmal, sodass die Qualität dann häufig ziemlich schlecht ist. Wenn du aber ein Foto als True Color PNG hochlädst, ist der Qualitätsverlust deutlich geringer – allerdings dauert der Upload länger.

GIF – der Web-Klassiker unter den Grafikformaten

GIF ist der Opa unter den Grafikformaten fürs Web. Ein GIF kann grundsätzlich nur max 256 Farben darstellen. Es eignet sich aber, ebenso wie PNG, für die Darstellung von Grafiken und Schriften.

Es kann auch Transparenzen darstellen, allerdings keine Alpha-Transparenzen.

Was es am besten kann, war schon fast totgesagt: Animationen. Dafür sollte es heutzutage ausschließlich genutzt werden. Ansonsten ist das PNG sein Nachfolger.

Wenn du diese Grundregeln befolgst, werden deine Bilder im Blog, bei Facebook oder im Online-Shop immer ordentlich aussehen und schnell laden.

Dieser Beitrag hat mehrere Seiten:
1 2 3

4 Responses

  1. René

    Interessant, was PNG und Facebook angeht. Gilt das auch für Instagram? Da ist die Komprimierung durch Instagram ja noch gruseliger als bei Facebook, besonders, wenn man Bilder am Desktop anschaut.

    Antworten
  2. Christine

    Hallo, sehr interessant, gibt es etwas adäquates auch für Mac? RIOT funktioniert ja wohl nur mit Windows.
    Schöne Grüße, Christine

    Antworten
  3. Sylvi

    Super!

    Vielen Dank Markus für diesen hilfreichen Beitrag. Eigentlich verwende ich schon seit zig Jahre Riot – sowohl als Standalone- als auch Plugin-Variante für Irfan View. Allerdings arbeite ich noch nicht so lange mit Lightroom.
    Dank Deinem Tipp habe ich es nun direkt mit Lightroom verknüpft und spare bei dem Exportvorgang, Speichern und der anschließenden Optimierung für meine Webseiten glatt einen Arbeitsgang bzw. etliche Mausklicks ein. 😉
    Klappt wunderbar.
    Allerdings habe ich das Festlegen für die Bearbeitung mit einem externen Programm in den Voreinstellungen ausgelassen und direkt in den Exporteinstellungen eingetragen.

    Gruß
    Sylvi

    Antworten

Und jetzt seid ihr dran! Schreibt doch einen Kommentar!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Mit gekennzeichnete Links sind Affiliate-Links zu Amazon