5 najczęściej popełnianych grzechów graficznych na Facebooku

|
|
Kategorie: Content Marketing, Facebook, Social Media

Uwaga: po przeczytaniu tego artykułu już nigdy nie spojrzycie na żaden fanpage w ten sam sposób. Zobaczcie 5 najczęstszych, obrazkowych błędów popełnianych przez administratorów Facebooka.

1. Rozmyte zdjęcie profilowe, czyli dlaczego PNG zamiast JPG?

Zdjęcie profilowe to najważniejsze zdjęcie w przypadku każdego fanpage’a. Wyświetla się w największej liczbie miejsc. O ile cover photo jest jak nasza wizytówka, zdjęcie profilowe jest naszą twarzą. Chcielibyście pokazywać się wszystkim z rozmazaną twarzą?

Spójrzcie na 3 wersje aktualnego zdjęcia profilowego fanpage’a Semahead. Które Waszym zdaniem jest najlepsze? Dostrzegacie jakąś różnicę między dwoma ostatnimi zdjęciami?

Profilowe semahead - niska jakośćProfilowe semahead - wysoka jakośćProfilowe semahead

Bez dwóch zdań najgorzej prezentuje się grafika po lewej. Jeśli macie jakieś wątpliwości, odchylcie lekko do tyłu swój monitor albo spójrzcie nieco z dołu. Grafika ta jest zapisana w formacie JPG o niskiej jakości (w Photoshopie suwak, który pojawia się przy zapisywaniu w formacie JPG). Nie dość, że krawędzie zostały w niej rozmyte, to jeszcze pojawiły się brudy na białym tle i pomarańczowych okręgach. Grafika w środku została zapisana także w JPG, ale w JPG najwyższej możliwej jakości. Różnica pomiędzy nią a grafiką po prawej jest niewielka. Przyjrzyjcie się dokładnie samym krawędziom. Widzicie? Grafika pośrodku ma ząbki, czyli widoczne gołym okiem piksele. Grafika po prawej jako jedyna jest zapisana w formacie PNG. JPG ma problemy z gwałtownym przechodzeniem pomiędzy znacznie różniącymi się barwami. Wniosek jest prosty: wszystkie grafiki na Facebooku powinny być zapisane w PNG.

O ile zdjęcie profilowe w JPG moglibyśmy zrozumieć w przypadku firmowego fanpage’a, którego prowadzi Pani Krysia bez wsparcia jakiegokolwiek grafika, o tyle jest to zaskakujące w przypadku światowych gigantów. Przykłady? Wszystkie print screeny pochodzą z początku marca 2015 roku:

Oficjalny fanpage Coca-Coli (ponad 94 mln fanów – największy fanpage na świecie w kategorii marek)

Złe profilowe - Coca-Cola

 

Oficjalny fanpage McDonalds (ponad 57 mln fanów – 2. największy fanpage na świecie w kategorii marek)

Złe profilowe - McDonalds

 

Oficjalny fanpage Red Bulla (ponad 46 mln fanów – 3. największy fanpage na świecie w kategorii marek)

Złe profilowe - Red Bull

 

Oficjalny fanpage Oreo (ponad 42 mln fanów – 4. największy fanpage na świecie w kategorii marek)

Złe profilowe - Oreo

 

Oficjalny fanpage Nike (ponad 38,5 mln fanów – 8. największy fanpage na świecie w kategorii marek)

Złe profilowe - Nike Football

 

Oficjalny fanpage Starbucksa (ponad 38 mln fanów – 9. największy fanpage na świecie w kategorii marek)

Złe profilowe - Starbucks

 

Oficjalny fanpage KFC (ponad 37 mln fanów – 10. największy fanpage na świecie w kategorii marek)

Złe profilowe - KFC

 

Oficjalny fanpage Intela (ponad 26 mln fanów)

Złe profilowe - Intel

 

Oficjalny fanpage Adidasa nr 1 (ponad 26 mln fanów) i nr 2 (ponad 20 mln fanów)

Złe profilowe - Adidas Originals

Złe profilowe - Adidas

Swoje zdjęcia profilowe mogliby również poprawić: Levi’s, Pizza Hut, Skittles czy Pringles. Na 10 największych fanpage’y w kategorii marek, tylko 3 marki (Converse, Samsung Mobile, PlayStation) mogą pochwalić się ładnym, ostrym zdjęciem profilowym.

Najgorzej prezentują się zdjęcia profilowe w JPG, w których logotyp został umieszczony na białym tle. Spójrzcie na zdjęcia profilowe Dove oraz Red Bulla:

Dove - oryginalne Złe profilowe - Red Bull 2

Teraz najlepsze: po wpisaniu w Google Grafika frazy „dove logo png” lub „red bull logo png” każdy w parę sekund znajdzie piękne, ostre i przede wszystkim duże logotypy, które wystarczyłoby w dosłownie parę minut zmniejszyć, wykadrować na kwadratowym białym tle i zapisać w PNG. Powyżej oryginalne zdjęcia profilowe, poniżej zrobione przeze mnie w 3 minuty. Widzicie już różnicę?

Dove - poprawione Red Bull - poprawione 

 

2. Niewłaściwe wymiary, czyli dlaczego grafika wyświetla się brzydko?

To zmora każdego, kto tworzy grafiki na fanpage’a. Facebook co chwilę zmienia zalecane wymiary. Zmiany często są niewielkie, dosłownie o kilka lub kilkanaście pikseli. Jeszcze nie tak dawno zalecanym wymiarem do grafik reklamowych był wymiar 1200×627 pikseli. Teraz przy tworzeniu reklamy Facebook podpowiada, że grafika powinna mieć 1200×628 pikseli. Nawet tego typu kosmetyczne zmiany o parę pikseli potrafią sprawić, że w widoku na tablicy (który jest najważniejszy, bo najwięcej użytkowników zobaczy nasz wpis wyświetlany właśnie w ten sposób) coś nam utnie. Przykład kwadratowej grafiki Subway’a:

Ucięta grafika Subway

Spójrzcie na dół, pod hashtag #MORNINSTHOUGHTS. Kadrowanie ucięło jakiś napis. Oznacza to, że grafika ma źle dobrane proporcje i nie wyświetla się w całości na tablicy. Po kliknięciu, wyświetla nam się już w pełnym oknie i możemy odczytać ucięty napis:

Ucięta grafika Subway 2

Skąd czerpać wiedzę jakie powinny być prawidłowe wymiary grafik na Facebooka? Jeśli odpowiedzi na to pytanie szukacie w sieci, zawsze sprawdzajcie czy znalezione przez Was wymiary są aktualne. Wystarczy, że odnajdziecie datę ich opublikowania. Jeśli minęło więcej niż 3 miesiące, prawdopodobnie Facebook już coś pozmieniał.

Naturalnie możemy też skorzystać z pomocy Facebooka. Jednak zwykle odpowiada ona tylko na 10% naszych pytań. Twórcy serwisu zalecają wrzucanie zdjęć i grafik o szerokości 720, 960 lub 2048 pikseli. Ci którzy wiedzą, że wymiar składa się nie tylko z szerokości, ale i wysokości, muszą sobie poradzić sami.

W wielu artykułach zalecane są kwadratowe grafiki o wymiarach 1200×1200 pikseli. Aby to sprawdzić, wystarczy zrobić kwadratową grafikę i przekątnymi podzielić ją na cztery trójkąty:

Kwadratowa grafika

Teraz opublikujemy naszą kwadratową pseudo grafikę, aby udowodnić, że Facebook nie wyświetli jej do końca poprawnie:

Kwadratowa grafika - złe kadrowanie

Przekątne (jak to zazwyczaj przekątne) w naszej grafice wychodziły idealnie z wierzchołków kwadratu. Facebook wykadrował ją w mało zrozumiały sposób.

Canva (popularne narzędzie do tworzenia grafik) zaleca prostokątne grafiki o wymiarze 940×788 pikseli. Sprawdźmy je!

Prostokątna grafika

 Prostokątna grafika - kadrowanie

Grafika została odrobinę przycięta, ale już tylko o 1-2 piksele, więc jest ok. Można stwierdzić, że Facebook poprawnie kadruje zdjęcia o wymiarach 940×788 pikseli. Wystarczy jednak minimalnie odejść od tego wymiaru, na przykład zmniejszyć wysokość o 10 lub więcej pikseli, a Facebook zacznie wyświetlać grafikę lekko przyciętą od dołu.

Dlaczego jest to takie ważne? Zamieszczając na grafice jakiś tekst lub logotypy, często wyrównujemy je według krawędzi. Przykładowo umieszczamy logotyp Semahead w prawym dolnym rogu, w dokładnie takiej samej odległości od prawej i dolnej krawędzi. Jeśli grafika nie zostanie na tablicy wyświetlona w naturalnym rozmiarze, nasz tekst lub nasze logo będzie ustawione nierówno w stosunku do krawędzi, a w skrajnych przypadkach może nawet zostać wyświetlone przycięte, jak miało miejsce w przypadku grafiki Subwaya.

Ufunduj indeks Akademii Przyszłości, a my zadbamy o Twój marketing!

Na szczęście takich problemów nie ma ze zdjęciem profilowym i cover photo. Profilowe powinno być zawsze kwadratowe. Minimalny rozmiar to 180×180 pikseli, jednak nic nie stoi na przeszkodzie, by było ono większe, na przykład 800×800 pikseli lub 1000×1000. Może być tak duże, jak tylko chcemy. Ważne, by plik był w PNG i nie ważył więcej niż 1MB, bo może zostać skompresowany (patrz poniżej).

Wymiar cover photo również od dawna jest stały i wynosi 851×315 pikseli. Facebook radzi, aby zdjęcie w tle ważyło mniej niż 100KB. Wówczas na pewno unikniemy kompresji. Nie musimy sztywno trzymać się wysokości 315 pikseli. Cover photo może być nawet kwadratowe, o wymiarach 851×851 pikseli. Ważne, by dało się z niego wykadrować miły dla oka widok o wymiarze 851×315 pikseli.

 

3. Kompresja Twoim wrogiem, czyli dlaczego jej unikać?

Wrzucając zdjęcia i grafiki na Facebooka, umieszczamy je na serwerach Facebooka. Facebook generalnie nie ingeruje w jakość zdjęć i grafik pod warunkiem, że ważą mniej niż 1MB. Jeśli nasze pliki ważą więcej, prawdopodobnie zostaną skompresowane, czyli wyświetlone jak JPG-i o niskiej jakości, nawet jeśli wysłaliśmy je w PNG. Prawdopodobnie, ponieważ spotykałem się już z sytuacją, w której wrzucałem grafiki ważące powyżej 2MB i ich jakość nie ulegała pogorszeniu. Zazwyczaj jednak ulega. I to bardzo. Boli.

Kompresja plików graficznych to przetworzenie ich w taki sposób, by ważyły mniej. Kompresję dzielimy na bezstratną (jakość nie ulega pogorszeniu) oraz stratną. Facebook stosuję tę drugą. Kompresja ta jest najbardziej widoczna w przypadku tekstu i czerwonych elementów. Serwis sam ostrzega w dziale pomocy, że kadrowanie i formatowanie odbywa się w sposób automatyczny (w domyśle: lepiej unikać).

Różnica pomiędzy grafiką skompresowaną przez Facebooka a nieskompresowaną jest ogromna. To czy nasza grafika została skompresowana czy też nie, poznamy po tym, że grafika na naszym dysku wygląda lepiej, niż po załadowaniu na Facebooka. Jeśli zmniejszycie ją tak, by ważyła mniej niż 1MB, na 90% uniknie kompresji.

Uniknięcie kompresji ma dla nas szczególne znaczenie, gdy wrzucamy jakąś wielką grafikę z dużą ilością tekstu. Po kompresji tekst może stać się nieostry. Dlatego czasami lepiej trochę zmniejszyć rozmiar (a tym samym wagę) grafiki, aby napisy były nieco mniejsze, ale za to ostre. Zobaczmy to na przykładzie. Weźmy jakąś dużą infografikę znalezioną w sieci, na której oprócz tekstu są także elementy w kolorze czerwonym:

Infografika

Publikujemy ją na Facebooku. Najpierw w wersji oryginalnej, czyli zapisaną w formacie JPG o wymiarach 2000×1406 pikseli i ważącą 1,15MB:

Infografika powyżej 1MB w JPG

Teraz wrzucamy raz jeszcze, ale tym razem zapisaną w formacie PNG. W oryginalnych wymiarach 2000×1406 pikseli waży teraz ponad 2MB i na Facebooku prezentuje się bardzo podobnie:

Infografika powyżej 1MB w PNG

Przyjrzyjcie się uważnie co stało się z elementami w kolorze czerwonym. Odchylcie nieco ekrany do tyłu i zwróćcie uwagę na białe tło tuż przy obiektach. Pojawiły się na nim nieprzyjemne szare brudy. Teraz zmniejszmy rozmiar naszej infografiki na przykład do 1215×600 pikseli i zapiszmy ją w PNG:

Infografika poniżej 1MB w PNG

Elementy czerwone zachowały swój czysty kolor. Nie uniknęliśmy całkiem szarych plam wokół obiektów, ale są one teraz zdecydowanie mniejsze.

Udowodniliśmy tym samym, że nie ma sensu wrzucanie na Facebooka olbrzymich grafik. Na ekranach większości użytkowników i tak nie będą nigdzie wyświetlane w naturalnych rozmiarach. Facebook dopasowuje maksymalny rozmiar wyświetlenia do wielkości okna. Nie mamy możliwości przewijania obrazu ani wzdłuż, ani w poprzek. Oznacza to, że jeśli wrzucimy wielką grafikę o wymiarach 3500×2000 pikseli, osoby, które mają mniejsze ekrany z rozdzielczością przykładowo 1366×768 zobaczą ją mniejszą, niż osoby z dużymi ekranami i rozdzielczością 1920×1080.

Aby zobaczyć grafikę w jej naturalnym rozmiarze, należy otworzyć ją w pełnym oknie na Facebooku, a następnie kliknąć na niej prawym przyciskiem myszy i wybrać „Otwórz grafikę w nowej karcie”. Zachęcanie, aby robili to nasi fani za każdym razem, gdy wrzucamy wielką grafikę, nie jest dobrym pomysłem.

 

4. Podłużne infografiki, czyli co tam jest napisane?

Bardzo często w nasze ręce wpada podłużna infografika. Jest ładna, a do tego ciekawa i pasuje do tematyki naszego fanpage’a. Wrzucamy ją i wygląda mniej więcej tak:

Podłużna infografika - w całości

Po kliknięciu na nią efekt jest niewiele lepszy. Litery są zdecydowanie za małe. Niestety na Facebooku nie możemy przewijać obrazów, gdy są one za długie. Z wielu rozwiązań, poleciłbym szczególnie dwa.

Pierwsze sprawdza się, kiedy infografika jest zrobiona przez nas samych. Polega na pocięciu naszej infografiki w poziomie i wrzuceniu naraz wszystkich jej części w formie jednego mimialbumu. Naszą przykładową infografikę pociąłem na 5 mniejszych, osiągając taki efekt:

Podłużna infografika - pocięta

Dużo lepiej, prawda? Idealnie, jeśli uda nam się sprawić, by wszystkie części miały identyczną wysokość. Wówczas po kliknięciu na którykolwiek z wyciętych fragmentów, będziemy mogli bardzo płynnie przeskakiwać pomiędzy kolejnymi częściami naszej infografiki, a wszystkie części będą ładne i duże.

Drugi sposób to wrzucenie infografiki w całości (bez cięcia) na jakikolwiek serwis, który umożliwia wgrywanie zdjęć o dużych rozmiarach i nie stosuje stratnej kompresji, jak robi to Facebook. Wrzucamy zatem naszą infografikę na przykład na Pinteresta. Gdy już to zrobiliśmy, klikamy na niej prawym przyciskiem myszy i wybieramy opcję „Kopiuj adres URL grafiki”. Skopiowany adres wklejamy do postu na Facebooku. Infografika zostanie wówczas zassana. Na tablicy będzie wyświetlana podobnie jak w opisanym wyżej sposobie pierwszym (z tym, że po lewej i prawej stronie dojdzie czarne pole), ale po kliknięciu na nią lewym przyciskiem myszy, otworzy nam się w nowym oknie w swoim naturalnym rozmiarze.

 

5. Brak konsekwencji, czyli dlaczego nie robić kolorowych jarmarków?

Gdy nie możemy skorzystać z pomocy grafika, z pomocą przychodzą nam narzędzia typu Canva i Piktochart. To dobre rozwiązanie dla osób, które nie są zaprzyjaźnione z Photoshopem i nie mają ochoty się z nim zaprzyjaźniać. Korzystając z tego typu narzędzi powinniśmy starać się, aby tworzone przez nas grafiki były ze sobą jak najbardziej spójne. Chodzi o to, aby grafiki zrobione w Canvie przypominały te zrobione w Piktocharcie. Nawet największy graficzny laik powinien zwracać uwagę na dobór wykorzystywanych kolorów oraz fontów, zwanych tu i ówdzie (ponoć niepoprawnie) czcionkami.

Najbezpieczniej znaleźć sobie 1-2 fonty, które pasują do logotypu naszej marki. Idealnie, jeśli jest to dokładnie ten sam font, który jest wykorzystany w logotypie. Możemy też skorzystać z fontu użytego na firmowej stronie internetowej. Raz wybrane fonty powinniśmy wykorzystywać najdłużej, jak to możliwe. Od każdej reguły są jednak odstępstwa. Jeśli planujemy na przykład cykl komiksowych grafik, możemy na chwilę opuścić naszą bezpieczną przystań i zaszaleć z efektownymi fontami. Dla pojedynczej grafiki raczej nie zdradzamy naszych sztandarowych fontów. Zmiana fontu doskonale podkreśli zmianę w stosowanej przez na fanpage’u narracji. Jeśli przykładowo zakładamy, że od jutra na naszym fanpage’u publikujemy treści bardziej edukacyjne, możemy podkreślić tę zmianę nowym fontem na grafikach.

Podobnie wygląda sprawa z kolorami. Wariant bezpieczny to wykorzystywanie tylko kolorów naszej marki, czyli kolorów z logo lub strony internetowej. W praktyce takie rozwiązanie szybko się nudzi. Zarówno nam, jak i naszym fanom. Z kolorami powinniśmy jednak eksperymentować ostrożnie. Bez wsparcia grafika lepiej unikać rewolucji. Jeśli chcemy na jakiś czas odświeżyć kolorystykę, staramy się, aby chociaż jeden kolor pozostał dokładnie taki sam, jak wcześniej. Najlepiej, by był to kolor najbardziej charakterystyczny dla danej marki. Przykładowo jeśli prowadzimy fanpage’a Starbucksa i mamy ochotę wykorzystać w naszych grafikach coś innego niż tradycyjną biel i zieleń, możemy zostawić oryginalną zieleń, a biel podmienić parę razy na kolor beżowy, brązowy lub żółty:

Kolory Starbucksa - oryginalne Kolory Starbucksa - beżowyKolory Starbucksa - brązowyKolory Starbucksa - żółty

KitKat publikuje zdjęcia i grafiki w kolorystyce czerwono-brązowej. Oprócz tego dodaje u dołu czerwony pasek z logo oraz hasłem „Czas na przerwę. Czas na KitKat.”:

Pasek KitKat

Dzięki temu osiągnęli w galerii taki efekt:

Pasek KitKat - wiele zdjęć

Jeśli decydujemy się na tego typu rozwiązanie, nasz pasek (niekoniecznie musi być u dołu) powinien być zawsze tej samej wielości i w tym samym miejscu. Przyznacie, że wycinek galerii KitKata wygląda o niebo lepiej niż poniższy fragment galerii Pringles:

Miszmasz Pringles

Patrząc na ten wycinek galerii Pringles mamy wrażenie nieprzyjemnego miszmaszu. Każda grafika ma praktycznie inne tło. Nie wygląda to atrakcyjnie, a wręcz sprawia wrażenie, jakby ktoś wrzucał na tego fanpage’a randomowe grafiki, które kompletnie do siebie nie pasują.

Mamy jednak nadzieję, że w Waszych galeriach wszystko będzie już teraz do siebie pasowało i od razu po opuszczeniu tego okna sprawdzicie zdjęcia profilowe Waszych fanpage’y. Jeśli macie jakieś pytania albo chcielibyście dodać coś od siebie, zachęcamy do komentowania!

Podsumowanie:

  • grafiki na Facebooka zawsze zapisuj w formacie PNG,
  • unikaj rozmiarów grafik znacznie większych niż są wymagane,
  • dziel duże infografiki na mniejsze części lub wrzucaj je w całości przez serwisy, które umożliwiają hosting dużych plików graficznych,
  • prowadź spójną komunikację graficzną na swoim fanpage’u (te same kolory i fonty na wszystkich grafikach),
  • zdjęcie profilowe powinno być kwadratem o wymiarach co najmniej 180×180 pikseli (mile widziane są większe, byle tylko waga pliku nie przekroczyła 1MB),
  • cover photo ma wymiar dokładnie 851×315 pikseli,
  • grafika reklamowa powinna mieć wymiar 1200×628 pikseli,
  • grafiki do reklam typu multi-product ads powinny mieć zawsze wymiar 600×600 pikseli,
  • w postach najlepiej sprawdzają się grafiki o wymiarach 940×788 pikseli.

Ufunduj indeks Akademii Przyszłości, a my zadbamy o Twój marketing!

 

Komentarze do artykułu: 5 najczęściej popełnianych grzechów graficznych na Facebooku