Logo, które wygląda dobrze na białym tle, na ciemnym nagle traci ostrość, ma brudne krawędzie albo zupełnie zlewa się z sekcją. Problem prawie nigdy nie leży w kolorach, tylko w formacie pliku i sposobie, w jaki przeglądarka go renderuje. Plik JPEG z logo to najczęstsza przyczyna wpadki: kompresja stratna tworzy wokół liter i kształtów jasne obwódki, które na ciemnym tle stają się widoczne jak brudny halo. Do tego JPEG nie obsługuje przezroczystości, więc jeśli logo ma białe tło, na ciemnej sekcji pojawi się biały prostokąt. Dlatego do znaków firmowych używa się PNG z przezroczystością albo SVG, które skaluje się bez utraty jakości.

Drugi winowajca to przezroczystość zapisana w pliku, ale z niewłaściwym tłem. PNG z przezroczystym tłem wygląda dobrze tylko wtedy, gdy same krawędzie kształtu są czyste. Jeśli plik powstał z JPEG-a i został zapisany jako PNG, przezroczystość jest pozorna, a wokół liter zostają jasne piksele. Na ciemnym tle te piksele świecą. Rozwiązanie jest proste: logo powinno być przygotowane od początku jako wektor albo jako PNG z prawdziwym kanałem alfa. Warto też sprawdzić, czy strona nie wymusza na obrazie mieszania kanałów przez CSS, bo filtr czy cień potrafią pogorszyć efekt. Jeśli chcesz uporządkować wiedzę o tym, który format do czego służy, sięgnij po konkretne omówienie formatów obrazów, zanim zaczniesz podmieniać pliki w projekcie.

Dobór formatu do sekcji zależy od tego, czym dana grafika jest. Zdjęcie w tle sekcji może zostać w JPEG, bo liczy się waga pliku, a nie przezroczystość. Logo i ikony w nawigacji powinny iść w SVG, bo skalują się do każdego rozmiaru ekranu i nie tracą ostrości na ciemnym tle. Jeśli SVG nie jest dostępny, zostaje PNG z przezroczystością, ale w rozmiarze co najmniej dwukrotnie większym niż docelowy, żeby na ekranach o wysokiej gęstości pikseli krawędzie były czyste. Osobna kwestia to wersja logo na ciemne tło: jasny wariant znaku, przygotowany jako oddzielny plik, a nie ten sam obrazek rozjaśniany filtrem w CSS.

Najczęstszy błąd to trzymanie jednego pliku logo i wrzucanie go wszędzie, gdzie popadnie. Ciemny nagłówek, jasna stopka i przycisk w kolorze marki wymagają trzech wariantów tego samego znaku. Warto też sprawdzić, czy plik nie ma przypadkowego białego tła i czy przezroczystość faktycznie działa, podglądając go na ciemnym kolorze jeszcze przed wdrożeniem. Kiedy format jest dobrany świadomie, logo przestaje się rozjeżdżać, a sekcja wygląda spójnie niezależnie od motywu strony.