Skip to content

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Redact — a free image pixelation tool by Pixel8

Live: https://teampixel8.github.io/redact/

Drop in an image, pixelate the whole thing or paint over just the sensitive parts, download a flat PNG. Everything runs in the visitor's browser — no upload, no server, no storage. Static files only; there is no build step.

index.html          the page
styles/main.css     brand tokens + layout
scripts/app.js      the pixelation engine
scripts/ads.js      ad slots (see below)
assets/             logo, favicon, social card

Local preview

python3 -m http.server 4173

Then open http://localhost:4173. Opening index.html directly off the filesystem also works, but a server keeps paths honest.

Turning ads on

scripts/ads.js ships with placeholder IDs, so no request is made to Google and the ad slots stay collapsed. To activate, replace the three X-strings at the top:

window.PIXEL8_ADS = {
  client: 'ca-pub-1234567890123456',   // your AdSense publisher ID
  slots: {
    inline: '1234567890',              // unit under the tool
    footer: '1234567890'               // unit above the footer
  }
};

Append ?ads=preview to any URL to see the slot positions without live ads.

Before ads will serve, you also need to:

  1. Add the site in AdSense and pass review. A github.io subdomain is eligible, but a custom domain (see below) usually reviews more smoothly.
  2. Paste the ads.txt line AdSense gives you into this repo's root as ads.txt. GitHub Pages will serve it at /ads.txt.
  3. Set up a consent message in AdSense → Privacy & messaging for EEA/UK traffic. That is a requirement, not a nicety, and AdSense hosts it for you.

Custom domain (optional)

To serve this at redact.pixel8.ca instead:

  1. Add a file named CNAME in the repo root containing redact.pixel8.ca.
  2. In your DNS, add a CNAME record: redactteampixel8.github.io.
  3. In the repo's Settings → Pages, set the custom domain and tick Enforce HTTPS.
  4. Update the canonical, og:url and JSON-LD url values in index.html.

Linking it from pixel8.ca

Add a Resources page in Squarespace and link out to the tool. Linking beats embedding it in an iframe: an iframe would put the ads inside a frame on a domain Google isn't reviewing, which AdSense treats as a policy problem.

Notes on the redaction itself

Blocks are averaged alpha-weighted, so transparent PNGs stay transparent and don't pick up a dark fringe. The averaging runs across the whole image on one fixed grid and is then composited only where the selection mask covers, so overlapping strokes line up.

Pixelation is not encryption. For a short, guessable secret — a 4-digit PIN, a 3-digit CVV — someone can render every candidate and compare against the block pattern. Use a very large block size or a solid box for those. The page says so too.

Releases

Packages

Contributors

Languages