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.
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).
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.
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ą.
