# Personalizowane obrazki w mailach: osobna grafika dla każdego odbiorcy

> Imię odbiorcy, jego kod rabatowy albo bilet na obrazku w mailu: podpisane adresy zapisane w polu kontaktu albo zlecenie hurtowe przed wysyłką.

Opublikowano 2026-11-04 · https://shareglint.com/pl/use-cases/personalized-email-images

**Personalizowany obrazek w mailu** to grafika zrobiona dla jednego odbiorcy — jego imię na bilecie na wydarzenie, jego kod na kuponie rabatowym, jego certyfikat — wstawiona do wiadomości jak każdy inny obrazek. W Shareglint projektujesz obrazek raz jako szablon, a potem każdy kontakt dostaje adres obrazka ze swoimi wartościami: **podpisany adres**, który renderuje się przy pierwszym pobraniu przez program pocztowy, albo plik wyrenderowany wcześniej w **zleceniu hurtowym**. W obu przypadkach w samym mailu jest tylko `<img src="…">` z adresem tego kontaktu, który narzędzie do mailingu wstawia z pola kontaktu.

## Dlaczego pole kontaktu, a nie merge tag w adresie

Pierwszy pomysł — wstawić `*|FNAME|*` do adresu obrazka — przy podpisanych adresach nie zadziała. Podpisany adres (`/i/{account}/{template}.png?name=Anna&s=…`) zawiera HMAC ścieżki i wszystkich wartości pól, więc nikt nie zmieni imienia w linku i nie będzie renderował na twój limit. Narzędzie do mailingu wypełnia merge tagi przy wysyłce, ale HMAC-a nie policzy, więc podpis nie zgadzałby się z wstawionymi wartościami.

Rozwiązanie leży krok wcześniej: policz pełny adres każdego kontaktu w skrypcie, zaimportuj go jako pole kontaktu (`CARD_URL`) i użyj tego pola w szablonie maila. Mailchimp na przykład robi z każdego pola listy merge tag w rodzaju `*|CARD_URL|*`, którego można użyć w linkach i adresach obrazków ([merge tagi Mailchimpa](https://mailchimp.com/help/all-the-merge-tags-cheat-sheet/)); inne narzędzia mają to samo pod inną składnią.

```html
<img src="*|CARD_URL|*" width="600" height="315"
     alt="Twój bilet na DevConf 2026, miejsce 14C" style="display:block;width:100%;max-width:600px;height:auto">
```

## Sposób 1: podpisane adresy, render przy pierwszym pobraniu

Podpisany adres liczysz lokalnie z identyfikatora konta i sekretu do podpisów — bez zapytania do API i bez zużycia limitu, dopóki ktoś go nie pobierze:

```javascript
import { createHmac } from 'node:crypto';

// RFC 3986: encodeURIComponent leaves ! ' ( ) * alone.
const enc = (v) => encodeURIComponent(String(v))
  .replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase());

export function signedImageUrl(template, fields, ext = 'png') {
  const path = `/i/${process.env.ACCOUNT_ID}/${template}.${ext}`;
  const query = Object.keys(fields).sort()
    .map((name) => `${enc(name)}=${enc(fields[name])}`)
    .join('&');
  const s = createHmac('sha256', process.env.SIGNING_SECRET)
    .update(`${path}?${query}`).digest('hex').slice(0, 32);
  return `https://shareglint.com${path}?${query}&s=${s}`;
}

// One row per contact → CSV to import into your mailing tool.
for (const c of contacts) {
  const url = signedImageUrl('event-ticket', { title: 'DevConf 2026', admit: c.name, seat: c.seat }, 'jpg');
  console.log(`${c.email},${url}`);
}
```

Podpisywany ciąg to ścieżka, `?` i wszystkie parametry oprócz `s`, posortowane po nazwie i zakodowane według RFC 3986; `s` to pierwsze 32 znaki szesnastkowe HMAC-SHA256 z twoim sekretem do podpisów. [Dokumentacja](https://shareglint.com/pl/docs#signed) opisuje to z przykładami w innych językach; identyfikator konta jest publiczny, sekret do podpisów — nie.

Co dzieje się przy wysyłce: programy pocztowe pobierają obrazek wkrótce po doręczeniu, a nie dopiero przy otwarciu maila. Gmail wyświetla obrazki automatycznie po ich przeskanowaniu, a nadawcy nie mogą przez wczytanie obrazka dowiedzieć się niczego o komputerze ani lokalizacji czytelnika ([Google](https://support.google.com/mail/answer/145919)) — zapytanie przychodzi od Google, nie od czytelnika. Apple Mail z Ochroną prywatności w Mailu „prywatnie pobiera zdalną zawartość w tle, gdy otrzymujesz wiadomość” ([Apple](https://support.apple.com/guide/mail/protect-email-privacy-mlhlp1205/mac)). Pierwsze pobranie — a z nim render — przychodzi więc u większości odbiorców tuż po wysyłce, niezależnie od tego, czy otworzą maila. Render trwa około sekundy; kolejne pobrania to przekierowania do pliku z pamięci podręcznej.

## Sposób 2: wszystko wyrenderowane przed wysyłką

Jeśli wolisz mieć wszystkie pliki gotowe, zanim klikniesz „Wyślij” — żeby je sprawdzić albo dlatego, że lista jest duża i chcesz mieć rendery z głowy — użyj zlecenia hurtowego:

```bash
curl -X POST "https://shareglint.com/v1/batches" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{ "template": "event-ticket", "format": "jpeg", "csv_url": "https://example.com/attendees.csv" }'
```

Wstaw adres e-mail kontaktu do kolumny `id`; wynik każdego wiersza wraca z tym `id` i adresem obrazka, więc adresy wpiszesz z powrotem do narzędzia do mailingu jako `CARD_URL`. Limit wierszy na zlecenie według planu: Free 50, Starter 500, Pro 1 000, Scale 2 000, Business 5 000. Adres wyrenderowanego obrazka działa tak długo, jak przechowujemy plik (365 dni w planach płatnych, 30 w planie Free), czyli dłużej niż trwa większość kampanii — ale mail otwarty później pokaże uszkodzony obrazek. Podpisanemu adresowi to się nie zdarzy: wyrenderuje się od nowa.

## Żeby obrazek działał w mailu

- **Format.** Używaj JPEG albo PNG. Outlook dla Windows nie obsługuje WebP, a Gmail go konwertuje ([Can I email](https://www.caniemail.com/features/image-webp/)). Podpisany adres wybiera format po rozszerzeniu: `.jpg` do zdjęć i gradientów, `.png` do jednolitych kolorów i ostrego tekstu.
- **Rozmiar.** Treść maila ma zwykle około 600 px szerokości. Szablon 1200×630 wyświetlony z `width="600"` jest ostry na ekranach o dużej gęstości pikseli. Pliki rastrowe z podpisanych adresów mają dwukrotność rozmiaru szablonu, więc jeśli chcesz lżejszy plik, zrób szablon 600×315 i zostaw ten sam `width`.
- **Tekst alternatywny.** Wiele programów blokuje obrazki, dopóki czytelnik ich nie dopuści, a czytniki ekranu czytają `alt`. Najważniejsze informacje — miejsce, kod — umieść w `alt` i w treści maila; nigdy tylko na obrazku.
- **Tryb ciemny.** Niektóre programy zmieniają kolory w trybie ciemnym. Projekt z własnym, pełnym tłem (nie przezroczystym) zachowuje wygląd; wbudowane szablony przyjmują `theme` (`dark` albo `light`), jeśli chcesz wersji ciemnej.

## Koszt

Każdy odrębny obrazek to jeden render; kontakty z tymi samymi wartościami dzielą jeden plik, a ponowne pobrania są darmowe. Przy podpisanych adresach zakładaj, że wyrenderuje się obrazek prawie każdego odbiorcy, bo opisane wyżej pobieranie z wyprzedzeniem dzieje się przy doręczeniu. Kampania do 5000 kontaktów to więc około 5000 renderów: 100 miesięcznie w planie Free wystarczy do testów, Starter kosztuje $9 za 2 000, Pro $29 za 10 000, a jednorazowa paczka 1 000 renderów — $8 ([cennik](https://shareglint.com/pl/pricing)). Plan Free dodaje też znak wodny, którego w mailu do klienta nie chcesz.

## Czego nie robi

- **Brak treści na żywo.** Ten sam adres zawsze zwraca ten sam obrazek, a programy pocztowe trzymają go w pamięci podręcznej: żadnych odliczań, które tykają przy każdym otwarciu, ani cen, które zmieniają się po wysyłce.
- **Brak śledzenia otwarć.** Pobieranie z wyprzedzeniem i tak sprawia, że zapytania o obrazek słabo mówią o otwarciach, a my nie raportujemy pobrań poszczególnych odbiorców.
- **Brak wysyłki.** Renderujemy obrazki; maila wysyła twoje narzędzie do mailingu.
- **Brak natywnej integracji z narzędziami do mailingu.** Pomostem są pola kontaktów i import CSV; nie ma aplikacji dla Mailchimpa ani Kit.

## Pomysły, które pasują

- Bilety na wydarzenia z imieniem, miejscem i obrazkiem kodu QR, który generujesz sam.
- Kupony z kodem każdego klienta — kod także w tekście, żeby dało się go skopiować.
- [Certyfikaty ukończenia kursu](https://shareglint.com/pl/use-cases/certificates) podlinkowane w mailu z gratulacjami, jako podgląd PNG i [jednostronicowy PDF](https://shareglint.com/pl/pdf-generation-api).
- Karty „Twój rok w liczbach” z trzema albo czterema statystykami danego kontaktu.

Szablony do większości z nich znajdziesz w [galerii](https://shareglint.com/pl/templates); działa też twój własny HTML i CSS, z darmowym podglądem przed zapisaniem.

## FAQ

### Czy mogę wstawić merge tag prosto do adresu obrazka?

Nie przy podpisanym adresie: podpis liczy się z ostatecznych wartości pól, a narzędzie do mailingu nie policzy HMAC w chwili wysyłki. Policz podpisany adres każdego kontaktu w skrypcie, zapisz go w polu kontaktu i wstaw merge tag tego pola do src obrazka.

### Kiedy obrazek się renderuje?

Przy podpisanym adresie — przy pierwszym pobraniu, zwykle zaraz po doręczeniu, bo Gmail pobiera obrazki przez swój serwer proxy, a Apple Mail z Ochroną prywatności w Mailu pobiera zdalną zawartość w tle, gdy wiadomość przychodzi. Przy zleceniu hurtowym — przed wysyłką.

### Ile kosztuje spersonalizowany obrazek w mailu?

Jeden render na każdy odrębny obrazek. Kontakty z identycznymi wartościami dzielą jeden plik, a ponowne pobranie tego samego obrazka jest darmowe. Przy podpisanych adresach licz się z tym, że wyrenderuje się obrazek prawie każdego odbiorcy, bo programy pocztowe pobierają obrazki z wyprzedzeniem, niezależnie od tego, czy mail zostanie otwarty.

### Jakiego formatu obrazka użyć w mailu?

PNG albo JPEG. Outlook dla Windows nie obsługuje WebP, a Gmail go konwertuje, więc podpisany adres powinien kończyć się na .png albo .jpg.

### Czy obrazek może się zmieniać przy każdym otwarciu, jak odliczanie na żywo?

Nie. Podpisany adres przy tych samych wartościach zawsze zwraca ten sam obrazek, a programy pocztowe trzymają obrazki w pamięci podręcznej, więc odliczania przy każdym otwarciu ani aktualnej ceny w ten sposób nie zrobisz.