Pixelate

픽셀화

Shrinking an image to a tiny resolution and scaling it back up, leaving only blocky squares of colour — the classic mosaic/censor effect.

Also known as: Mosaic effectPixel mosaicimage-rendering: pixelated

···

html

<canvas id="px" width="16" height="10"></canvas>

css

#px{width:min(260px,80%);aspect-ratio:16/10;border-radius:8px;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges}

const px = document.getElementById('px');
const ctx = px.getContext('2d');
let n = 6, dir = 1;
function draw(res) {
  px.width = res;
  px.height = Math.max(2, Math.round(res * 0.625));
  const g = ctx.createLinearGradient(0, 0, px.width, px.height);
  g.addColorStop(0, '#5b5bf7'); g.addColorStop(.5, '#ff5c8a'); g.addColorStop(1, '#ffb648');
  ctx.fillStyle = g; ctx.fillRect(0, 0, px.width, px.height);
  ctx.fillStyle = '#18c29c';
  ctx.beginPath(); ctx.arc(px.width * 0.6, px.height * 0.4, px.width * 0.18, 0, Math.PI * 2); ctx.fill();
}
function loop() {
  n += dir * 0.15;
  if (n > 28) dir = -1;
  if (n < 4) dir = 1;
  draw(Math.round(n));
  requestAnimationFrame(loop);
}
loop();

The mechanism is simple — render the image at a tiny resolution (say 16×10px), then scale it back up with CSS while setting image-rendering: pixelated to disable the browser's default smoothing. What you see are the original pixels blown up into visible squares.

For photos, a canvas is typically drawn small with drawImage and then the canvas itself is scaled up with CSS. The mosaic block size is controlled purely by how small the intermediate resolution is — smaller means chunkier blocks.

When to use

Use for censoring sensitive content, retro-game graphics, low-res loading previews (LQIP). If the goal is actually hiding information, use large enough blocks — a mild setting can be reversed.