Jak naprawić zbyt ciemne lub zbyt jasne zdjęcia w motywie

Dlaczego zdjęcia w WordPress są zbyt ciemne lub zbyt jasne?

Jeśli zdjęcie wygląda dobrze na komputerze, ale źle na stronie, nie zaczynaj od ponownej obróbki. Najpierw porównaj oryginał z plikiem otwartym bezpośrednio z biblioteki mediów i z obrazem w treści strony. Sprawdź też, czy problem dotyczy jednego zdjęcia, całej galerii czy tylko nagłówka.

Różnicę może powodować nakładka na zdjęciu, filtr CSS, inny rozmiar obrazu lub wersja serwowana przez wtyczkę albo CDN. Jeżeli bezpośrednio otwarty plik też wygląda źle, sprawdź oryginał i ustawienia ekranu.

Metoda 1: popraw oryginalne zdjęcie

W panelu WordPress wybierz Media → Biblioteka, otwórz zdjęcie i porównaj jego plik z oryginałem. Wbudowany edytor umożliwia między innymi przycinanie, obracanie i skalowanie, ale nie udostępnia suwaków jasności ani kontrastu.

1. Jeśli już oryginał jest za ciemny lub prześwietlony, zachowaj go i otwórz kopię w edytorze, np. GIMP lub Lightroom.
2. Delikatnie skoryguj ekspozycję i sprawdź szczegóły w cieniach i jasnych partiach. Mocno prześwietlonych detali nie zawsze da się odzyskać.
3. Wyeksportuj kopię, prześlij ją do biblioteki i podmień zdjęcie w odpowiednim bloku. Sprawdź też inne miejsca, w których używasz starego pliku.

Przed zmianami przygotuj kopię zapasową witryny. Nowy plik może mieć inny adres, dlatego nie usuwaj starego bez sprawdzenia jego użycia.

Metoda 2: sprawdź filtry CSS

Na stronie kliknij zdjęcie prawym przyciskiem myszy i wybierz Zbadaj. W panelu stylów sprawdź właściwości filter i opacity obrazu oraz jego elementów nadrzędnych. Zwróć też uwagę na osobną nakładkę lub pseudoelement nad zdjęciem. Tymczasowe wyłączenie reguły w narzędziach przeglądarki pozwoli sprawdzić przyczynę bez zapisywania zmian.

Jeśli winny jest filtr motywu, najlepiej zmienić jego ustawienie albo poprawić konkretną regułę. Gdy potrzebna jest niewielka korekta CSS, nadaj wybranemu blokowi Obraz dodatkową klasę korekta-zdjecia w sekcji Zaawansowane, a następnie użyj:

.korekta-zdjecia img {
    filter: brightness(1.1);
}

Wartość 1 nie zmienia jasności, wyższa rozjaśnia, a niższa, np. 0.9, przyciemnia. Reguła dotyczy obrazów wewnątrz oznaczonego bloku; nie musi działać na zdjęcie tła. Może też zastąpić inny filtr na tym samym elemencie. Sprawdź efekt przed publikacją i usuń regułę, jeśli pogarsza inne obrazy. W motywie klasycznym CSS można zwykle dodać przez Wygląd → Personalizacja → Dodatkowy CSS; w motywie blokowym dostępność odpowiedniego pola zależy od wersji WordPressa i konfiguracji.

Metoda 3: sprawdź ustawienia bloku i motywu

W edytorze zaznacz problematyczny blok. W bloku Okładka sprawdź kolor i krycie nakładki; zmniejszenie krycia może odsłonić zdjęcie. W blokach Obraz, Galeria i Okładka sprawdź również filtr duotone. Nazwy i dostępność opcji zależą od wersji edytora i motywu.

Jeśli problem występuje w wielu miejscach, sprawdź także style globalne edytora witryny lub ustawienia motywu. Porównaj tryb jasny i ciemny. Po zmianie nakładki upewnij się, że tekst na zdjęciu nadal ma wystarczający kontrast. Nie edytuj bezpośrednio plików motywu nadrzędnego: aktualizacja może je nadpisać.

Metoda 4: porównaj wersje zdjęcia i lightbox

Otwórz zdjęcie bezpośrednio w nowej karcie i porównaj je z widokiem na stronie. W narzędziach przeglądarki sprawdź, jaki adres i rozmiar faktycznie pobrano: responsywna strona może wybrać inną wersję obrazu niż ta widoczna w bibliotece.

Jeśli korzystasz już z lightboxa, porównaj zdjęcie w powiększeniu z miniaturą. Różnica może wskazać na style galerii lub różne pliki, ale lightbox sam nie naprawia ekspozycji. Jeśli podejrzewasz optymalizację lub CDN, porównaj ich plik z oryginałem i sprawdź ustawienia na kopii testowej. Po zmianie wyczyść odpowiedni cache zgodnie z konfiguracją witryny.

Metoda 5: przetestuj na różnych ekranach

1. Porównuj tę samą stronę i ten sam plik przy podobnej jasności ekranu; wyłącz na czas próby filtry nocne i inne zmiany kolorów.
2. Sprawdź stronę na komputerze i rzeczywistym telefonie, w jasnym i ciemnym trybie strony, jeśli są dostępne.
3. Użyj trybu responsywnego przeglądarki do sprawdzenia układu i kadru, ale nie traktuj go jako symulacji kolorów fizycznego ekranu.

Jeśli różnica występuje tylko na jednym urządzeniu, sprawdź jego ustawienia wyświetlania, zanim zmienisz zdjęcie dla wszystkich odwiedzających.

Metoda 6: przygotuj zdjęcia do publikacji

• Eksportuj kopię w profilu sRGB i porównaj ją z oryginałem w przeglądarce.
• Dobierz wymiary do miejsca użycia oraz ekranów o większej gęstości pikseli. Porównaj jakość i rozmiar pliku zamiast stosować jeden limit dla wszystkich zdjęć.
• JPEG i WebP nadają się do zdjęć; wybór formatu nie naprawi jednak błędnej nakładki czy filtra. Po kompresji sprawdź szczegóły i kolory.
• Dodaj opis alternatywny, jeśli zdjęcie przekazuje treść; dla czysto dekoracyjnego obrazu pozostaw go pustym.

Zmiana rozmiarów w ustawieniach mediów nie poprawia automatycznie istniejących miniaturek. Ich regenerację rozważ dopiero po ustaleniu przyczyny i wykonaniu kopii zapasowej.

Podsumowanie

Najpierw ustal, czy problem jest w pliku, stylach, nakładce czy na konkretnym ekranie. Popraw tylko znalezioną przyczynę, a potem sprawdź zdjęcie w treści, galerii i na telefonie. Dzięki temu nie zmienisz poprawnych obrazów na całej stronie.

Najczęstsze pytania

Dlaczego zdjęcie wygląda inaczej w motywie niż w oryginale?

Sprawdź nakładkę, filtr i przezroczystość w bloku lub motywie. Przyczyną może być też inna wersja pliku, jego przetwarzanie albo ustawienia ekranu.

Czy edytor obrazów WordPress pozwala poprawić jasność?

Podstawowy edytor WordPress pozwala między innymi przycinać, obracać i skalować zdjęcia, ale nie ma suwaka jasności. Ekspozycję popraw w zewnętrznym edytorze, pracując na kopii.

Czy tryb ciemny może zmieniać wygląd zdjęć?

Niektóre motywy stosują w trybie ciemnym dodatkowe style. Porównaj oba tryby i sprawdź filtr, przezroczystość oraz nakładkę w narzędziach przeglądarki.

Czy wtyczka do optymalizacji poprawi jasność zdjęcia?

Wtyczka może kompresować lub konwertować plik, ale nie zakładaj, że poprawi ekspozycję. Porównaj oryginał z plikiem dostarczanym przez wtyczkę lub CDN.