Agrandir le pixel art sans flou

Pourquoi un redimensionnement classique rend le pixel art flou

Tous les redimensionneurs généralistes — celui du navigateur, le lecteur de vignettes du système, les réglages par défaut de Photoshop et l’optimisation automatique de la plupart des frameworks Web — utilisent une forme d’interpolation. La plus courante est bilinéaire, et les variantes plus coûteuses, bicubique ou Lanczos, affinent la même idée : calculer un pixel en mélangeant les voisins selon leur distance.

C’est la bonne approche pour une photographie. Une photo n’a pas de bords réellement durs au niveau des pixels : le dégradé d’une joue ou un fond flou doit paraître lisse, et mélanger les échantillons voisins reconstruit quelque chose de proche d’une capture à plus haute résolution. Le calcul suppose que l’image est une version échantillonnée d’une scène continue.

Le pixel art n’est pas une photographie échantillonnée. Chaque pixel est une décision volontaire et distincte d’un artiste : cette couleur exacte, dans cette cellule exacte, avec une limite nette avec la suivante. Lorsqu’un outil bilinéaire l’agrandit, il fabrique des pixels de dégradé entre des couleurs qui n’étaient jamais destinées à se mélanger, car il ne peut pas savoir que la frontière est intentionnelle. Le résultat est ce flou familier : les contours noirs nets deviennent des halos gris, et les aplats acquièrent un léger dégradé absent de la source.

Voisin le plus proche : correction de base

Voisin le plus proche pose une autre question lors du redimensionnement. Pour chaque pixel de sortie, aucun mélange n’est effectué : seule la couleur du pixel source le plus proche est copiée. Agrandir un sprite 16×16 en 64×64 au plus proche transforme chaque pixel source en bloc plein 4×4 de couleur identique. Aucune nouvelle couleur ni aucun contour adouci. C’est le minimum requis pour que le pixel art reste du pixel art après agrandissement.

La plupart des outils proposent cette méthode comme option explicite plutôt que par défaut : le plus proche voisin est mal adapté aux photographies, où il produit des blocs et des contours dentelés. Vous devez l’activer :

• Photoshop / GIMP : réglez le rééchantillonnage sur « Nearest Neighbor » dans Photoshop ou « None » dans GIMP avant le redimensionnement.
• ImageMagick : -filter point avant -resize.
• API Canvas (navigateur/JS) : ctx.imageSmoothingEnabled = false avant de dessiner l’image redimensionnée.
• Python / Pillow : Image.resize(size, Image.NEAREST).

Pourquoi le facteur d’agrandissement doit être entier

Le plus proche voisin seul ne suffit pas. Il faut aussi un facteur d’échelle entier : 2x, 3x, 4x, pas 1.5x ni une largeur cible arbitraire située entre des multiples exacts.

À une échelle entière, chaque pixel source correspond à un bloc de sortie de taille identique : 3x transforme chaque pixel en un carré net de 3×3. La grille reste uniforme, et chaque pixel d’origine bénéficie d’une représentation égale et cohérente.

À une échelle non entière comme 1.5x, certains pixels sources sont représentés par un bloc de sortie de 2×2, d’autres par 1×1 ou un rectangle déséquilibré de 2×1, car la grille d’échantillonnage ne se divise pas régulièrement. L’image reste techniquement au « plus proche voisin », sans mélange de couleurs, mais les tailles de pixels deviennent visiblement incohérentes : certains blocs paraissent plus gros et les diagonales droites d’origine prennent un décalage irrégulier. Le résultat semble subtilement incorrect plutôt que proprement agrandi.

En pratique, choisissez la taille cible en partant d’un multiple entier des dimensions source, plutôt qu’en partant d’une cible fixe en pixels. Si la source mesure 48×48 et doit s’afficher autour de 150px, utilisez 3x (144px) ou 4x (192px) et laissez le CSS ou la mise en page absorber la différence, au lieu de demander exactement 150px au redimensionneur.

Garder la netteté en CSS

Redimensionner le fichier lui-même ne résout que la moitié du problème sur le Web. Même un PNG agrandi au plus proche sera de nouveau flouté si le navigateur le redimensionne au rendu avec son lissage par défaut. La solution est une propriété CSS appliquée à l’élément affiché <img> ou un élément canvas :

image-rendering: pixelated;

Cela indique au navigateur d’utiliser un échantillonnage au plus proche chaque fois qu’il doit redimensionner l’image pour l’afficher, y compris dans les cas que vous ne contrôlez pas directement : l’utilisateur zoome sur la page ou l’image se trouve dans un conteneur responsive qui change avec la fenêtre d’affichage. Tous les principaux navigateurs actuels le prennent en charge. Une alternative plus ancienne et prise en charge moins uniformément est image-rendering: crisp-edges;, identique dans certains navigateurs, légèrement différent dans d'autres ; pour le pixel art, pixelated est le choix le plus prévisible.

Filtrage ponctuel dans les moteurs de jeu

Les moteurs de jeu rencontrent le même problème à un niveau inférieur : les sprites sont redimensionnés à l’exécution selon le zoom de la caméra, la résolution de l’écran et les paramètres de pixels par unité, pas seulement lors de l’exportation. Chaque moteur propose un réglage de filtrage des textures ; le choix adapté au pixel art porte systématiquement un nom proche de « point » ou « nearest » :

• Unity : Filter Mode sur Point (no filter) à l'import, expliqué dans notre Guide d’import de sprites Unity.
• Godot : la propriété de filtrage de la texture réglée sur Nearest, pour chaque texture ou comme valeur par défaut du projet 2D en pixel art.
• Unreal : Texture Group ou Filter réglé sur Nearest Neighbor pour les textures de sprites.

Laisser le filtre bilinéaire/linéaire par défaut actif est la cause la plus courante d’un jeu en pixel art flou dans le moteur, alors que ses fichiers sources sont nets.

Algorithmes spécialisés d'agrandissement pixel art

Le plus proche voisin est fidèle, mais produit des blocs : à fort grossissement, les diagonales et courbes du dessin original montrent des marches visibles, car l’algorithme ne reconnaît pas de lignes, seulement des pixels individuels. Une famille d’algorithmes conçus pour le pixel art tente de lisser ces marches sans ajouter de flou, en analysant les motifs locaux plutôt qu’en traitant chaque pixel isolément.

• Scale2x / Scale3x (également appelés AdvMAME2x/3x) : le plus simple de la famille. Il examine les quatre voisins directs de chaque pixel et, lorsqu’il détecte un motif de contour diagonal, divise le pixel agrandi pour donner au contour une inclinaison plutôt qu’une marche. Rapide et raisonnable par défaut pour des sprites simples aux contours propres.
• EPX / hqx (hq2x, hq3x, hq4x) : prolonge la même idée avec une recherche plus large de motifs de pixels voisins et davantage de formes de sortie possibles par motif, produisant des résultats plus arrondis et courbes. Il fonctionne bien sur les contours de sprites dessinés à la main, moins bien sur le pixel art tramé ou bruité, où la reconnaissance de motifs détecte de faux contours.
• xBRZ : un descendant plus récent et généralement de meilleure qualité de la même famille, conçu pour lisser les diagonales et les courbes avec moins d’artefacts sur les sprites détaillés. C’est l’algorithme utilisé par les filtres d’agrandissement de nombreuses interfaces d’émulateurs.

Les trois partagent la même limite : ils déduisent les contours de motifs locaux de pixels. Ils fonctionnent donc mieux sur des dessins aux contours nets et volontaires, mais peinent avec le tramage stylisé, le bruit ou les dégradés formés de pixels alternés, techniques courantes dans le pixel art ancien qu’ils peuvent prendre à tort pour des contours à lisser. Pour la plupart des sprites, un agrandissement entier au plus proche voisin est plus sûr et prévisible. Utilisez hqx ou xBRZ seulement si les marches sur les courbes vous gênent visiblement et après avoir vérifié le résultat sur les zones tramées.

Pourquoi les agrandisseurs IA sont généralement le mauvais outil

Les outils d’agrandissement par IA généralistes, entraînés à ajouter des détails photographiques aux photos floues, résolvent le problème inverse de celui du pixel art. Ils apprennent à inventer des détails fins plausibles — texture de peau, trame du tissu, feuillage — à partir d’une image basse résolution, en supposant que la réduction ou la compression a supprimé des détails que le modèle doit reconstituer.

Le pixel art n’a perdu aucun détail. Chaque pixel correspond déjà exactement au choix de l’artiste, à la résolution voulue. Le soumettre à un modèle conçu pour inventer des textures manquantes produit exactement ce qu’on peut attendre : des bords lissés, des dégradés inventés et de petits détails stylistiques (un seul pixel de lumière, une rupture de couleur volontairement nette) effacés ou remplacés par quelque chose de vaguement pictural qui ne ressemble plus à l’original. Certains agrandisseurs proposent désormais un mode « pixel art » ou « anime » plus proche d’un agrandissement au plus proche suivi d’un nettoyage contraint. Ils peuvent mériter un essai au cas par cas, mais le mode général prévu pour les photos risque presque à coup sûr de flouter le pixel art plutôt que de le préserver.

Si le sprite provient à l’origine d’un générateur d’images IA plutôt que d’un véritable dessin en pixel art, il n’a probablement pas de grille de pixels propre, et aucune méthode de redimensionnement ne le corrigera ; consultez notre guide des prompts IA pour sprites pour obtenir d’emblée une source plus propre.

Une liste pratique de vérification

1. Vérifiez une grille pixel art cohérente, non un export matriciel doux.
2. Choisissez un facteur d’échelle entier (2x, 3x, 4x) selon la taille visée, et non l’inverse.
3. Utilisez l’échantillonnage au plus proche / ponctuel, pas le mode bilinéaire ou bicubique par défaut.
4. Appliquer image-rendering: pixelated à tout élément web susceptible de redimensionner encore l’image.
5. Réglez le filtre de texture sur Point/Nearest dans votre moteur de jeu, séparément de l’échelle d’export.
6. N’utilisez hqx/xBRZ que si les marches produites par le plus proche voisin vous gênent visiblement, et vérifiez d’abord le résultat sur les zones tramées.

Pour éviter la configuration manuelle, notre Agrandisseur de pixel art effectue les trois premières étapes : choisissez un facteur entier entre 2x et 32x ; il reproduit chaque pixel source par échantillonnage au plus proche, sans aucun mélange, puis exporte en PNG.

Questions fréquentes