Jeden szablon, każdy rozmiar: post, relacja, pin i miniatura w jednym zapytaniu

Grafika do kampanii rzadko jest jednym obrazkiem. Podgląd linku chce 1,91:1, aktualności kwadratu albo pionu 4:5, relacje i rolki 9:16, Pinterest 2:3, a YouTube 16:9. Projektowanie tej samej karty sześć razy — albo przycinanie jednego wzorca, aż odpadnie nagłówek — to najwolniejsza część publikowania w social mediach. W Shareglint projektujesz szablon raz i prosisz o wszystkie kształty w jednym zapytaniu: "sizes": ["og", "square", "portrait", "story", "pinterest", "youtube"]. Każdy rozmiar układa się od nowa z HTML-a w swojej szerokości i wysokości, więc nic nie jest przycinane, rozciągane ani wpychane między czarne pasy.

Presety

Presetów rozmiaru jest 6: og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720. Odpowiadają miejscom, do których trafiają obrazki:

Pliki rastrowe (PNG, JPEG, WebP) mają domyślnie dwukrotność wymiarów presetu, więc plik story ma 2160×3840 — ostry na każdym telefonie. Liczby podawane przez same platformy, każda ze źródłem i datą sprawdzenia, są na stronie wymiary grafik w social media; szczegóły podglądu linku — na stronie rozmiar obrazka OG.

Jedno zapytanie, każdy rozmiar

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "template": "blog-og",
    "sizes": ["og", "square", "portrait", "story", "pinterest"],
    "modifications": {
      "title": "We moved to a four-day week. Here is what happened.",
      "author": "Northwind Engineering",
      "site": "northwind.dev",
      "photo": "https://cdn.example.com/team.jpg"
    }
  }'

Odpowiedź to {"renders": [...]} z jednym wpisem na rozmiar, w kolejności, w jakiej je podałeś: każdy ma własne id, size i url. Każdy rozmiar to zwykły render — z własnym wpisem w pamięci podręcznej, wywołaniem webhooka i zwrotem, jeśli się nie uda — więc adresy możesz zapisać przy wpisie w CMS-ie i przekazać do narzędzia do planowania publikacji.

Dwie zasady sprawiają, że rachunek jest przewidywalny:

• Wszystko albo nic. Jeśli limit pozostały w tym miesiącu nie pokrywa wszystkich nowych rozmiarów, dostajesz 402 i nic nie trafia do kolejki. Nigdy nie skończysz z kwadratem bez relacji.
• Powtórki są darmowe. Rozmiar wyrenderowany już z tymi samymi wartościami zwraca istniejący plik bez opłaty, więc dodanie story do wczorajszego zapytania kosztuje tylko relację.

Zlecenia hurtowe też przyjmują sizes: CSV z 40 wpisami na bloga i "sizes": ["og", "square", "pinterest"] zwraca 120 obrazków i jeden ZIP. Podpisane adresy przyjmują zamiast tego parametr size (…/blog-og.png?title=…&size=story&s=…); jest podpisany jak każda inna wartość, więc adresu podpisanego dla jednego rozmiaru nie da się przełączyć na inny.

Ułożone od nowa, nie przycięte

Narzędzia do zmiany rozmiaru, które zaczynają od gotowej bitmapy, mają dwa wyjścia: przyciąć albo dopełnić tłem. Przycięcie karty 1200×630 do 9:16 zostawia wąski pasek ze środka; dopełnienie daje małą kartę zawieszoną w wysokim kolorowym prostokącie. Renderowanie z HTML-a ma trzecie wyjście: ułożyć treść od nowa. Szeroka karta może postawić zdjęcie obok nagłówka, kwadratowa ułożyć je jedno pod drugim, a relacja oddać nagłówkowi więcej wysokości — tak, jak dla danego kształtu mówi CSS szablonu.

Każdy z 153 wbudowanych szablonów już to robi. Długie nagłówki zmniejszają się, żeby zmieścić się w swoim polu w każdym kształcie, zamiast wychodzić poza krawędź, a accent i theme działają tak samo we wszystkich rozmiarach. Galeria szablonów pokazuje każdy szablon wyrenderowany w kilku kształtach, zanim napiszesz choćby linijkę kodu.

Własny szablon w każdym kształcie

Szablon, który sam piszesz w HTML-u i CSS, jest traktowany tak samo — podczas każdego renderu element <html> dostaje dwa zaczepy:

• klasę kształtu: shape-landscape, shape-square albo shape-tall;
• klasę rozmiaru: size-og, size-story, size-pinterest i tak dalej.

Większości układów wystarczą klasy kształtu:

.card { display: flex; gap: 48px; padding: 64px; height: 100%; }
.shape-landscape .card { flex-direction: row; align-items: center; }
.shape-square .card,
.shape-tall .card { flex-direction: column; justify-content: flex-end; }

.shape-tall h1 { font-size: 96px; }      /* relację ogląda się na pełnym ekranie telefonu */
.size-story .card { padding-bottom: 360px; } /* tekst z dala od paska odpowiedzi */

Używaj jednostek, które idą za polem — procentów, flex, grid, vh/vw renderu — zamiast stałych pozycji w pikselach, a szablon będzie się przelewał. Każdy kształt sprawdzisz za darmo, zanim wydasz limit: podgląd szablonu (POST /v1/templates/preview) nie zużywa limitu i przyjmuje te same wartości size.

Szablon, którego własne wymiary są równe presetowi (projekt 1080×1080 zamówiony jako square), renderuje ten sam obrazek co bez size — jeden wpis w pamięci podręcznej, nie dwa.

Gdzie ucieka czas

Jeden szablon na każdy rozmiar nie oszczędza czasu renderowania — to i tak sekunda czy dwie na obrazek — tylko ręczne kroki wokół niego:

1. Żadnych osobnych plików projektu dla każdej sieci. Literówkę w nagłówku poprawiasz raz i renderujesz od nowa wszędzie.
2. Żadnego przeglądania kadrów. O układzie decyduje szablon, więc nikt nie sprawdza sześciu eksportów w poszukiwaniu uciętego logo.
3. Żadnego żonglowania wgrywaniem. Odpowiedź zawiera każdy adres; narzędzie do planowania publikacji albo automatyzacji (n8n czy Make) publikuje każdy rozmiar w jego sieci.

Na bloga zwykle wystarcza zestaw: og jako og:image artykułu, square albo portrait do posta w aktualnościach i pinterest na pin. Dla podcastu albo kanału wideo: youtube na miniaturę, square na okładkę odcinka i story na zapowiedź.

Koszt

Jeden render na obrazek i rozmiar. Post w pięciu rozmiarach to pięć renderów; te same pięć jeszcze raz jest za darmo. 100 renderów miesięcznie w planie Free ma znak wodny; Starter kosztuje $9 miesięcznie za 2 000 renderów, a Pro $29 za 10 000 (cennik). Animowany GIF albo MP4 kosztuje 5 renderów na rozmiar, jak każdy animowany render.

Czego nie robi

• Nie gwarantuje stref bezpiecznych konkretnych platform. Przyciski i podpisy każdej sieci zasłaniają inną część obrazka i zmieniają się bez zapowiedzi; jeśli twój projekt jest ciasny, trzymaj tekst z dala od krawędzi we własnym szablonie. Meta zaleca na przykład, żeby w reklamie w relacjach około 14% u góry i 35% u dołu obrazka pozostało bez tekstu (Meta Ads Guide).
• Nie robi dowolnych rozmiarów w jednym zapytaniu. sizes przyjmuje presety; dla innego rozmiaru (np. banera na LinkedIna 1584×396) zapisz szablon w tym rozmiarze.
• Nie publikuje. API zwraca adresy obrazków; publikuje je twoje narzędzie do planowania, CMS albo automatyzacja.
• Nie przekomponowuje obrazu przez AI. Układ wynika z HTML-a i CSS, które napisałeś ty albo autor wbudowanego szablonu — nie przesuwa obiektów wewnątrz zdjęcia. Do „inteligentnego kadrowania” fotografii właściwym narzędziem jest wyspecjalizowany CDN obrazów, np. Cloudinary; do zaprojektowanej karty z tekstem — szablon, który się przelewa.