Agrandisseur de pixel art
Agrandir sans flou : échelle entière et bloc par pixel
Déposer les sprites ici
ou cliquez pour choisir des fichiers — jusqu’à 20 à la fois
Chaque pixel devient un bloc carré uni. Aucun envoi ni mélange.
Échelle
Uniquement des nombres entiers. Un facteur comme 1.5× donnerait à certains pixels un bloc de 2×2 et à d’autres un bloc de 1×1 : voilà pourquoi un résultat « au plus proche » peut encore sembler incorrect.
Disponible si le fichier est un agrandissement entier d'un original plus petit.
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}Sans cela, le navigateur rend de nouveau le sprite flou chaque fois qu’il le redimensionne pour l’affichage.
Avant de commencer avec Agrandisseur de pixel art
Agrandissez pixel art et sprites avec des facteurs entiers au plus proche pour garder des bords nets plutôt que flous.
Idéal pour
- Agrandir sprites, tuiles, icônes et petites ressources pixel art
- Conserver chaque pixel comme bloc net
- Traitement de jusqu’à 20 sorties PNG à échelle similaire dans un lot
À savoir avant de commencer
- L’outil réplique les pixels existants ; il n’invente pas de détails et n’agrandit pas les photographies
- Les facteurs d’échelle sont des entiers de 2× à 32×
- La sortie est en PNG pour conserver les bords nets et la transparence
Poursuivre le flux
Comment l'utiliser
1. Déposer vos sprites
Jusqu’à vingt fichiers à la fois, décodés dans votre navigateur, jamais téléversés. Chacun est relu pixel par pixel et reçoit un verdict : un vrai Source 1× est prêt à être agrandi ; déjà N× signifie que le fichier reproduit exactement en blocs un original plus petit, et le panneau propose de le restaurer d’abord ; contours adoucis signifie que la palette est beaucoup trop grande pour du pixel art et que les limites ont déjà été mélangées par un redimensionnement antérieur. Le contrôle lit les pixels, sans rien garantir : il indique l’aspect du fichier pour vous laisser décider et ne prétend jamais corriger ce qu’il ne peut pas corriger.
2. Choisir un facteur entier
Choisissez un bouton ou un entier de 2 à 32 ; chaque ligne montre le flux complet avant validation — 32×32 → 8× → 256×256, ou 256×256 → restore to 32×32 → 8× → 256×256 lorsque la restauration est activée. Elle prélève un pixel représentatif par bloc détecté — celui en haut à gauche — puis applique votre facteur à cette image plus petite. Elle n’est disponible que lorsque le fichier a réellement été détecté comme un agrandissement entier. Les navigateurs limitent la taille des canevas : un facteur dépassant environ 16,384 pixels par côté ou 256 mégapixels au total est donc refusé, avec indication du plus grand facteur compatible, plutôt que de fournir silencieusement une image vide.
3. Vérifier l'aperçu puis télécharger
Les panneaux avant et après sont tous deux rendus avec image-rendering: pixelated, afin de montrer le contenu réel du fichier plutôt que le lissage du navigateur. Téléchargez un résultat ou tous les résultats dans un ZIP. La sortie est toujours en PNG : un format avec perte réintroduirait des contours doux et des halos dans une image dont la raison d’être est la netteté des bords. L’extrait CSS du panneau complète le travail : copiez-le dans votre feuille de style pour que le navigateur ne l’annule pas en redimensionnant le sprite à l’affichage.
Pourquoi le facteur d’agrandissement doit être un nombre entier
Le redimensionnement au plus proche voisin signifie que chaque pixel de sortie copie simplement la couleur du pixel source le plus proche. Aucune moyenne n’est calculée : aucune couleur nouvelle n’apparaît et aucun contour ne s’adoucit. Cela ne suffit pas. Le facteur doit aussi être entier, et c’est ce point que beaucoup d’outils gèrent discrètement mal.
À 3×, chaque pixel source devient un carré identique de 3×3. La grille reste uniforme et chaque pixel d’origine occupe exactement la même part de l’image de sortie. À 1.5×, la grille d’échantillonnage ne se divise plus régulièrement : deux pixels sources doivent partager trois pixels de sortie. L’un devient donc un bloc large de 2 pixels, son voisin un bloc large de 1 pixel, en alternance dans toute l’image. Il n’y a toujours aucun mélange : c’est techniquement du plus proche voisin, mais les tailles des pixels sont visiblement incohérentes. Les lignes droites deviennent irrégulières, les diagonales prennent des marches absentes du dessin et le tramage en damier devient des bandes. Cela ressemble à une anomalie vague plutôt qu’à un flou évident, ce qui explique pourquoi elle échappe souvent à la vérification.
En pratique, choisissez la taille cible à rebours. Pour afficher un sprite 48×48 autour de 150 pixels, exportez à 3× (144) ou 4× (192) et laissez le CSS ou la grille absorber la différence ; ne demandez pas exactement 150 à un redimensionneur. C’est aussi pourquoi cet outil prend un facteur plutôt qu’une largeur cible : il n’existe pas de moyen fidèle d’atteindre une taille arbitraire en pixel art, donc il ne le propose pas.
Questions
Peut-il réparer un sprite déjà flou ?
Non, et aucun autre outil ne le peut. Lorsque le redimensionnement bilinéaire ou bicubique a moyenné les couleurs voisines en nouveaux pixels intermédiaires, les limites nettes d’origine ont disparu : l’information sur l’endroit où une couleur finissait et la suivante commençait a été supprimée lors de l’écriture de ces pixels. L’accentuation augmente le contraste des contours sans restaurer la grille de couleurs distinctes, et un agrandisseur par IA invente des détails plausibles au lieu de récupérer les vrais. L’outil signale ce cas comme contours adoucis pour le savoir avant d’y consacrer du temps. La solution est de revenir à la source originale sans flou et de la redimensionner.
Pourquoi uniquement PNG ?
PNG est sans perte : les pixels du fichier sont donc exactement ceux qui ont été calculés. JPG est conçu pour les photographies : il supprime les détails à haute fréquence, et une frontière nette entre deux couleurs uniformes est ce qu’une image peut contenir de plus haute fréquence. Il produit donc des oscillations et des débordements de couleur autour de chaque bord, précisément les artefacts que cet outil cherche à éviter. WebP avec perte présente le même problème, dans une moindre mesure. Proposer l’un ou l’autre reviendrait à proposer un moyen d’annuler le travail réalisé.
Et hqx, xBRZ et scale2x ?
Ces algorithmes examinent les voisins de chaque pixel et tentent de lisser les marches des diagonales et des courbes sans introduire de flou. Ils peuvent donner d’excellents résultats sur des sprites aux contours propres, mais des résultats sensiblement moins bons sur les dessins tramés ou bruités : la reconnaissance de motifs interprète alors le tramage comme des contours et lisse des détails placés intentionnellement par l’artiste. Cet outil ne les implémente pas, car le simple agrandissement entier au plus proche est le choix prévisible à privilégier par défaut. Notre guide d’agrandissement du pixel art explique le rôle réel de chacun et dans quels cas leur utilisation est utile.
Pourquoi mon image paraît-elle floue dans le navigateur après téléchargement ?
Parce que le navigateur l’a redimensionnée à nouveau lors du rendu avec son lissage par défaut. Un conteneur adaptatif, le zoom de page ou un écran haute densité peut déclencher cela, même si le fichier a déjà la taille d’affichage souhaitée. Ajoutez image-rendering: pixelated au <img> ou un élément canvas — l’extrait du panneau de l’outil fait exactement cela — et le navigateur utilise plutôt un échantillonnage au plus proche. Dans un moteur de jeu, le même réglage appartient à la texture : filtrage Point ou Nearest, défini séparément de l’échelle d’exportation.
Cela fonctionne-t-il sur les photos ?
Cela fonctionne, mais le plus proche voisin n’est pas adapté à une photographie. Une photo est l’échantillonnage d’une scène continue : ses dégradés doivent réellement être lisses, et mélanger les échantillons voisins reconstitue quelque chose de proche d’une prise de vue en plus haute résolution. Répliquer chaque pixel en carré net produit au contraire des blocs visibles sans ajouter de détails. Utilisez un redimensionnement classique pour les photos et réservez cet outil aux illustrations dessinées sur une grille de pixels.
Connexe
Les explications complètes — pourquoi le bilinéaire ruine le pixel art, ce que fait le filtrage ponctuel dans Unity et Godot et où interviennent hqx et xBRZ — se trouvent dans comment agrandir du pixel art sans le rendre flou. Si votre illustration arrive en planche, découpez-la d'abord : Découpeur de planches de sprites découpe une planche de sprites en PNG individuels aux bonnes limites ; redimensionner ensuite chaque image maintient toutes les images sur la même grille.