Poszarpane logo strony w desktopowej wersji Google Chrome - Wordpress

[kacperq]

Cześć. Mam problem z logo mojej strony wyświetlanym w Google Chrome - tylko na tej przeglądarce. Mianowicie, jest ono zbyt ostre, przez co wygląda na poszarpane. Na innych przeglądarkach wszystko działa dobrze. Macie jakiś pomysł, jak mogę to naprawić? Ja już nie mam pomysłów

 

Moja strona - https://bit.ly/2K2XDIT

 

Z góry dzięki

[Desavil]

Spróbuj zrobić je, np. w Inkscape - wektorowo i wrzucić w SVG.

[kacperq]

Wordpress nie obsługuje tego typu plików, a poza tym nie znam się na grafice wektorowej. To logo stworzyłem w Photoshopie. Prawie każdy portal ma logo w .png, i u nich nie ma takich problemów. Tylko u mnie

[Piotr GRD]

Wordpress nie ma nic do obsługiwania bądź nie obsługiwania .svg. Szablon może zawierać odnośniki do dowolnych plików przecież. Jedyny problem z .svg jest taki, że starsze przeglądarki tego nie obsługują, ale osób takich jak ja, korzystajcych z tak starych przeglądarek jest niewielu, więc spokojnie można .svg używać do grafiki na stronach.

 

Po drugie: to, że obecnie jest "poszarpane" to kwestia tego w jaki sposób przeglądarka potrafi skalować obrazy, czy i w jakim stopniu stosuje "wygładzanie / antyaliasing" czy nie. Ponieważ nie masz żadnej gwarancji, że wszystkie możliwe przeglądarki i ich najróżniejsze wersje będą skalować obrazki "ładnie", lepiej jest nie polegać na skalowaniu przez przeglądarkę, ale samemu dopasować obraz odpowiednio w programie graficznym.

 

Co innego, gdybyś w różnych rozdzielczościach wyświetlał logo w różnych rozmiarach. Ale z tego co widzę Twoje logo zawsze przeskalowane jest do rozmiaru 154 x 30 bez względu na rozmiar okna przeglądarki. Takie więc stwórz i w takiej rozdzielczości zastosuj w szablonie, od razu w pliku 154 x 30 zamiast obecnego 817 x 158. W ten sposób żadna przeglądarka nie będzie musiała nic skalować, każda wyświetli obraz 1:1 taki jaki jest. Dodatkowo zaoszczędzisz na rozmiarze w bajtach, co za tym idzie na transferze, wykorzystanej pamięci u użytkownika itd.

 

Edytowane 28 Kwietnia 2018 przez Piotr GRD

[kacperq]

Niestety mój szablon jest na tyle specyficzny, że jak logo jest od razu w normalniej rozdzielczości, to jest całe rozmazane. Dopiero przy skalowaniu wygląda dobrze. Tzn. dobrze na innych przeglądarkach - w Chrome nie. Jeszcze wczoraj wszystko było dobrze, logo dobrze się tam wyświetlało, to dziś coś się zmieniło. Deaktywowałem wszystkie pluginy i nic.

 

Może można coś dodać w CSS specjalnie dla Chrome?

 

@Piotr GRD

EDIT: wgrałem logo SVG - także było poszarpane.

Edytowane 28 Kwietnia 2018 przez kacperq

[Lindsey]

Sprawdzałeś na innych komputerach ? u mnie na chrome wygląda dobrze

[Piotr GRD]

Przyjrzałem się bliżej Twojemu obrazkowi - nie jest wykonany idealnie, pewne rozwiązania w nim zastosowane są co najmniej nietypowe, nie dziwię się temu, że różne oprogramowanie będzie go skalować w różny sposób. Litery same w sobie są "poszarpane", nie wygładzone, ich wygładzenie jest uzyskane poprzez dodanie częściowej przezroczystości do pojedynczych pikseli. I myślę, że niektóre programy (przeglądarki czy nie) będą miały problem z właściwym przeskalowaniem właśnie tych pojedynczych częściowo transparentnych pikseli. Kolor czerwony też jest "dziwnie" dodany, nie jest zabarwiona sama litera, tylko nałożony na wierzch częściowo przezroczysty czerwony prostokąt. Należałoby sam oryginał wykonać "jak należy", to i potem skalowanie nie byłoby utrudnione.

 

W międzyczasie zmieniłeś w CSS 154x30 na 155x30, więc zaserwuję Ci to, co mi się udało na szybko uzyskać po kilku próbach (po kilku próbach, to nie jest tak, że "z automatu" skalowanie w dół grafiki rastrowej jest zawsze idealne i spełnia nasze oczekiwania), jest "znośnie" moim zdaniem, choć nie idealnie:

grd.pl/images/rootnode/logo-154x30.png

grd.pl/images/rootnode/logo-155x30.png

 

Nie jest idealnie, bo już Twój oryginał, jak wspomniałem, ma wady. Przy takich grafikach można albo tworzyć oryginał (rastrowy) w *znacznie* wyższej rozdzielczości, bez takich "dziwnych" rozwiązań jakie widzę, a na sam koniec przeskalować w dół do docelowego rozmiaru, po kilku próbach dochodząc do oczekiwanego efektu, z antyaliasingiem przy skalowaniu w dół często jest problem. Albo od razu stosować grafikę wektorową.

 

Grafika wektorowa nie polega na tym, żebyś ten już posiadany (nieidealny) rastrowy PNG przekonwertował na wektorowy SVG, z tego nie wyjdzie nic satysfakcjonującego. Chodzi o to, żeby oryginał tworzony z jakiejś czcionki i/lub określonych kształtów od razu zapisać jako grafikę wektorową.

Edytowane 29 Kwietnia 2018 przez Piotr GRD

[kacperq]

Dzięki wszystkim za chęć pomocy!

Stworzyłem logo od podstaw w Illustratorze, po czym wyeksportowałem je do SVG. Niestety nadal nic to nie daje, bo logo wciąż jest poszarpane... Zobaczcie sami. Ja już nie wiem nic...

 

@PiotrGRD

 

 

@Lindsey

Tak, niestety też kaszana. Możesz przesłać screena jak to u Ciebie wygląda? :-)

Edytowane 30 Kwietnia 2018 przez kacperq

[Lindsey]

Mam rozdzielczość 2k więc to pewnie dlatego

[szmigieldesign]

Cześć,

 

nie wiem czy problem został już przez Ciebie rozwiązany, jeśli nie to mój tip: Sprawdź czy dla któregoś z elementów CSS logo (np. nadrzędne a lub jego kontener) nie ma przejść "transition" lub "opacity". Możesz napisać tymczasowe style które nadadzą wartości opacity dla tych elementów na 1 (możesz dla pewności spróbować z !important) oraz wyłączą transition. Nie zaszkodzi wymusić też wymiarów width oraz height (dla testów również z important).

 

Zdarzyło mi się, że przez przezroczystość oraz przejścia niektóre przeglądarki szarpią obrazki optymalizując wydajność. Może się zdarzyć, że np. masz transition albo opacity na cały nagłówek obsługiwane przez jakiś JS i przeglądarka w rzeczywistości nie kończy renderowania przejścia i renderuje poszarpany obraz. Sprawdź też HTML / CSS / JS jakimś testerem błędów, może przeglądarka wpada w quirks mode i ma problem z renderowaniem obrazków.