1200 x 628 vs 1200 x 627: Jaki rozmiar jest właściwy?

Jeśli kiedykolwiek próbowałeś zrobić obraz podglądu linku, to pewnie natrafiłeś na to: jeden przewodnik mówi 1200 x 628, inny mówi 1200 x 627, własna dokumentacja Facebooka mówi 1200 x 630, a twój szablon projektowy jest ustawiony na coś zupełnie innego. Wszystkie cztery wyglądają identycznie. Więc który z nich jest naprawdę poprawny?

Krótkая odpowiedź: wszystkie są w porządku. Wszystkie to przybliżenia tej samej proporcji, a różnica między nimi to trzy piksele na obrazie o wysokości 630 pikseli — około pół procenta. Ale warto zrozumieć, skąd pochodzą te liczby, ponieważ wiedza o tym uchroni cię od ponownego eksportowania tego samego baneru pięć razy.

Wszystkie starają się osiągnąć proporcję 1.91:1

Protokół Open Graph — zbiór meta tagów, które Facebook, LinkedIn, Slack, iMessage i większość innych platform odczytują, aby stworzyć podgląd linku — rekomenduje obraz z proporcją 1.91:1. Tyle. 1.91 to już zaokrąglona liczba, więc gdy różne firmy ją mnożą, lądują w nieco różnych miejscach:

• 1200 ÷ 1.91 = 628.27 → zaokrągla się do 1200 x 628
• 1200 x 630 = dokładnie 1.905:1 → zdokumentowana rekomendacja Facebooka
• 1200 x 627 = 1.914:1 → od dawna opublikowany rozmiar LinkedIna
• 1200 x 625 = dokładnie 1.92:1 → pojawia się w starszych szablonach

Żaden z nich nie jest "błędny". To artefakty zaokrąglenia tej samej specyfikacji. Crawlery nie odrzucają obrazu za to, że jest o trzy piksele mniejszy; po prostu potrzebują pliku o wielkości co najmniej 200 x 200, a najlepiej 1200 pikseli szerokości, aby renderował się ostro na ekranach o wysokiej gęstości pikseli.

Czy różnica 3 pikseli kiedyś ma znaczenie?

W praktyce tylko w jednej sytuacji: ciasne kadry. Platformy nie wyświetlają twojego obrazu w jego natywnym rozmiarze — umieszczają go w dowolnym układzie karty, którego używają tego miesiąca, i krawędzie są przycinane. Jeśli tekst nagłówka rozciąga się aż do górnej części kadru, obraz 1200 x 628 przycięty do karty 1.78:1 go obetnie, tak samo jak 1200 x 630.

Rozwiązaniem nie jest wybór "prawidłowej" liczby pikseli. To zostawienie bezpiecznego marginesu: trzymaj logo i tekst wewnątrz środkowych ~90% kanwy i nic ważnego nie umieszczaj w odległości mniejszej niż 60 pikseli od żadnej krawędzi. Wtedy naprawdę nie ma znaczenia, który z trzech rozmiarów eksportujesz.

Jak zrobić jeden obraz, który działa wszędzie

Moja rekomendacja: twórz w rozmiarze 1200 x 630. To jest zdokumentowany rozmiar Facebooka, to zaledwie włos od 1.91:1, i to liczba parzysta, która unika dziwnego renderowania półpiksela w niektórych edytorach. Następnie ponownie użyj tego samego pliku dla LinkedIna, Slacka, Discorda i tagów Open Graph.

Jeśli masz już obraz o złych wymiarach, oto szybki sposób, aby to naprawić bez instalowania czegokolwiek:

1. Otwórz narzędzie przycinania i przycnij swoje źródłowe zdjęcie do mniej więcej kształtu 1.91:1 na początek. To jest krok, który ludzie pomijają — jeśli przeskoczysz bezpośrednio do zmiany rozmiaru, zdjęcie 4:3 zostanie ściśnięte i twarze będą wyglądać subtelnie źle.
2. Weź przycięty plik do narzędzia zmiany rozmiaru i ustaw go na 1200 x 630 (lub 628, lub 627 — wybierz jeden i idź dalej).
3. Eksportuj jako JPG do zdjęć, PNG tylko jeśli potrzebujesz ostrego tekstu lub przezroczystości za logo. Konwerter obrazów obsługuje tę zmianę, jeśli źródło to PNG, WebP lub HEIC.

Wszystko odbywa się wewnątrz twojej przeglądarki na cutbg — plik nigdy nie opuszcza twojego komputera, nie ma kolejki przesyłania i nie ma konta. To ma więcej znaczenia, niż ludzie zdają sobie sprawę z niezwolnionych zdjęć produktów lub pracy klienta, którą jeszcze nie ogłosiłeś.

Zwróć uwagę na rozmiar pliku

Platformy mają limity przesyłania i pobierania — Facebook ogranicza obrazy Open Graph do 8MB, a niektóre crawlery cicho poddają się wszystko, co wolno się pobiera. JPG 1200 x 630 powinien wygodnie zapaść się między 100KB a 300KB. Jeśli twój eksport to wielomegabajtowy PNG, uruchom go najpierw przez kompressor. Mniejsze pliki również oznaczają, że podgląd naprawdę się pojawia zamiast pokazywania pustej karty, podczas gdy crawler czeka na timeout.

Jeśli podgląd nadal pokazuje stary obraz

To prawie nigdy nie jest problemem rozmiaru. Facebook, LinkedIn i Twitter agresywnie cachują skrobane podglądy. Po zastąpieniu pliku, uruchom adres URL przez debugger własny platformy (Facebook's Sharing Debugger, LinkedIn's Post Inspector), aby wymusić ponowne skrobanie. Zmiana obrazu z 1200 x 627 na 1200 x 628 nie naprawi zapamiętanego podglądu — tylko wyczyszczenie cache'u to naprawi.

Podsumowanie: przestań się martwić o ostatni piksel. Wybierz 1200 x 630, trzymaj swój tekst z dala od krawędzi, trzymaj plik poniżej kilkuset KB, i jesteś zabezpieczony na każdej platformie, która odczytuje tagi Open Graph.