# Tracking pixel uses a transparent 1x1 GIF or PNG

- **Pattern:** `ab-000581` (`campaign-analytics-attribution.tracking-implementation.pixel-format-correct`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000581
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000581)

## Why it matters

Open-tracking pixels only fire when the receiving client treats the endpoint as a loadable image — a 204 response, a redirect, or an `image/gif` Content-Type served as `text/html` causes Gmail, Outlook, and Apple Mail to silently drop the request, so your open-rate metric reports zero even when the email was read. Cache-allowed pixels compound the damage by suppressing re-open events, which breaks engagement scoring, re-engagement workflows, and the funnel attribution data that downstream CAC calculations rely on.

## Severity rationale

Medium because broken pixels corrupt engagement metrics and re-engagement targeting without directly affecting deliverability or revenue.

## Remediation

Serve a genuine 1x1 transparent GIF from the pixel route with `Content-Type: image/gif`, `Content-Length`, and `Cache-Control: no-cache, no-store, must-revalidate`; record the open event asynchronously so the image response is not blocked by the database write. Implement this at `pages/api/pixel/[...params].ts` (or the App Router equivalent).

```ts
return new Response(pixel, { headers: { 'Content-Type': 'image/gif', 'Cache-Control': 'no-cache, no-store, must-revalidate' } })
```

## Detection

- **ID:** `pixel-format-correct`
- **Severity:** `medium`
- **What to look for:** Examine the pixel endpoint that handles open tracking. Check what the endpoint returns as its response body. A properly implemented tracking pixel should return a 1x1 transparent GIF (Content-Type: image/gif) or PNG (Content-Type: image/png) with a minimal body. Look for `Content-Type` response headers and response body construction. Check whether the pixel response includes appropriate cache-busting headers to prevent browser caching from suppressing re-open events.
- **Pass criteria:** The pixel endpoint returns a 1x1 transparent GIF or PNG with the correct Content-Type header (`image/gif` or `image/png`). Cache-Control header set to `no-cache, no-store` or equivalent. Response body is a valid image. Count every response header set on the pixel endpoint — at least 3 headers must be present (Content-Type, Content-Length, Cache-Control).
- **Fail criteria:** Pixel endpoint returns a redirect, an empty 204 response without an image body, or returns an image with incorrect Content-Type. Or cache headers allow caching (which prevents counting subsequent opens). Returning a 200 with no body or an HTML response must not pass.
- **Skip (N/A) when:** The project does not use tracking pixels for open detection.
- **Detail on fail:** Example: `"Pixel endpoint returns 204 No Content — email clients may not trigger the request at all"` or `"Content-Type header missing — response may be treated as HTML by some clients"`
- **Remediation:** Return a proper 1x1 transparent GIF:

  ```ts
  // pages/api/pixel/[...params].ts or equivalent
  export async function GET(req: Request) {
    // Record the open event (async, don't block response)
    recordOpenAsync(req).catch(console.error)

    // 1x1 transparent GIF — this exact byte sequence
    const pixel = Buffer.from(
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
      'base64'
    )

    return new Response(pixel, {
      status: 200,
      headers: {
        'Content-Type': 'image/gif',
        'Content-Length': String(pixel.length),
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    })
  }
  ```

Taxons: observability

HTML version: https://auditbuffet.com/patterns/ab-000581