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
python3 -m http.server 4173Then open http://localhost:4173. Opening index.html directly off the filesystem
also works, but a server keeps paths honest.
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:
- Add the site in AdSense and pass review. A
github.iosubdomain is eligible, but a custom domain (see below) usually reviews more smoothly. - Paste the
ads.txtline AdSense gives you into this repo's root asads.txt. GitHub Pages will serve it at/ads.txt. - 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.
To serve this at redact.pixel8.ca instead:
- Add a file named
CNAMEin the repo root containingredact.pixel8.ca. - In your DNS, add a
CNAMErecord:redact→teampixel8.github.io. - In the repo's Settings → Pages, set the custom domain and tick Enforce HTTPS.
- Update the
canonical,og:urland JSON-LDurlvalues inindex.html.
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.
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.