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

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); inne narzędzia mają to samo pod inną składnią.

<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:

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 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) — 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). 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:

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). 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). 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 podlinkowane w mailu z gratulacjami, jako podgląd PNG i jednostronicowy PDF.
• Karty „Twój rok w liczbach” z trzema albo czterema statystykami danego kontaktu.

Szablony do większości z nich znajdziesz w galerii; działa też twój własny HTML i CSS, z darmowym podglądem przed zapisaniem.