WordPress & Webwork

Probleme mit PNGs bei Vorschaubilder-Generierung in WordPress

In WordPress gibt es das Problem, dass die PNG-Vorschaubilder größer sind als die PNG-Originalgrafiken.

Um es kurz und knackig zu sagen: WordPress hat ein Problem bei der Generierung von Vorschaubildern im PNG-Format. Welches Problem? Die Vorschaubilder bzw. die Thumbnails, sind größer oder besser gesagt, sie haben eine höhere Dateigröße als die Originalgrafiken. Hier eine Abbildung, die das ganze verdeutlicht, ich habe die wichtigen Stellen hervorgehoben:

WordPress und die Vorschaubildgenerierung eine PNG-Grafik

In der Grafik erkennt man zuerst das Problem. Links sind die Daten der Original-Grafik. Obwohl die 686×521 Pixel groß ist, ist sie knapp 19KB groß. Das Vorschaubild dagegen ist lediglich 230×180 Pixel groß und trotz den deutlich kleineren Abmessungen belegt sie mehr als 24KB. Das ist etwa 30% mehr an Dateigröße.

In der Abbildung sieht man auch die Ursache für das "Übergewicht". Die Originalgrafik ist als 8-Bit abgespeichert, dass heißt es wird ein Farbraum von maximal 256 (28 = 256) Farben abdeckt. Das Vorschaubild was WordPress dann generiert hat allerdings einen Farbraum von 24-Bit, also 16,777 Millionen Farben.

Die Lösung der PNG-Problematik

Und wie kann man das Problem jetzt lösen? Es gibt keine, in meinen Augen, zufriedenstellende Lösung. Zumindest habe ich bis jetzt keine gefunden. Lediglich Abhilfen (aka Workarounds).

  1. Man könnte auf die PNGs komplett verzichten und stattdessen immer JPGs, da bei den JPGs dieses Problem nicht auftritt. Die JPGs haben aber den Nachteil, dass sie speziell bei Screenshots mit Textelementen keine gute Figur abliefern und auch bei viel höheren Dateigrößen als bei einem PNG dennoch den Text verschwommen anzeigen.
  2. Was ich des öfteren mache: das besagte Vorschaubild herunterladen, in IrfanView abspeichern und hochladen. Das ist natürlich nur eine gängige Alternative wenn es nicht zu viele Grafiken sind. Oder halt direkt bei der Erstellung de Plugins das passende Vorschaubild erstellen.
  3. Oder die folgende Funktion einsetzen um die PNG-Originalgrafiken als JPG-Vorschaubilder abzuspeichern.

Was ich noch nicht getestet habe, ist ob die bekannten Bildoptimieurngsplugins wie Optimus & Co. dieses Problem angehen? Was man als Lösung ebenfalls ausschließen kann ist der Einsatz von GIF. Zum einen sind die Originalbilder in der Regel größer als PNGs und zum anderen sind die Vorschaubilder entweder kaum kleiner oder sogar noch größer als das Original. Zwar war der der Unterschied nicht so gravierend wie bei den PNGs, aber auch als Abhilfe, bringt das einen nicht weiter.

5 Reaktion(en)

    1. Vladimir

      Hallo Christoph,

      ja, dass müsste aber dann bei WordPress selber stattfinden, da WP auch 8-Bit-Bilder (siehe oben) ebenfalls in 24-Bit umwandelt. Würde WP bei der Umwandlung ebenfalls die Bittiefe belassen, wie sie ist, würde das ausreichen.

  1. Torsten

    Da gibt es bereits Tickets zu.

    Hier zum exakten Problem:
    https://core.trac.wordpress.org/ticket/30402

    Und hier ein Sammelticket für Verbesserungen an Imagick:
    https://core.trac.wordpress.org/ticket/33642

    Aber gerade letzteres ist bereits geschlossen und sollte das Problem (zumindest mit Imagick) lösen, da die Farbtiefe auf 8-bit begrenzt wird:
    https://github.com/WordPress/WordPress/blob/dd6da701b286579819cd6aa518aa2d7018efd759/wp-includes/class-wp-image-editor-imagick.php#L389-L394

    Die Frage ist also, warum klappt das nicht. Bei welchem Hoster bist du? Welche Version von Imagick läuft da (wenn überhaupt). Als Fallback wird sonst, glaube ich, GD benutzt. Welche Version?

      1. Torsten

        Hi Vladimir,
        es wird ja vorher mit is_callable getestet, ob die Methode überhaupt aufgerufen werden kann. Du könntest ja mal testen, ob das bei all-inkl.com und der dort installierten Imagick-Variante möglich ist. Wenn das false ausgibt, dann wird die Farbtiefe natürlich nicht geändert (bzw. springt anscheinend auf einen höheren Standardwert).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.