Sie verbringen Stunden damit, ein Foto zu bearbeiten, nur damit es nach dem Hochladen in WordPress stumpf und verwaschen aussieht. Wir haben diese genaue Frustration viele Male mit unseren eigenen Beitragsbildern erlebt.
Dieses Problem tritt normalerweise aufgrund einer einfachen Nichtübereinstimmung zwischen Farbprofilen auf. Glücklicherweise können Sie es in nur wenigen Sekunden beheben, indem Sie die Datei konvertieren, bevor Sie sie hochladen.
In diesem Leitfaden zeigen wir Ihnen, wie Sie Farb- und Sättigungsverlust bei Bildern in WordPress beheben.
Hier ist ein kurzer Überblick über die Themen, die wir in diesem Beitrag behandeln werden:
Warum verlieren einige Bilder in WordPress Farbe und Sättigung?
Einer der Hauptgründe für den Farb- und Sättigungsverlust bei Bildern ist der Farbraum.
Ein 'Farbraum' ist ein bestimmter Farbbereich, den eine Kamera oder ein Bildschirm anzeigen kann. Sie können es sich wie eine bestimmte Schachtel Buntstifte vorstellen. Einige Schachteln haben mehr Farbtöne als andere.
Verschiedene Formen von RGB (Rot, Grün, Blau) Farbräumen werden im Internet verwendet. Die beiden gebräuchlichsten Formen sind Adobe RGB und sRGB.
Viele professionelle Fotografen fotografieren im Adobe RGB-Farbraum, der mehr Farben hat und wesentlich bessere Ergebnisse liefert.
Die meisten Content-Management-Systeme (CMS) wie WordPress verlassen sich jedoch auf den sRGB-Farbraum. Wenn Sie ein Bild hochladen, komprimiert WordPress es und entfernt oft die eingebetteten 'ICC-Profil'-Metadaten (das Etikett, das Bildschirmen sagt, welche Farben verwendet werden sollen).
Ohne dieses Etikett behandeln Browser das Bild als sRGB, wodurch die Farben verwaschen aussehen.
Mit dem Adobe RGB-Farbraum aufgenommene Bilder sind lebendiger und zeigen Farben in hohen Tönen genauer an. Wenn sie von WordPress konvertiert werden, werden diese lebendigen Farben durch leicht gedämpfte Töne ersetzt.
Hier ist zum Beispiel ein Vergleich eines Bildes mit unterschiedlichen Bildqualitäten. Das Bild auf der linken Seite wurde im Adobe RGB-Farbraum aufgenommen. Wenn es jedoch in WordPress hochgeladen wird, verliert das Bild seine Lebendigkeit und sieht stumpf aus.
WordPress komprimiert auch die verkleinerten Bilder, was zu einem leichten Qualitätsverlust führen kann. Weitere Details finden Sie in unserem Leitfaden zur Änderung der JPEG-Bildkomprimierung in WordPress.
Mit diesem Wissen wollen wir uns ansehen, wie Sie Farb- und Sättigungsverlust bei Bildern in WordPress einfach verhindern können.
So beheben Sie Farb- und Sättigungsverlust für Bilder in WordPress mit Photoshop
Der einfachste Weg, dieses Problem zu beheben, ist die Konvertierung Ihrer Bilder in den sRGB-Farbraum, bevor Sie sie auf WordPress hochladen. Dies kann einfach mit einem Bildbearbeitungswerkzeug wie Adobe Photoshop erfolgen.
Dies ist die exakte Methode, die unser eigenes Designteam hier bei WPBeginner verwendet. Sie stellt sicher, dass alle Screenshots und Feature-Grafiken, die Sie in unseren Tutorials sehen, jedes Mal gestochen scharf und farbgenau sind.
Methode 1: Bilder in sRGB konvertieren
Zuerst müssen Sie Ihr Bild in Adobe Photoshop öffnen.
Von hier aus gehen Sie einfach im Menü oben zu Datei » Exportieren » Für Web speichern (Legacy).
Dies öffnet das Dialogfeld 'Für Web speichern'. Hier ist es entscheidend, dass Sie das Kontrollkästchen 'In sRGB konvertieren' aktivieren.
Dies stellt sicher, dass das Bild in WordPress genauso aussieht wie in Photoshop.
Methode 2: Farbeinstellungen in Photoshop bearbeiten
Andererseits können Sie diese Methode verwenden, wenn Sie mit dem Ergebnis der ersten Methode nicht zufrieden sind.
Gehen Sie in Adobe Photoshop zu Bearbeiten » Farbeinstellungen. Daraufhin öffnet sich das Dialogfeld für die Farbeinstellungen.
Sie müssen 'North America Web/Internet' aus dem Dropdown-Menü der Einstellungen auswählen.
Wählen Sie dann im Abschnitt „Farbmanagementrichtlinien“ die RGB-Einstellungen auf In Arbeits-RGB konvertieren. Klicken Sie dann auf die Schaltfläche „OK“, um Ihre Einstellungen zu speichern.
Jetzt müssen Sie das Originalfoto oder Bild öffnen, das Sie hochladen wollten.
Wenn das Arbeitsbereichsprofil nicht übereinstimmt, zeigt Photoshop eine Warnung an und fragt Sie, was zu tun ist.
Sie sollten 'Dokumentenfarbe in Arbeitsbereich konvertieren' auswählen und dann auf 'OK' klicken. Das Farbprofil Ihres Fotos ist nun genauer konvertiert. Sie können das Bild jetzt speichern, um Ihre Änderungen zu erhalten.
Wiederholen Sie den Vorgang für alle Bilder, die Sie hochladen möchten. Jetzt können Sie diese konvertierten Bilder sicher ohne Farb- oder Sättigungsverlust in WordPress hochladen.
Wie man Farb- und Sättigungsverlust in WordPress mit GIMP behebt
GIMP ist eine leistungsstarke kostenlose Alternative zu Adobe Photoshop. Sie können es verwenden, um den Farbraum für Ihre WordPress-Uploads zu konvertieren.
GIMP erkennt im Grunde jedes Bild, das Sie zu öffnen versuchen, um zu sehen, ob ein Farbprofil eingebettet ist. Wenn Ihr Bild im Adobe RGB-Farbraum vorliegt, zeigt GIMP automatisch ein Dialogfeld an, um es zu konvertieren.
Manchmal hat ein Bild kein eingebettetes Farbprofil oder GIMP kann es nicht richtig lesen. In diesem Fall müssen Sie den Farbraum manuell ändern.
Zuerst müssen Sie wissen, welchen Farbraum Ihr Foto verwendet. Normalerweise ist es Adobe RGB, aber es kann auch anders sein. Wenn Sie unsicher sind, können Sie Ihr Kameragerät überprüfen, um dies herauszufinden.
Öffnen Sie einfach Ihr Bild in GIMP. Gehen Sie dann zu Bild » Farbmanagement » In Farbprofil konvertieren.
Sobald Sie das Farbprofil angewendet haben, kann GIMP es nun sicher in sRGB konvertieren, ohne Farben zu verlieren.
Gehen Sie einfach zu Bild » Farbmanagement und wählen Sie dann die Option „In Farbprofil konvertieren“.
Ein neues Dialogfeld wird nun geöffnet.
Ein neues Dialogfeld wird geöffnet. Stellen Sie die Option 'Konvertieren nach' auf 'sRGB eingebaut' (oder manchmal auch nur 'RGB eingebaut' genannt) und klicken Sie auf die Schaltfläche 'Konvertieren'.
GIMP konvertiert nun das Farbprofil in sRGB, und Sie können Ihr Bild speichern. Wiederholen Sie einfach den Vorgang für andere Bilder, die Sie auf WordPress hochladen möchten.
Häufig gestellte Fragen zu Bildfarben in WordPress
Im Laufe der Jahre haben wir bei der Unterstützung Tausender von Benutzern immer wieder einige Fragen zu WordPress-Bildern bemerkt. Hier sind Antworten auf die häufigsten, die wir erhalten.
Reduziert WordPress immer die Bildqualität?
Standardmäßig komprimiert WordPress Bilder, um die Ladezeit Ihrer Website zu verkürzen. Dies kann manchmal zu leichter Pixelbildung führen, aber der Farbunterschied wird normalerweise durch das fehlende sRGB-Profil verursacht, das wir zuvor besprochen haben.
Kann ich die Farbe von Bildern beheben, die bereits in meine Mediathek hochgeladen wurden?
Derzeit kann WordPress das Farbprofil von bereits hochgeladenen Bildern nicht automatisch korrigieren. Sie müssen das Originalbild auf Ihrem Computer in sRGB konvertieren und es dann erneut in Ihre Mediathek hochladen.
Ist sRGB der beste Farbraum für alle Web-Bilder?
Ja, sRGB ist der Standardfarbraum für das Web. Fast alle Webbrowser und Geräte sind darauf ausgelegt, ihn korrekt anzuzeigen. Die Konvertierung Ihrer Bilder in sRGB stellt sicher, dass die Farben für alle Ihre Besucher konsistent aussehen.
Zusätzliche Ressourcen zur Bildoptimierung
Hier sind einige Anleitungen, die Sie durchgehen können, um sicherzustellen, dass Ihre Bilder richtig optimiert sind:
- So fügen Sie Bilder in WordPress richtig hinzu (Schritt für Schritt)
- WebP vs. PNG vs. JPEG: Das beste Bildformat für WordPress
- Leitfaden für Anfänger zur Bild-SEO – Bilder für Suchmaschinen optimieren
- Wie man Featured Images in WordPress per Massenbearbeitung ändert
- Wie Sie die beste Webdesign-Software auswählen (im Vergleich)
- Anfängerleitfaden zu WordPress-Bildgrößen (+ Best Practices)
- Die besten WordPress-Bildkomprimierungs-Plugins im Vergleich
Wir hoffen, dieser Artikel hat Ihnen geholfen, Farb- und Sättigungsverlust bei Bildern in WordPress zu beheben. Möglicherweise möchten Sie auch unseren Leitfaden zu Möglichkeiten zum Schutz vor Bilderdiebstahl in WordPress und wie Sie Ihre WordPress-Mediathek bereinigen ansehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Gen
Ich habe das ausprobiert, und obwohl die Bildqualität verbessert ist, ist sie immer noch nicht die gleiche Qualität, die ich im Programm sehe. Was kann ich sonst noch tun?
WPBeginner Support
Es wird hauptsächlich zu einem Qualitätsverlust kommen, wenn Sie keine web-sicheren Farben verwenden, aber mit dieser Methode sollte der Qualitätsverlust im Vergleich zu anderen Methoden minimiert werden.
Admin
Shanon Sinn
Ich wollte nur meine Dankbarkeit ausdrücken! Frustriert, nachdem ich eine Grafik von Hand mit Illustrationen/Illustrator/Photoshop erstellt hatte, die ich auf WordPress nicht richtig hinbekommen habe. Sie hat nur wenige Farben (auf den ersten Blick), muss aber ausgewogen sein, sonst sieht sie einfach nach Kindergarten aus. Danke.
WPBeginner Support
Glad our guide could help
Admin
Joe Webmaster
Das ist fantastisch! Mir ist gerade aufgefallen, wie verblasst meine Bilder sind und habe das Problem behoben. Ich mache das schon seit Jahren und dachte, es läge an der Komprimierung. Gimp hat perfekt funktioniert. Danke!!! Ich kann nicht glauben, dass ich diese Lösung noch nicht zuvor gefunden habe.
WPBeginner Support
Glad our recommendation was able to help
Admin
Hagen
Hallo,
wollte Ihnen nur für dieses großartige Tutorial danken!
Wir haben gerade unsere tollen, teuren Bilder von unserem Fotografen erhalten und wollten sie unserem Shop hinzufügen.
Wir waren so traurig zu sehen, wie sie aussahen.
Durch die Konvertierung in sRGB-Farbe werden alle Bilder korrekt angezeigt.
Danke!
WPBeginner Support
You’re welcome, glad our recommendations could help
Admin
Richard Silverbeet
Gute Tipps, Kumpel, aber Bilder „verlieren“ keine Farben, sie „verlieren“ Farben. Loose ist das Gegenteil von tight.
WPBeginner Support
Thank you for letting us know about that typo, we’ll be sure to fix it
Admin
Kris Byers
Wenn es nach Befolgen der obigen Schritte immer noch nicht funktioniert, versuchen Sie, benutzerdefiniertes CSS zu entfernen, um zu sehen, ob es sich um einen Konflikt mit der Stylesheet handelt. Das hat bei mir das Problem gelöst!!
WPBeginner Support
Thanks for sharing what fixed it for you
Admin
Ash
Habe alle Anpassungen ausprobiert (sogar extreme Änderungen an Sättigung und Kontrast) und jedes Mal wird es zu einem matten, stumpfen Bild zurückgesetzt.
das ist sehr frustrierend für eine Künstler-Website!!!
andere Lösungsoptionen wären willkommen, wenn jemand andere Alternativen zu diesem Problem kennt, bitte
Paul
Das ist verwirrend, weil Sie sich ständig auf RGB als Farbraum beziehen. RGB ist ein Farbmodell, kein Farbraum. Sie können RGB nicht mit sRGB kontrastieren, da sRGB ein Farbraum ist, der tatsächlich RGB ist.
Verwenden Sie RGB als Kurzform für Adobe RGB? All diese Farbräume… sRGB, Adobe RGB, ProPhoto RGB usw. sind RGB-Räume. Ich weiß buchstäblich nicht, wie ich interpretieren soll, was Sie sagen.
Die eigentliche Frage, die beantwortet werden muss: Entfernt WordPress die ICC-Profile aus den Bildern? Moderne Browser beginnen, die Profile für die Farbverwaltung zu verwenden, aber sie können das nicht tun, wenn WP alles durcheinanderbringt.
Das ist hauptsächlich ein Problem für Leute, die Grafikmonitore haben ... solche, die ein breiteres Farbspektrum als der sRGB-Bereich anzeigen. Ohne Kennzeichnung versehene Bilder sehen darauf schrecklich aus.
Julie
Was ist, wenn Ihre Fotos bereits in WordPress sind und Sie sie nicht auf Ihrem Computer haben?
Rosa Bosma
Das ist ein großartiger Trick, nicht nur für WordPress, sondern auch für viele andere Plattformen! Z.B. können Sie damit ein Profilbild mit viel lebendigeren Farben hochladen.
francisco cuellar
NEIN, hat nicht funktioniert, Farben immer noch stumpf
Daisy
Ich habe jetzt viel mit dem Farbverlust zu kämpfen und das macht mich ein wenig wahnsinnig. Ich habe meine Bilder als RGB exportiert, sowohl sRGB als auch das Web-Format in allen möglichen Kombinationen, und WordPress entfernt immer noch die Farbe aus meinen Bildern. Ich weiß im Moment nicht, was ich tun soll.
Sandra Collins
Vielen Dank dafür! Es hat ein Problem gelöst, das ich mit einem Logo-Bild hatte, bei dem WP die Farbe von Lila zu Blau geändert hat.
jmdaix
Vielleicht ist ein einfacher Weg, dies zu tun, die Option „In sRGB konvertieren“ im Menü „Für Web speichern“ von Photoshop zu aktivieren. Sie behalten Ihre PSD- oder Originaldatei mit Ihrem Arbeitsbereich und exportieren nur eine gute Version für WordPress.
Paddy
Gibt es einen ähnlichen Prozess, wenn man GIMP verwendet? Danke.
WPBeginner Support
Wir haben den Artikel um einen Abschnitt erweitert, der erklärt, wie man dies in GIMP macht. Wir hoffen, das hilft.
Admin
Jaime
Funktioniert das für Gimp oder nur für PS?
WPBeginner Support
Wir haben den Artikel mit Anleitungen, wie man das mit GIMP macht, aktualisiert.
Admin
Jon Brown
Sie haben die Begriffe mehrmals vertauscht. Die Farbnamen sind sRGB und Adobe RGB. Zum Beispiel gibt es so etwas wie „Adobe sRGB“ nicht.