Comment fonctionne un algorithme de pixelisation d’image ?

Dans les coulisses : comment chaque pixel devient un carré de couleur

Pour bien comprendre un algorithme de pixelisation, il faut oublier l’idée de « flou » ou de « filtre magique ». En réalité, tout repose sur une opération très concrète : regrouper des pixels et leur donner une couleur unique.

Regardons maintenant comment cela se passe réellement dans le code, exactement comme le fait Pixeliser.

Étape 1 : Découper l’image en blocs

La première étape consiste à définir la taille des blocs. Par exemple : 16 pixels × 16 pixels.

Visuellement, cela revient à poser une grille invisible sur l’image : chaque case de cette grille deviendra un carré pixelisé.

// taille d'un bloc de pixelisation
const pixelSize = 16;

// dimensions de l'image
const width = image.width;
const height = image.height;
  

L’algorithme va ensuite parcourir l’image bloc par bloc, de gauche à droite et de haut en bas.

for (let y = 0; y < height; y += pixelSize) {
  for (let x = 0; x < width; x += pixelSize) {
    // chaque itération correspond à un bloc
  }
}
  

Étape 2 : Lire les pixels contenus dans chaque bloc

Une image numérique n’est qu’une énorme liste de pixels. Chaque pixel contient 4 valeurs : Rouge, Vert, Bleu et Alpha (transparence).

Pour un bloc de 16 × 16 pixels, cela représente 256 pixels individuels.

const imageData = ctx.getImageData(x, y, pixelSize, pixelSize);
const data = imageData.data;
  

Le tableau data contient toutes les couleurs du bloc, rangées les unes à la suite des autres :

• data[i] → rouge
• data[i + 1] → vert
• data[i + 2] → bleu
• data[i + 3] → alpha

Étape 3 : Calculer la couleur moyenne du bloc

C’est ici que la magie opère : et pourtant, il ne s’agit que de maths très simples.

On additionne toutes les valeurs rouges, vertes et bleues, puis on divise par le nombre total de pixels.

let r = 0, g = 0, b = 0;
const pixelCount = data.length / 4;

for (let i = 0; i < data.length; i += 4) {
  r += data[i];
  g += data[i + 1];
  b += data[i + 2];
}

r = Math.round(r / pixelCount);
g = Math.round(g / pixelCount);
b = Math.round(b / pixelCount);
  

Le résultat est une seule couleur représentative du bloc. C’est cette couleur qui remplacera tous les pixels originaux.

Étape 4 : Dessiner le carré pixelisé

Une fois la couleur calculée, il ne reste plus qu’à dessiner un rectangle rempli de cette couleur.

ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.fillRect(x, y, pixelSize, pixelSize);
  

Ce rectangle remplace visuellement tous les pixels du bloc. L’opération est répétée pour toute l’image.

Pourquoi les pixels restent bien nets ?

Un détail crucial : le lissage est désactivé. Sans cela, le navigateur tenterait de « lisser » les carrés.

ctx.imageSmoothingEnabled = false;
  

C’est ce simple paramètre qui garantit des bords francs et un rendu pixelisé net, sans flou.

Un mot sur le CSS et le rendu final

Le rendu visuel dépend aussi du CSS. Par exemple, forcer le rendu pixelisé côté navigateur :

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
  

Cela évite toute interpolation automatique lors des redimensionnements à l’écran.

Pourquoi la pixelisation est irréversible

Une fois les blocs dessinés, les pixels d’origine ont disparu. Les détails fins sont mélangés dans une moyenne.

C’est pour cette raison que la pixelisation est :

• excellente pour l’anonymisation
• idéale pour le pixel art
• très difficile à « dé-pixeliser » correctement

Pixeliser applique exactement ce principe, en temps réel, directement dans ton navigateur, sans serveur et sans stockage d’image.