Wenn TYPO3 – Bilder plötzlich zu dunkel erscheinen – Ursachen und Lösungen

Wer hochwertige Bilder in seiner Website in TYPO3 verwendet, könnte in folgendem Problem landen: Nach dem Upload erscheinen die Bilder einer Film- und Medienproduktion plötzlich dunkler als im Original. Besonders bei PNG- und JPEG-Dateien fiel dies sofort ins Gewicht – ein Ärgernis, wenn die Bildwirkung sprich die Emotion eins Foto entscheidend ist.

In diesem Beitrag zeigen wir, warum TYPO3 12 LTS in Kombination mit ImageMagick Bilder abdunkeln kann und wie man das Problem Schritt für Schritt behebt.

 Die eigentliche Ursache: ImageMagick-Update auf dem Linux Sever

In unserem Falle wurde  der Effekt plötzlich sichtbar, nach einem Update von ImageMagick (neueste Version)  auf dem Server.
Dabei verändert sich die Art, wie ImageMagick den RGB-Farbraum interpretiert:

• Alte Versionen behandelten Bilder intern korrekt

• Neue Versionen (v7+) nutzen lineares RGB ohne ICC-Profil

• Ergebnis: Bilder wirken dunkler, kontrastärmer

Das betrifft nicht nur einzelne Bilder, sondern kann hunderte Dateien gleichzeitig beeinflussen – wie z. B. bei einem Jazz-Fotografen, dessen ganze Galerie plötzlich dunkler erschien.

TYPO3 GFX-Einstellungen prüfen

In TYPO3 12 LTS wird die Farbraum-Interpretation über die GFX-Konfiguration gesteuert. Problematisch ist:

'GFX' => [
    'processor' => 'ImageMagick',
    'processor_colorspace' => 'RGB', // Problem: erzeugt dunklere Bilder
]

Lösung: Auf sRGB stellen:

'GFX' => [
    'processor' => 'ImageMagick',
    'processor_colorspace' => 'sRGB',
]

‚

Schritt-für-Schritt sollten dann:

1. Caches leeren

   • TYPO3 Install Tool → Wartung → „Flush processed files“

   • Optional: „Clear all caches“

2. Temp-Dateien löschen

   • Ordner fileadmin/_processed_/ manuell oder per Istall Tool im Odernder Wartung leeren

3. Bilder ggf. neu hochladen

   • Neue Varianten werden im korrekten Farbraum erzeugt

CSS-Overlay prüfen

Manchmal wird das Bild zusätzlich dunkler, weil CSS-Overlays aktiv sind:

.textpic .image::after,
.gallery-item::after {
background: rgba(0,0,0,0.35); /* halbtransparentes Schwarz */
}

.textpic .image::after,
.gallery-item::after {
    background: rgba(0,0,0,0.1) !important;
}