Skocz do zawartości
  • Cześć!

    Witaj na forum RootNode - aby pisać u nas musisz się zarejestrować, a następnie zalogować. Posty pisane z kont niezarejestrowanych nie są widoczne publicznie.

Poszarpane logo strony w desktopowej wersji Google Chrome - Wordpress


kacperq

Rekomendowane odpowiedzi

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

Odnośnik do komentarza
Udostępnij na innych stronach

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 przez Piotr GRD
Odnośnik do komentarza
Udostępnij na innych stronach

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 przez kacperq
Odnośnik do komentarza
Udostępnij na innych stronach

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 przez Piotr GRD
Odnośnik do komentarza
Udostępnij na innych stronach

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 przez kacperq
Odnośnik do komentarza
Udostępnij na innych stronach

  • 3 miesiące temu...

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.

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Korzystając z forum, wyrażasz zgodę na: Warunki użytkowania, Regulamin, Polityka prywatności.