Il y a dix ans, retoucher une image sur un site web signifiait la téléverser, attendre qu'un serveur fasse le travail, et télécharger le résultat. Aujourd'hui, un navigateur peut compresser une photo de 30 Mo, convertir un PNG en WebP, ou redimensionner un lot d'images sans jamais contacter un serveur. Deux technologies ont rendu ce basculement possible : Canvas et WebAssembly. Ni l'une ni l'autre n'est mystérieuse une fois qu'on voit ce que chacune fait.

Canvas : une surface de dessin avec accès aux pixels

"Comment les navigateurs traitent les images : Canvas et WebAssembly expliqués" — visual 1
Canvas : une surface de dessin avec accès aux pixels

Chaque navigateur moderne intègre l'API Canvas — un rectangle vierge sur lequel vous pouvez dessiner en JavaScript. Sa vraie puissance pour les outils d'image n'est pas de dessiner des formes ; c'est que Canvas donne au code un accès direct aux pixels individuels d'une image.

Quand vous chargez une photo dans une toile, le navigateur remet à votre code un tableau de nombres : les valeurs de rouge, vert, bleu et alpha (transparence) de chaque pixel. À partir de là, les opérations ordinaires deviennent simples :

  • Redimensionner signifie échantillonner cette grille de pixels dans une plus petite ou une plus grande.
  • Recadrer signifie copier une région rectangulaire dans une nouvelle toile.
  • Pivoter et retourner sont des transformations géométriques appliquées avant le dessin.
  • La conversion de format se produit quand vous exportez la toile — demandez un JPEG, un PNG ou un WebP et le navigateur encode les pixels en conséquence.

Tout cela tourne sur votre propre appareil, avec votre processeur et, si disponible, votre carte graphique. Rien n'est téléversé, car les pixels ne quittent jamais la page. C'est pourquoi le convertisseur d'images peut transformer un PNG en WebP à l'instant où vous le déposez — il n'y a aucun aller-retour à attendre.

WebAssembly : une vitesse quasi native dans le navigateur

"Comment les navigateurs traitent les images : Canvas et WebAssembly expliqués" — visual 2
WebAssembly : une vitesse quasi native dans le navigateur

Canvas gère les transformations courantes, mais certaines tâches exigent une vraie puissance de calcul — l'encodage JPEG de haute qualité, l'optimisation PNG, l'exécution d'un modèle d'IA pour détourer un arrière-plan. Le JavaScript seul peut être trop lent pour cela. C'est là qu'intervient WebAssembly (souvent abrégé en Wasm).

WebAssembly est un format compact et bas niveau que les navigateurs peuvent exécuter à une vitesse proche du natif. Les développeurs prennent du code rapide et éprouvé écrit dans des langages comme C, C++ ou Rust — les mêmes bibliothèques qui font tourner les logiciels d'image de bureau — et le compilent en Wasm. Le navigateur exécute ensuite ce code dans un environnement isolé et serré, bien plus vite que le JavaScript équivalent.

En pratique, cela signifie qu'un onglet de navigateur peut désormais faire un travail qui nécessitait autrefois un serveur ou une application de bureau : encoder des images avec une compression de niveau pro, supprimer des métadonnées, ou exécuter un réseau de neurones pour la suppression d'arrière-plan — le tout localement.

Pourquoi le traitement local est à la fois privé et rapide

Réunissez Canvas et WebAssembly et les avantages découlent naturellement.

La confidentialité est structurelle, pas une promesse. Comme les pixels restent dans la page et que le traitement tourne sur votre processeur, il n'y a aucune étape de téléversement. Il n'y a aucune copie serveur de votre fichier à stocker, journaliser, mettre en cache ou entraîner — car le fichier n'a jamais été transmis. Vous n'avez pas à faire confiance à une politique de confidentialité ; vous pouvez la vérifier en activant le mode avion et en regardant l'outil continuer de fonctionner.

La vitesse vient de la suppression totale du réseau. L'étape la plus lente d'un outil serveur est généralement le transfert de votre fichier vers le haut puis vers le bas. Retirez-la, et une photo de 40 Mo se traite à peu près aussi vite qu'une de 40 Ko. Il n'y a pas non plus de file d'attente — votre appareil travaille sur votre seule image, pas sur celles de milliers d'autres personnes.

Il y a un bonus que la plupart des gens n'attendent pas : comme tout l'outil n'est que du code et des ressources, un navigateur peut le mettre en cache. IMG.DIY est une PWA dotée d'un service worker, donc après votre première visite les outils sont stockés sur votre appareil et continuent de fonctionner hors ligne — en mode avion, dans un avion, partout. Compresser et convertir ne nécessitent aucune connexion.

Les compromis, honnêtement

Le traitement dans le navigateur n'est ni magique ni exempt de limites. De très gros lots peuvent solliciter la mémoire d'un téléphone d'entrée de gamme, puisque le travail utilise les ressources de votre appareil plutôt que celles d'un centre de données. Et quelques fonctions ont vraiment besoin du réseau — tout ce qui appelle un service externe, comme un audit de vitesse de page, ne peut pas fonctionner hors ligne. La suppression d'arrière-plan est un cas intermédiaire : elle tourne localement, mais seulement après un téléchargement unique du fichier du modèle.

Pour les tâches du quotidien, cependant — compresser, convertir, redimensionner, recadrer, pivoter — le navigateur est désormais un atelier d'image complet, privé et rapide qui se trouve vivre dans un onglet. Sans téléversement, sans serveur, sans attente.