Google Partner arturkosinski.pl
Wycena online
Wyszukaj na stronie...
Zamknij wyszukiwarkę

Jak poprawnie umieszczać logo na stronie internetowej?

Ostatnia aktualizacja treści Ostatnia aktualizacja: 27 grudnia 2021

Jeśli posiadasz stronę internetową lub dopiero planujesz ją założyć, koniecznie zadbaj o poprawność dodania logo firmowego w górnej części strony. Z tego artykułu dowiesz się na co należy zwrócić uwagę przy umieszczaniu logo na stronie.

Jak poprawnie umieszczać logo na stronie internetowej

Z tego artykułu dowiesz się:

  • w jakich formatach można umieszczać logo na stronie internetowej
  • jak nowoczesne wyświetlacze wpłynęły na jakość grafik na stronach internetowych
  • jaki jest zalecany format umieszczania logo i dlaczego
  • jak sprawdzić jaki format logo masz na swojej stronie internetowej
  • jak poprawić logo na swojej stronie www

W jakich formatach można umieszczać logo na stronie internetowej?

W trakcie tworzenia stron internetowych logo od zawsze można było umieścić na nich w dowolnym formacie grafiki rastrowej, takim jak JPG, czy PNG. Istotne zawsze było zadbanie o to, by plik graficzny z logo nie był ani za mały, ani za duży. Zbyt mały plik z logo powodował efekt „pikselozy”, tzn. deformacji obrazu w taki sposób, że widoczne są jego pojedyncze piksele. Z drugiej strony dodanie zbyt dużego logo mogło popsuć układ górnej części strony lub po prostu wpłynąć negatywnie na czas ładowania strony. Dlatego też jeszcze kilka lat temu plik z logo musiał być idealnie docięty do wymagań szablonu strony internetowej. Sprawdź przy okazji moje wskazówki przed zakupem logo.

Sytuacja zaczęła się komplikować, gdy na rynku pojawiły się urządzenia z ekranami typu Retina, 4K i inne charakteryzujące się bardzo wysoką szczegółowością prezentowanych materiałów graficznych. Na tego typu urządzeniach przeglądanie grafik rastrowych – nawet tych, które są przycięte idealnie do wymiarów potrzebnych w szablonie, powoduje wspomniany wyżej efekt pikselozy. Wynika to z faktu, że np. wyświetlacz Retina posiada dwukrotne zagęszczenie pikseli względem standardowego wyświetlacza. Gdy pikseli w grafice brakuje (bo plik z logo jest zbyt mały), obraz zostaje zdeformowany (sztucznie powiększony).

Jednym ze sposobów radzenia sobie z tym problemem jest dodawanie do stron alternatywnych wersji zdjęć przeznaczonych tylko dla wyświetlaczy Retina. Jest to dobry pomysł w przypadku zdjęć, natomiast w przypadku logo czy piktogramów na stronie internetowej, zalecam inne rozwiązanie.

Zalecany format umieszczania logo na stronie internetowej

W ostatniej dekadzie wielką popularność w branży tworzenia stron internetowych zyskał format SVG – Scallable Vector Graphic. Jest to format grafiki wektorowej, która w przeciwieństwie do rastrów, może być skalowana bez utraty jakości. Jest to świetne rozwiązanie do umieszczania grafik takich jak logo czy ikony na stronach internetowych, ponieważ dzięki temu formatowi grafiki te są idealnie ostre na każdym rodzaju wyświetlacza.

Oczywiście, aby wykorzystać na stronie internetowej logo w formacie wektorowych SVG musisz wcześniej posiadać logo wykonane w wektorach (co często jest nieosiągalne, gdy tworzysz logo z taniego kreatora online). Więcej informacji na ten temat znajdziesz w podlinkowanym wcześniej filmie na temat wskazówek przy zakupie logo.

Jeśli więc kupujesz logo, zadbaj o to, by poza plikami graficznymi dostosowanymi do standardowych zastosowań, tzn. JPG, PNG czy PDF, otrzymać również plik w formacie SVG to wykorzystania na stronie internetowej.

Jak sprawdzić jaki format logo masz na stronie internetowej?

Sposobów na sprawdzenie formatu pliku z logo na stronie internetowej jest kilka, jednak na ten moment przyjrzyjmy się dwóm z nich. Pierwszy z nich to kliknięcie na logo prawym przyciskiem myszy i wybranie opcji Zbadaj (np. w przeglądarce Google Chrome). Po kliknięciu tego przycisku pojawi nam się konsola z kodem źródłowym, gdzie w zaznaczonym fragmencie będziemy mogli ustalić jakie jest rozszerzenie pliku z logo (np. mojelogo.svg).

logo na stronie format pliku chrome

Innym sposobem na sprawdzenie formatu logo jaki masz na stronie internetowej jest pobranie pliku z logo na swój dysk i sprawdzenie jakie rodzaju plik to jest. Aby pobrać logo najczęściej wystarczy kliknąć w nie prawym przyciskiem myszy i wybrać opcję typu „Zapisz grafikę…” – opcja ta może nazywać się różnie w różnych przeglądarkach internetowych. Uwaga – nie zrobisz tego, jeśli Twoje logo jest dodane jako tło w stylach CSS, wtedy najlepiej skontaktuj się w tej sprawie z autorem swojej strony.

Po zapisaniu pliku na dysk powinniśmy być może od razu zobaczymy rozszerzenie na końcu nazwy pliku np. mojelogo.jpg. Jeśli tego nie widzimy, powinniśmy kliknąć na plik prawym przyciskiem myszy i wybrać opcję typu Informacje / Właściwości (w zależności od systemu operacyjnego na jakim pracujemy), a następnie w otwartym okienku poszukać informacji o formacie pliku.

logo na stronie format pliku

Jak poprawić logo na stronie internetowej?

Jeśli logo na Twojej stronie internetowej ma format inny niż SVG to jest wysokie prawdopodobieństwo, że wygląda ono kiepsko na urządzeniach z ekranami typu Retina. Powinieneś więc podjąć jak najszybsze kroki, aby tą sytuację naprawić.

Niestety w większości przypadków prawdopodobnie konieczne będzie wykonanie tego przez firmę, zajmującą się tworzeniem stron internetowych. Jednak w niektórych przypadkach (szczególnie na stronach opartych o WordPress) być może w panelu administracyjnym w menu Wygląd / Dostosuj będziesz mieć możliwość dodania logo w prosty sposób w formacie SVG. Warto wspomnieć, że na moment pisania tego artykułu, WordPress domyślnie nie przyjmuje ładowania na serwer plików SVG. Należy więc najpierw zaopatrzyć się we wtyczkę umożliwiającą przesyłanie takich plików.

Innym, najbezpieczniejszym rozwiązaniem jest umieszczenie pliku SVG w katalogu z plikami Twojego szablonu, a następnie podlinkowanie tego pliku w kodzie źródłowym strony. Tutaj jednak konieczna jest znajomość wielu procesów związanych z tworzeniem stron internetowych.

Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany poprawieniem wyświetlania logo na swojej stronie lub wykonaniem strony internetowej dla swojej firmy, skontaktuj się ze mną.

Zobacz także

Ile kosztuje strona internetowa? Kalkulator wyceny online

Kategorie: Strony internetowe

 Cześć, w tym filmie chciałbym pokazać Ci co zrobiłem, aby klient który jest potencjalnie zainteresowany moimi usługami, mógł...

Czytaj więcej

WordPress i komunikat „Zalecana aktualizacja PHPa” – co robić?

Kategorie: Strony internetowe

Strony internetowe na systemie WordPress posiadają wbudowany mechanizm sprawdzania wersji języka PHP na serwerze (hostingu). Z tego artykułu dowiesz...

Czytaj więcej

Strona internetowa na abonament – czy to się opłaca?

Kategorie: Strony internetowe

Jeśli rozważasz zakup strony internetowej w rozliczeniu abonamentowym, sprawdź czy to rzeczywiście się opłaca oraz jakie są zalety i wady takiego...

Czytaj więcej

Jak zarejestrować własną domenę internetową – aktualizacja 2019

Kategorie: Strony internetowe E-commerce Inne tematy

Cześć, w tym filmie pokażę Ci jak samodzielnie zarejestrować własną domenę internetową. Jest to aktualizacja filmu, który umieściłem na...

Czytaj więcej

Jak wybrać wykonawcę strony internetowej?

Kategorie: Strony internetowe

Jeżeli stoisz przed wyborem wykonawcy strony internetowej – zapoznaj się z tym krótkim artykułem, w którym podpowiem Ci na jakie...

Czytaj więcej

Zapisz się na mój newsletter i otrzymuj darmowe porady oraz informacje o promocjach.

Opinie moich Klientów

referencje Artur Kosiński 2

Z przyjemnością rekomenduję firmę Pana Artura jako bardzo profesjonalnego dostawcę rozwiązań internetowych opartych na WordPress. Rozpoczęliśmy od prostych stron typu landing page. Byliśmy tak bardzo zadowoleni z każdego kolejnego projektu, że zdecydowaliśmy się współpracować gdziekolwiek jest to możliwe, m.in. przy optymalizacji, utrzymaniu, projektowaniu, itd.

Filip, crescendoapp.com
referencje artur kosinski

Z firmą Pana Artura prowadzimy stałą współpracę przy promocji naszych gabinetów kosmetycznych. Od czasu rozpoczęcia współpracy widzimy znaczny wzrost ilości nowych klientów. Polecam wszystkim firmom, które chcą rozwinąć skrzydła.

Kasia, chimera.olsztyn.pl
referencje Artur Kosiński 1

Współpraca między naszymi firmami rozpoczęła się w 2015 roku, trwa do dzisiaj i odbywa się online. Zakres współpracy obejmuje tworzenie wielu stron www, pozycjonowanie strony i projekty graficzne. Wszystkie usługi były realizowane terminowo i cechowały się wysoką jakością.

Steve, treatmed.pl
referencje-miejskie-ziele

Pan Artur nigdy nie użył słów “nie da się”, sam zaproponował najbardziej optymalne rozwiązania i możliwości. Współpracując miałam poczucie pełnego wsparcia i bezpieczeństwa.

Małgorzata, miejskieziele.pl

Masz pytania? Skontaktuj się ze mną.

Przejdź do kontaktu