• Prowadzisz swój fanpage?
  • Potrzebujesz dobrać do niego odpowiednie zdjęcie w tle ale nie wiesz jakie wymiary powinno mieć?
  • Wymiary, które znalazłeś okazały się złe bo były z zeszłych lat?
  • Albo może podany wymiar sprawdził się na monitorze, ale na telefonach został ucięty?

Skróca wersja dla leniwych:

  • Zdjęcie w tle powinno mieć wymiary: 1640 x 624 px 
  • Treść zdjęcia w tle powinna zawierać się w wymiarze 1112x 624 px 
  • Zapis tylko jako JPEG z najwyższą jakością (100)

Dłuższa wersja:

Jakie są wymiary zdjęcia tle?

Prawidłowe wymiary najłatwiej sprawdzić na centrum pomocy facebooka

“…na komputerach jest wyświetlane jako obraz o wymiarach 820 x 312 pikseli, a w smartfonach – jako obraz o wymiarach 640 x 360 pikseli.”

Ok to robimy sobie przykładowy obrazek na 820 x 312 px. Następnie wrzucimy go na facebooka, na swój fanpage:

Zdjęcie w tle o wymiarach 820 x 312 px

I w sumie wszystko wygląda ok, to chyba możemy już skończyć ten wpis… ? Jak najbardziej! Przynajmniej do momentu aż postanowisz zobaczyć swój fanpage na telefonie, który prezentuje się jak na poniższym obrazku.

Zdjęcie w tle o wymiarach 820 x 312 px na smartphonie

Zdjęcie jest ucięte po bokach i to bardzo, ale dlaczego? Przecież zastosowaliśmy podany wymiar przez facebooka. Dokładnie, ale tak jak mówiła druga linia opis “w smartfonach – jako obraz o wymiarach 640 x 360 pikseli.
Czyli obraz wyświetlany na urządzeniach mobilnych i stacjonarnych inaczej się skaluje i zdjęcie w tle na twoim smartphonie ma wymiary 640 x 360 pikseli.

Czyli mogę mieć obraz, który albo będzie dobrze wyglądał na telefonie albo na komputerze? Oczywiście, że nie – zróbmy jak radzi facebook i przy tworzeniu grafiki na 820 px wydzielimy na środku obszar na 640 pikseli w którym będzie znajdowała się główna treść twojego zdjęcia w tle (czyli na przykład hasło reklamowe, nazwa strony itp.)

Obliczmy na szybko: Pełna szerokość obrazu 820 px – szerokość ‘mobilna’ 640 = 180 px.
Wolny obszar 180 px dzielimy na 2 , czyli musimy po bokach zostawić 90 px. Tworzymy sobie odpowiedni obraz:

Zalecane wymiary zdjęcia na urządzenia mobilne

Wrzucamy go na fanpage, odpalamy telefon i niestety jak widać poniżej, treść zdjęcia jest nadal ucięta.

Zalecane wymiary zdjęcia na urządzenia mobilne w praktyce…

To jakie są faktyczne prawidłowe wymiary zdjęcia w tle? Metodą prób i błędów doszedłem do wymiarów w których środkowa część obrazu powinna mieć 556 px szerokości. W ten sposób nasze zdjęcie będzie dobrze wyświetlać się zarówno na komputerach jak i na smartphonach 🙂 poniżej dowody w postaci screenów

Prawidłowe wymiary – w końcu ?
Prawidłowe wymiary – w końcu?
Jak poprawić jakość zdjęcia w tle?

Same wymiary mamy już ogarnięte ale dochodzi jeszcz jedna kwestia czyli jakości zdjęcia. Powyższa grafika została zapisana w formacie jpeg i widać, że jej jakość nie jest najlepsza – krawędzie napisów są lekko rozmazane. Co można zrobić aby poprawić jakość zdjęcia ?

Zgodnie z radami centrum pomocy facebooka:

“Aby uzyskać najkrótszy czas wczytywania, prześlij plik sRGB JPG o wymiarach 851 x 315 pikseli i rozmiarze do 100 KB. W przypadku zdjęć profilowych i zdjęć w tle strony z logo lub tekstem lepsze wyniki może dać skorzystanie z pliku PNG.”

Wydaję się mieć to sens. Dla osób nie obeznanych: format zapisu jpeg jest to format stratny. Co oznacza że nasz oryginalny obraz traci na jakości i wygląda gorzej choć jest to mało zauważalne w przypadku zwykłych codziennych zdjęć, problem pojawia się gdy próbujemy zapisywać jakieś grafiki, loga lub po prostu obrazy z napisami wtedy jesteśmy w stanie zauważyć lekkie rozmazanie napisu na krawędziach. Dlatego zdecydowanie lepiej przy tego rodzaju zdjęciach w tle zapisać obraz w niestratnym formacie png. W takim razie można zapytać po co zapisywać coś jako jpeg? Przede wszystkim dlatego że obraz jpeg jest znacznie mniejszy co bardzo wpływa na szybkość wczytania obrazu i samej strony. 

Jak się sprawdzają zalecenia facebooka w sprawie jakości ?

Wrzucona przeze mnie grafika z odpowiednimi zaleceniami czyli 812 x 312 zapisane w formacie PNG przy rozmiarze około 60kb wygląda następująco

Nie powala, prawda? Muszę przyznać, że miałem w tym przypadku ogromne problemy żeby zrozumieć co robie źle, próbowałem: zapis jpeg, zapisu png, rożne wartości, różne tryby PNG i JPEG, inne kolory, inne tło… Ostatecznie przeszukując różne fora i dyskusje znalazłem złotą radę, która w końcu pozwoliła mi osiągnąć pożądany efekt

Co właściwe zrobiłem by osiągną dobrą jakość zdjęcia w tle? Zwiększyłem rozmiar zdjęcia dwukrotnie przy zachowaniu tych samych proporcji a następnie zachowałem obraz jako JPEG  Wrzucony obraz ma rozdzielczość 1640 x  624 px a jego waga przekracza 160 kb!

I o to w końcu doszliśmy do prawidłowych wymiarów i parametrów. Podsumowując, zdjęcie w tle powinno:

  • Mieć wymiary: 1640 x 624 px (podwojone zalecane wymiary )
  • Treść zdjęcia w tle powinna zawierać się w wymiarze 1112x 624 px 
  • Zapis tylko jako JPEG z najwyższą jakością (100)