# Screenshot API czy szablony graficzne: co wybrać na obrazki OG?

> Screenshot API robi zrzut strony taki, jaka jest; API szablonów wypełnia zaprojektowaną kartę. Kiedy które daje lepszy og:image — koszty, pułapki, kod.

Opublikowano 2026-11-04 · https://shareglint.com/pl/guides/screenshot-api-vs-templates

**Screenshot API** otwiera adres w prawdziwej przeglądarce i zwraca obrazek tego, co widać. **API szablonów graficznych** bierze układ zaprojektowany raz — w HTML-u i CSS albo w edytorze wizualnym — wstawia wysłane pola (tytuł, autora, cenę) i zwraca obrazek. Do obrazków Open Graph zwykle lepsze są szablony: projektuje się je na 1200×630, są czytelne w miniaturce i zmieniają się tylko wtedy, gdy zmieniają się ich pola. Zrzuty wygrywają, gdy chodzi właśnie o wygląd strony.

To cała odpowiedź; reszta poradnika to szczegóły, z kodem dla obu podejść.

## Czym różnią się w praktyce

| | Screenshot API | API szablonów |
|---|---|---|
| Wejście | Adres (plus viewport, urządzenie, opcje czekania) | Slug szablonu i wartości pól |
| Kształt wyniku | Taki, jak wygląda strona w tym viewporcie | Dokładnie zaprojektowany układ |
| Proporcje | Viewportu, często 1280×800 (1,6:1) | Zwykle 1200×630 (1,91:1) |
| Czytelny przy 500 px szerokości | Rzadko — tekst kurczy się do ~5 px | Tak, jeśli zaprojektowany pod to |
| To samo wejście, ten sam wynik | Nie — strony się zmieniają, reklamy rotują, trwają testy A/B | Tak — cache po polach |
| Co może zepsuć | Banery cookies, leniwe ładowanie, ochrona przed botami, logowanie, wolne skrypty zewnętrzne | Za długie pole (rozwiązuje to dopasowanie tekstu) |
| Ponowny render, gdy | Zmieni się strona (rzadko wiesz kiedy) | Zmieni się pole (zawsze wiesz) |

O większości przypadków decyduje środkowy wiersz. Aktualności na Facebooku czy LinkedInie pokazują podgląd linku szeroki na mniej więcej 500 pikseli; zrzut artykułu szeroki na 1280 pikseli zmniejszony do tej szerokości zamienia 16-pikselowy tekst w około 6 pikseli. Obrazek jest technicznie poprawny i praktycznie nieczytelny.

## Kiedy zrzut ekranu jest właściwym og:image

- **Strona jest z natury wizualna**: pulpit, wykres, strona statusu, landing page, którym chcesz się pochwalić, praca w portfolio.
- **Pokazujesz cudzą witrynę**: katalogi linków, narzędzia do zakładek, funkcje „jak wygląda ta strona”, archiwa. Nie masz pól do szablonu — tylko adres.
- **Regresja wizualna albo monitoring**: porównywanie strony z nią samą w czasie.
- **Brak czasu na projekt karty**: zrzut sekcji hero jest lepszy niż brak obrazka.

W takich przypadkach poproś o viewport bliski kształtowi karty — 1200×630, jeśli strona dobrze się w nim czyta — zamiast domyślnego viewportu komputera, i ukryj to, co do podglądu nie pasuje:

```bash
curl -X POST "https://shareglint.com/v1/screenshots?wait=true" \
  -H "Authorization: Bearer $OG_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://status.example.com",
    "viewport_width": 1200,
    "viewport_height": 630,
    "block_cookie_banners": true,
    "block_ads": true,
    "hide_selectors": [".chat-widget"],
    "wait_for": ".status-grid",
    "format": "png"
  }'
```

`wait_for` czeka, aż pojawi się element pasujący do selektora, co ma znaczenie przy stronach, które renderują treść JavaScriptem po zdarzeniu `load`. Nieudana strona (4xx/5xx, przekroczony czas, adres prywatny) wraca jako `status: failed` z powodem i nic nie kosztuje.

Banery cookies to najczęstszy powód, dla którego zrzut strony źle wygląda w aktualnościach. `block_cookie_banners` klika „akceptuj” na popularnych platformach zgód (OneTrust, Cookiebot, Didomi, Usercentrics, Quantcast, TrustArc, Sourcepoint), a resztę ukrywa listą EasyList Cookie List; na naszym zestawie dziesięciu stron głównych serwisów informacyjnych i sklepów, pełnych banerów, usunął każdy, który się pojawił. Dwie kolejne opcje pomagają przy podglądach: `selector` zapisuje jeden element (wykres, tabelę cen) zamiast całego viewportu, a `click_selector` najpierw klika zakładkę albo „pokaż więcej”. Jeśli zamiast obrazka chcesz krótkie wideo do social mediów, `scroll_video: true` nagrywa płynne przewijanie strony jako MP4 albo GIF.

Bez serwera ten sam zrzut działa jako podpisany adres, który wpiszesz prosto w `og:image` albo `<img>`: `https://shareglint.com/s/acc_…png?url=https%3A%2F%2Fstatus.example.com&viewport_width=1200&viewport_height=630&s=…` — podpis liczy się dokładnie tak jak przy adresach obrazków w [dokumentacji API](https://shareglint.com/pl/docs#screenshots). Wszystkie opcje zrzutów opisuje strona [Screenshot API](https://shareglint.com/pl/screenshot-api).

## Kiedy szablon jest właściwym og:image

- **Blogi, dokumentacja, changelogi, strony produktów, oferty pracy, wydarzenia** — wszystko, co ma tytuł i kilka faktów, które mają być czytelne w aktualnościach.
- **Wiele stron w jednym stylu**: szablon trzyma każdą kartę w zgodzie z marką, bez otwierania programu graficznego.
- **Chcesz, żeby cache działał**: obrazek jest funkcją swoich pól. Ten sam tytuł, ten sam plik — bez ponownego renderu i bez zużycia limitu.

```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer $OG_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "blog-og",
    "modifications": {
      "title": "We moved our status page to static hosting",
      "author": "Ana Ruiz",
      "site": "status.example.com"
    }
  }'
```

Długie tytuły to główny słaby punkt szablonów — a po polsku tytuły bywają dłuższe niż angielskie. Dobry szablon zmniejsza tekst, żeby zmieścił się w ramce, zamiast wylewać go poza nią; w Shareglint robi to atrybut `data-autofit` i używa go każdy wbudowany szablon. Gotowe układy znajdziesz w [galerii szablonów](https://shareglint.com/pl/templates), a własny możesz napisać w HTML-u i CSS ([HTML do obrazka](https://shareglint.com/pl/html-to-image)).

## Rozwiązanie pośrednie: zrzut własnej trasy OG

Popularna droga środka to osobna, niepodlinkowana trasa w twojej witrynie — `/og/posts/42` — która renderuje kartę 1200×630 w twoim HTML-u i CSS, i zrzut ekranu tej trasy. Dostajesz wynik jak z szablonu, z twojego kodu, z twoimi fontami i komponentami.

To działa, ale trzeba zaplanować trzy koszty: trasa jest publiczna (każdy może wyrenderować dowolną kartę, zmieniając ID, więc nie wystawiaj szkiców), strona musi być na tyle szybka i stabilna, żeby zrzut za każdym razem wychodził tak samo, a utrzymujesz i trasę, i zadanie robiące zrzuty. Jeśli i tak piszesz kartę w HTML-u, wysłanie tego HTML-a do API szablonów jako samego szablonu usuwa trasę i zostawia ten sam kod — to ten sam pomysł, tylko bez publicznego endpointu.

## Ile to kosztuje

Ceny planów podstawowych wyspecjalizowanych screenshot API, z ich publicznych cenników (sprawdzone 2026-11-04, ceny miesięczne netto w USD):

| Serwis | Plan podstawowy | Zrzuty w cenie |
|---|---|---|
| [ScreenshotOne](https://screenshotone.com/pricing/) | $17 / mies. | 2000 (plan darmowy: 100) |
| [Urlbox](https://urlbox.com/pricing) | $19 / mies. | 2000 (7-dniowy okres próbny, bez planu darmowego) |
| [ApiFlash](https://apiflash.com/) | $7 / mies. | 1000 (plan darmowy: 100) |

W Shareglint zrzuty i obrazki z szablonów dzielą jeden limit: zrzut viewportu zużywa 1 render, zrzut całej strony 2, a ten sam adres z tymi samymi opcjami w ciągu 24 godzin zwraca istniejący plik za darmo. Plan Starter kosztuje $9 miesięcznie za 2 000 renderów; plan Free to 100 miesięcznie z małym znakiem wodnym ([cennik](https://shareglint.com/pl/pricing)).

Uczciwie wobec wyspecjalizowanych serwisów: mają opcje, których my nie oferujemy. ScreenshotOne we wszystkich planach daje m.in. tryb stealth i zapis gotowych plików do S3, a w najwyższym planie renderowanie na GPU; Urlbox ma od planu Hi-Fi własne nagłówki żądania i zapis do S3, a od Ultra własny JavaScript i renderowanie na GPU. Jeśli zrzuty ekranu są sednem twojego produktu, wybierz jeden z nich. Powodem, by użyć naszego, jest jeden klucz i jeden limit na zrzuty i szablony.

## Decyzja w dziesięć sekund

1. Obrazek ma pokazać, jak strona *wygląda*? Zrzut ekranu.
2. Ma czytelnie powiedzieć, *o czym* jest strona, w aktualnościach? Szablon.
3. Masz tylko adres, bez uporządkowanych danych? Zrzut — albo [karty generowane automatycznie](https://shareglint.com/pl/og-images-without-code), które wstawiają tytuł i opis strony do szablonu.
4. Potrzebujesz zawsze tego samego obrazka dla tej samej treści? Szablon.

Większość witryn kończy z szablonami dla własnych stron i zrzutami dla wszystkiego, co zewnętrzne albo wizualne. Obie odpowiedzi są w porządku; zła jest jedna — zrzut artykułu 1280×800 jako obrazek do udostępniania tego właśnie artykułu.

## FAQ

### Czy mogę użyć zrzutu ekranu strony jako og:image?

Tak, to poprawny obrazek, ale zrzut z komputera ma zwykle proporcje około 1,6:1 zamiast 1,91:1, a tekst czytelny na monitorze staje się nieczytelny w podglądzie szerokim na 500 pikseli. Jeśli karta ma być czytelna, rób zrzut strony zaprojektowanej na 1200×630 albo użyj szablonu.

### Czym się różni screenshot API od API szablonów graficznych?

Screenshot API ładuje adres w przeglądarce i zapisuje to, co widać. API szablonów bierze układ zaprojektowany raz i wypełnia go polami, które wysyłasz, np. tytułem i autorem, więc każdy obrazek ma tę samą strukturę.

### Co jest tańsze?

Za pojedynczy obrazek podobnie — w planach podstawowych zwykle od pół centa do centa. Większa różnica to ponowne renderowanie: obrazek z szablonu zmienia się tylko, gdy zmieniają się jego pola, a zrzut żywej strony starzeje się przy każdej zmianie strony.

### Kiedy zrzut ekranu jest lepszym wyborem?

Gdy treścią jest sama strona: pulpity, strony statusu, wykresy, podglądy cudzych witryn, archiwa i testy regresji wizualnej. Szablony są lepsze dla kart społecznościowych, które mają być czytelne w miniaturce.