Niedawno jeden z naszych czytelników zapytał nas o sposób zapobiegania utracie kolorów i nasycenia obrazków w WordPressie.
Jest to powszechny problem, z którym boryka się wielu użytkowników WordPressa podczas przesyłania obrazków do biblioteki multimediów. Obrazy czasami wyglądają na matowe i rozmyte, gdy są wyświetlane na twojej witrynie internetowej.
W tym artykule pokażemy, jak poprawić utratę kolorów i nasycenia obrazków w WordPress.
Oto krótki przegląd tematów, które omówimy w tym wpisie:
Dlaczego niektóre obrazki tracą kolory i nasycenie w WordPress?
Jedną z głównych przyczyn utraty kolorów i nasycenia na obrazkach jest przestrzeń kolorów. Przestrzeń kolorów to po prostu zakres kolorów dostępnych dla twojego aparatu lub innego urządzenia do robienia obrazków.
W Internecie używane są różne formy przestrzeni kolorów RGB (czerwony, zielony, niebieski). Dwie najpopularniejsze formy to Adobe RGB i sRGB.
Wielu profesjonalnych fotografów robi zdjęcia przy użyciu przestrzeni kolorów Adobe RGB, która ma więcej kolorów i oferuje znacznie lepsze rezultaty.
Jednak większość systemów zarządzania treścią (CMS), takich jak WordPress, korzysta z przestrzeni kolorów sRGB. Gdy przesyłasz swój obrazek, WordPress tworzy kilka rozmiarów obrazków i konwertuje je do sRGB. Te obrazki mają mniej kolorów niż Adobe RGB.
Obrazki przechwycone w przestrzeni kolorów Adobe RGB są bardziej żywe i dokładnie wyświetlają kolory w wysokich tonach. Po przekonwertowaniu przez WordPress te żywe kolory są zastępowane nieco wyciszonymi tonami.
Dla przykładu, oto porównanie obrazka o różnej jakości. Zdjęcie po lewej stronie zostało wykonane przy użyciu przestrzeni kolorów Adobe RGB. Jednak po przesłaniu do WordPressa obrazek traci swoją żywość i wygląda matowo.
WordPress kompresuje również obrazy o zmienionym rozmiarze, co może przyczynić się do niewielkiej utraty jakości. Aby uzyskać więcej szczegółów, przeczytaj nasz przewodnik na temat zwiększania lub zmniejszania kompresji obrazków JPEG w WordPressie.
Powiedziawszy to, zobaczmy, jak możemy zapobiec utracie kolorów i nasycenia obrazków w WordPressie.
Jak naprawić utratę kolorów i nasycenia obrazków w WordPressie za pomocą Photoshopa?
Najprostszym sposobem na rozwiązanie tego problemu jest konwersja twoich obrazków do przestrzeni kolorów sRGB przed przesłaniem ich do WordPressa. Można to łatwo zrobić za pomocą narzędzia do edycji obrazków, takiego jak Adobe Photoshop.
Metoda 1: Konwersja obrazków do sRGB
Najpierw należy otworzyć twój obrazek w programie Adobe Photoshop.
Z tego miejsca wystarczy przejść do Plik ” Eksport ” Zapisz dla Internetu (Legacy) z menu u góry.
Spowoduje to wyświetlenie okna dialogowego Zapisz dla Internetu, w którym można zaznaczyć pole „Konwertuj na sRGB” i zapisać.
Możesz również osadzać profil kolorów z twoim obrazkiem. Nie będzie to jednak miało większego wpływu na przeglądarki odczytujące obrazek.
Metoda 2: Edycja ustawień kolorów w programie Photoshop
Z drugiej strony, możesz użyć tej metody, jeśli nie jesteś zadowolony z wyniku pierwszej metody.
W programie Adobe Photoshop przejdź do opcji Edycja ” Ustawienia kolorów. Spowoduje to wyświetlenie okna dialogowego ustawień kolorów.
Z rozwijanego menu ustawień należy wybrać opcję „North America Web/Internet”.
Następnie w sekcji Zasady zarządzania kolorami wybierz ustawienia RGB, aby przekonwertować na robocze RGB. Następnie kliknij przycisk „OK”, aby zapisać twoje ustawienia.
Teraz musisz otworzyć oryginalne zdjęcie lub obrazek, który chcesz przesłać.
Jeśli profil przestrzeni roboczej nie pasuje, program Photoshop wyświetli ostrzeżenie i zapyta, co należy zrobić.
Powinieneś wybrać „Konwertuj kolor dokumentu na przestrzeń roboczą”, a następnie kliknąć „OK”. Profil kolorów twojego zdjęcia jest teraz dokładniej przekonwertowany. Możesz teraz zapisać obrazek, aby zachować twoje zmiany.
Powtórz ten proces dla wszystkich obrazków, które chcesz przesłać. Teraz możesz bezpiecznie przesłać te przekonwertowane obrazki bez utraty kolorów lub nasycenia w WordPress.
Jak naprawić utratę kolorów i nasycenia w WordPressie za pomocą GIMP-a
GIMP to potężna darmowa alternatywa dla Adobe Photoshop. Możesz go użyć do konwersji przestrzeni kolorów dla twojego uploadu WordPress.
GIMP zasadniczo wykrywa każdy obrazek, który próbujesz otworzyć, aby sprawdzić, czy ma osadzany profil kolorów. Jeśli twój obrazek jest w przestrzeni kolorów Adobe RGB, to GIMP automatycznie wyświetli okno dialogowe do jego konwersji.
Czasami obrazek może nie mieć osadzanego profilu kolorów lub program GIMP może nie odczytać go poprawnie. W takim przypadku konieczna będzie ręczna zmiana przestrzeni kolorów.
Po pierwsze, musisz wiedzieć, jakiej przestrzeni kolorów może używać twoje zdjęcie. Zwykle jest to Adobe RGB, ale może być inna. Jeśli nie masz pewności, możesz sprawdzić twój aparat, aby to ustalić.
Należy pamiętać, że GIMP nie ma wbudowanego profilu Adobe RGB. Będziesz musiał pobrać profil Adobe RGB ICC na swój komputer.
Wystarczy otworzyć witrynę internetową Adobe Digital Imagely Solutions i przewinąć ją w dół. Wybierz swój system operacyjny, a następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
Profile Adobe RGB ICC można pobrać w pliku zip. Wystarczy rozpakować plik zip, a wewnątrz niego powiadomienie o pliku AdobeRGB1998.icc.
Po pobraniu profilu ICC wystarczy otworzyć twój obrazek w programie GIMP. Następnie przejdź do Obrazek ” Tryb i upewnij się, że jest ustawiony na RGB.
Po zastosowaniu profilu kolorów, GIMP może teraz bezpiecznie przekonwertować go na sRGB bez utraty kolorów.
Wystarczy przejść do zakładki Obrazek ” Zarządzanie kolorami, a następnie wybrać opcję „Konwertuj na profil kolorów”.
Otworzy się nowe okno dialogowe.
Następnie ustaw opcję „Konwertuj na” jako „Wbudowane RGB” i kliknij przycisk „Konwertuj”.
GIMP przekonwertuje teraz profil kolorów na sRGB i będziesz mógł zapisać swój obrazek. Wystarczy powtórzyć ten proces dla innych obrazków, które chcesz przesłać do WordPressa.
Dodatkowe zasoby dla optymalizacji obrazków
Oto kilka przewodników, przez które możesz przejść, aby upewnić się, że twoje obrazki są odpowiednio zoptymalizowane:
- Jak prawidłowo dodawać obrazki w WordPress (krok po kroku)
- WebP vs. PNG vs. JPEG: Najlepszy format obrazków dla WordPressa
- Przewodnik dla początkujących po SEO obrazków – optymalizacja obrazków pod kątem wyszukiwarek internetowych
- Jak zbiorczo edytować wyróżniające się obrazki w WordPress?
- Jak wybrać najlepsze oprogramowanie do projektowania stron internetowych (porównanie)
- Przewodnik dla początkujących po rozmiarach obrazków WordPress (+ najlepsze praktyki)
- Porównanie najlepszych wtyczek WordPress do kompresji obrazków
Mamy nadzieję, że ten artykuł pomógł ci poprawić utratę kolorów i nasycenia obrazków w WordPress. Warto również zapoznać się z naszym przewodnikiem na temat sposobów zapobiegania kradzieży obrazków w WordPress ie i ostatecznym przewodnikiem po WordPress SEO.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Gen says
I tried this, and while there is improvement in image quality, it is still not the same quality image that I see in the program. What else can I do?
WPBeginner Support says
There will be a drop in quality mainly if you are not using web safe colors but by using this method the quality drop should be minimized compared to other methods.
Administrator
Shanon Sinn says
I just wanted to express my gratitude! Frustrated after making a graphic by hand illustrations/illustrator/photoshop that I could not get to right on WordPress. It has only a few colours (at first glance) but needs to be balanced, otherwise it just looks kindergarten. Thank you.
WPBeginner Support says
Glad our guide could help
Administrator
Joe Webmaster says
This is fantastic! I just noticed how faded my images are and just fixed the problem. I’ve been doing this for years and thought it was the compression. Gimp worked perfectly. Thank you !!! Can’t believe I have not come across this solution before.
WPBeginner Support says
Glad our recommendation was able to help
Administrator
Hagen says
Hi there,
just wanted to thank you for this great tutorial!
We just got our great, pricy pictures from our photographer and wanted to add them to our shop.
We werde so sad to see how they looked.
With converting to sRGB color, all pictures are displayed correctly.
Thanks!
WPBeginner Support says
You’re welcome, glad our recommendations could help
Administrator
Richard Silverbeet says
Good tips dude but images don’t „loose” colors, they „lose” colors. Loose is the opposite of tight.
WPBeginner Support says
Thank you for letting us know about that typo, we’ll be sure to fix it
Administrator
Kris Byers says
If it’s still not working after following the above, try removing custom css to see if its a stylesheet clash, this solved it for me!!
WPBeginner Support says
Thanks for sharing what fixed it for you
Administrator
Ash says
tried all the adjustments (even to an extreme change of saturation and contrast) and every time it strips it back to a muddy dull pic.
this is very frustrating for an artists website!!!
some other solution options would be appreciated if anyone knows other alternatives to this problem plz
Paul says
This is confusing, because you keep referring to RGB as a colorspace. RGB is a color model, not a color space. You can’t contrast RGB with sRGB, because sRGB is a color space that is in fact RGB.
Are you using RGB as shorthand for Adobe RGB? All of these color spaces … sRGB, Adobe RGB, ProPhoto RGB, etc., are RGB spaces. I literally don’t know how to interpret what you’re saying.
The real question that needs to be answered: is WordPress stripping the ICC profiles from the images? Modern browsers are starting to use the profiles for color management, but they can’t do it if WP is jacking everything up.
This is mostly a problem for people who have graphic arts monitors … ones that show a wider color gamut than the sRGB space. Untagged images look terrible on these.
Julie says
What if your photos are already inside of wordpress and you don’t have them on your computer?
Rosa Bosma says
This is an awesome trick, not just for WordPress, but many other platforms as well! E.g., it allows you to upload a profile picture with much more vivid colours.
francisco cuellar says
NOPE didnt work, colors still dull
Daisy says
I have been struggling with the color loss a lot now and it is driving my slightly insane. I have been exporting my images as RGB, both sRGB and the web one in all possible combinations and WordPress is still stripping the color from my images. I don’t know what to do at this point.
Sandra Collins says
Thank you for this! It solved a problem I was having with a logo image where WP changed the color from purple to blue.
jmdaix says
May be an easy way to do this is to enable „Convert to sRGB” from the Photoshop „Save For Web” menu. You will keep your psd or original file with your working space and just export a good version for WordPress.
Paddy says
Is there a similar process when using GIMP? Thanks.
WPBeginner Support says
We have updated the article with section on how to do this in GIMP. Hope this helps.
Administrator
Jaime says
Will this work for Gimp, or only PS?
WPBeginner Support says
We have updated the article with instructions on how to do this with GIMP.
Administrator
Jon Brown says
You interchanged terms several times. The color space names are sRGB and Adobe RGB. For example there is no such thing as „Adobe sRGB”.