Le format compte plus que vous pensez

Vous avez fait un sprite. Bravo. Et maintenant?

Le format d'export décide où et comment ce sprite peut servir. Mal choisi, c'est un agrandissement flou, une transparence perdue, des fichiers gonflés ou un moteur qui refuse net votre asset. Bien choisi, tout marche.

Ce guide couvre les trois formats qui comptent en pixel art. PNG pour le matriciel, SVG pour le vectoriel, sprite sheets pour l'animation. Plus les pièges par moteur qui vous épargneront du débogage.

PNG : le choix par défaut

Si vous hésitez, la réponse est PNG. C'est le standard du pixel art et à peu près tous les moteurs le lisent nativement.

Pourquoi le PNG convient au pixel art :

Compression sans perte : aucune perte de qualité, jamais. Contrairement au JPEG, qui bave sur les bords des pixels
Transparence alpha : transparence par pixel, pour des contours de sprite propres
Prise en charge universelle : Unity, Godot, GameMaker, Phaser, tous les navigateurs, tous les éditeurs d'image
Fichiers légers : les PNG de pixel art sont minuscules, peu de couleurs se compressent bien

Les réglages PNG qui comptent :

Profondeur de couleur. Le 8 bits (256 couleurs) suffit pour la plupart des sprites. Le 32 bits RGBA pour des dégradés alpha lisses, rare en pixel art.

Compression. Au maximum. La compression PNG est sans perte, alors poussez-la à fond. Fichiers plus petits, zéro perte.

Entrelacement. Désactivé. Un PNG entrelacé se charge progressivement dans le navigateur, sans intérêt pour un sprite 32x32.

Le seul piège du PNG : l'agrandissement. Un PNG 16x16 agrandi en 160x160 avec un filtre bilinéaire a l'air d'une bouillie. Affichez toujours le pixel art en plus proche voisin (nearest-neighbor / point). C'est un réglage du moteur, pas du fichier. Le PNG lui-même est correct.

SVG : du pixel art redimensionnable

Le SVG semble contradictoire pour du pixel art. Le pixel art se définit par sa grille. Le SVG, lui, par son indépendance à la résolution. Mais un sprite SVG a ses usages.

Quand le SVG a du sens :

Affichage web : un SVG s'adapte à toute taille d'écran sans flou. Sur un site (icônes, décorations, illustrations), le SVG reste net sur les écrans haute densité sans servir plusieurs résolutions
Impression : pixel art sur des produits dérivés, des affiches ou des cartes d'affaires. Le SVG s'adapte à toute taille physique sans pixelisation (enfin, la voulue reste, l'involontaire n'apparaît pas)
Éléments d'interface : interface de jeu qui suit les réglages de résolution
Archivage : le SVG conserve la grille exacte et se rend à l'identique à toute taille

Quand le SVG n'a pas de sens :

Sprites en jeu pour la plupart des moteurs (ils attendent des textures matricielles)
Sprites animés (l'animation SVG est une autre bête, bien plus complexe)
Pixel art grand ou complexe (le fichier SVG enfle)

Convertir un PNG en SVG

Le convertisseur PNG en SVG gratuit de sprite-ai.art s'en charge. Importez un PNG pixel art et il génère un SVG où chaque pixel devient un rectangle net. Pas de lissage, pas d'interpolation, juste votre grille en vecteur propre.

Un SVG identique à votre PNG à tout niveau de zoom. Agrandissez-le en panneau d'affichage et chaque bord de pixel reste tranchant.

Essayer le convertisseur →

Sous le capot : le convertisseur lit chaque pixel, crée un rectangle vectoriel de la même couleur, puis fusionne les voisins de même couleur en rectangles plus grands pour garder un fichier raisonnable. Un sprite 16x16 à 8 couleurs donne un SVG étonnamment petit.

Sprite sheets : animation et regroupement

Une sprite sheet regroupe plusieurs frames ou sprites dans une image. Au lieu de 12 PNG séparés pour un cycle de marche, vous avez un PNG avec les 12 frames en grille.

Pourquoi les sprite sheets existent

Performance. Charger une image 256x64 va plus vite que 12 images 32x32. Changer de texture coûte cher au GPU. Un atlas de textures, et un seul appel de rendu couvre tous vos sprites.

Organisation. Un fichier par personnage au lieu de dizaines. Plus simple à gérer, à versionner et à passer à l'équipe.

Attente des moteurs. La plupart des moteurs supposent que les sprites arrivent en sheets. Leur système d'animation repose sur des rectangles de frame définis dans une image plus grande.

Dispositions courantes de sprite sheet

Disposition en grille (taille de frame fixe)

La plus simple. Chaque frame occupe le même rectangle (disons 32x32), en rangées et colonnes. La frame 1 est en haut à gauche, la frame 2 juste à côté, et ainsi de suite.

Disposition	Description	Idéale pour
Rangée unique	Toutes les frames sur une bande horizontale	Animations simples (4-8 frames)
Grille	Frames en rangées et colonnes	Personnages complexes à plusieurs animations
Bande verticale	Toutes les frames sur une colonne	Valeur par défaut de certains moteurs

Disposition en atlas (compactée, taille variable)

Des frames de tailles différentes compactées ensemble, avec un fichier JSON ou XML qui situe chaque sprite. Plus économe en espace, mais exige des métadonnées.

Laquelle choisir :

La grille pour vos propres sprites. Simple, lisible, facile à configurer dans tout moteur. L'atlas pour les gros projets à centaines de sprites, où la taille de fichier et la mémoire de texture comptent. Notre créateur de sprite sheets produit l'une ou l'autre.

Exigences par moteur

Chaque moteur a ses opinions sur vos sprites. Voici l'essentiel.

Unity

Format : PNG (recommandé), TGA et PSD fonctionnent aussi
Réglages d'import : Sprite Mode → Multiple (pour les sheets), Pixels Per Unit → l'échelle de votre jeu, Filter Mode → Point (no filter)
Sprite sheets : découpez-les dans le Sprite Editor de Unity. Le découpage en grille pour les frames uniformes, l'automatique pour les atlas compactés
Erreur courante : laisser Filter Mode sur Bilinear. Votre pixel art sera flou

Godot

Format : PNG (recommandé)
Réglages d'import : Repeat: Disabled, Filter: Off (ou Nearest), Compress Mode: Lossless
Sprite sheets : AnimatedSprite2D avec une ressource SpriteFrames. Définissez les régions de frame dans votre sheet
Erreur courante : le filtre de texture par défaut est Linear. Changez-le dans Project Settings → Rendering → Textures → Default Texture Filter → Nearest

GameMaker

Format : PNG
Réglages d'import : les sprites s'importent directement. Réglez le point d'origine (centre, coin supérieur gauche, etc.) par sprite
Sprite sheets : GameMaker importe les bandes nativement. Chargez une bande horizontale et il détecte les frames selon la largeur
Erreur courante : l'option « Separate Texture Page ». Ne l'activez pas pour les petits sprites, elle gaspille de la mémoire de texture GPU

Phaser / jeux web

Format : PNG pour les sprites, SVG pour l'interface
Chargement : this.load.spritesheet('player', 'player.png', { frameWidth: 32, frameHeight: 32 })
Rendu : mettez pixelArt: true dans la config du jeu pour un rendu plus proche voisin partout
Erreur courante : oublier pixelArt: true et obtenir des sprites flous

CSS / affichage web

Format : PNG ou SVG
Propriété clé : image-rendering: pixelated (Chrome/Edge) ou image-rendering: crisp-edges (Firefox)
Agrandissement : des multiples entiers avec les transformations CSS. transform: scale(4) avec transform-origin: top left
Erreur courante : agrandir avec width/height au lieu de transform (certains navigateurs lissent encore)

Choisir le bon format

Usage	PNG	SVG	Sprite sheet
Sprites en jeu	✅	❌	✅
Affichage web	✅	✅	❌
Animation	❌	❌	✅
Redimensionnable sans flou	❌	✅	❌
Pris en charge par tous les moteurs	✅	❌	✅
Fichier léger	✅	⚠️	✅
Impression / produits dérivés	❌	✅	❌
Facile à modifier	✅	❌	⚠️

La plupart des projets ont besoin de PNG individuels pour le développement, de sprite sheets pour les builds de production et de SVG pour le marketing web et l'interface. Ce n'est pas l'un ou l'autre.

Importer et convertir d'un format à l'autre

Vos sprites sont déjà dans le mauvais format? Ou viennent d'un autre outil?

Importer des sprites d'autres éditeurs : l'outil Importer un sprite lit les fichiers de projet Piskel et les formats d'image standard. Utile si vous migrez depuis Piskel ou si un coéquipier vous envoie des assets en formats variés.

Convertir un PNG en SVG : le convertisseur PNG en SVG est fait pour le pixel art. Déposez un PNG, obtenez un SVG propre. Sans compte, sans envoi. Ça tourne dans votre navigateur.

Modifier avant l'export : besoin d'ajuster des couleurs ou de corriger des pixels égarés avant l'export final? L'éditeur de pixel art s'en charge. Ouvrez votre sprite, faites vos changements, exportez dans le format voulu.

Le flux typique :

Créez ou importez votre sprite
Modifiez-le dans l'éditeur de pixel art jusqu'à ce qu'il soit bon
Exportez en PNG pour votre moteur de jeu
Convertissez en SVG si vous en avez aussi besoin pour le web
Assemblez des sprite sheets pour les personnages animés

Taille des fichiers

Les fichiers de pixel art sont petits. Absurdement petits pour aujourd'hui. Mais quand vous livrez des centaines de sprites, ça s'additionne.

Format	Sprite 16x16	Sprite 32x32	Sprite 64x64
PNG (8 couleurs)	~200 octets	~500 octets	~1,5 Ko
PNG (32 couleurs)	~300 octets	~800 octets	~3 Ko
SVG (8 couleurs)	~1 Ko	~3 Ko	~10 Ko
SVG (32 couleurs)	~2 Ko	~8 Ko	~30 Ko

Le PNG est plus petit que le SVG pour du pixel art dans presque tous les cas. La taille d'un SVG grandit avec le nombre de pixels et de couleurs, parce que chaque zone unique devient un élément path. Pour un sprite simple et petit, la différence est négligeable. Pour un sprite grand et complexe, le PNG gagne.

Une sprite sheet se compresse mieux que des fichiers séparés, parce que le PNG exploite les motifs répétés d'une frame à l'autre. Un cycle de marche de 12 frames en une sheet pèse en général 30-40 % de moins que 12 PNG séparés.

Essayez les outils

Assez de théorie. Allez exporter quelque chose :

Convertir un PNG en SVG → : voyez votre pixel art en vecteur redimensionnable
Modifier un sprite → : derniers ajustements avant l'export
Importer d'un autre outil → : récupérez des fichiers Piskel ou des PNG existants
Créateur de sprite sheets → : combinez des images éparses en une sheet compacte
Découpe de sprite sheet → : redécoupez une sheet finie en frames séparées

Pour les flux par moteur, notre comparatif des meilleurs moteurs de jeu pour le pixel art détaille ce que chacun attend de vos assets.

FAQ

Quel est le meilleur format de fichier pour les sprites de jeu?

Le PNG avec transparence, toujours. Sans perte, lu par tous les moteurs, alpha propre. Jamais de JPEG pour un sprite. La compression avec perte détruit les bords nets qui font le pixel art. Le WebP sans perte convient si votre moteur le lit, le WebP avec perte, non.

Quand utiliser le SVG pour du pixel art?

Pour l'interface, le matériel marketing ou les visuels web, là où l'agrandissement infini compte. Pour les sprites en jeu, jamais. Les moteurs rendent le PNG nativement et à la vitesse voulue, le SVG ajoute un coût d'analyse. Le convertisseur PNG en SVG de Sprite AI gère la conversion au besoin.

Quelle est la différence entre un sprite et une sprite sheet?

Un sprite est une image seule (une pose de personnage, une icône d'objet). Une sprite sheet, c'est plusieurs sprites regroupés dans une image, en général toutes les frames d'une animation. Les moteurs chargent et rendent une sprite sheet plus vite que des fichiers séparés. Voyez le créateur de sprite sheets pour en bâtir une, ou la découpe de sprite sheet pour en démonter une.

Faut-il exporter les sprites avec un arrière-plan transparent?

Oui pour les personnages, les objets et tout sprite qui se superpose à autre chose. Le PNG gère la transparence alpha proprement. Pour un décor plein écran, un PNG opaque est un peu plus léger, sans différence fonctionnelle si le sprite couvre tout l'écran.

Quel est le meilleur format d'image pour du pixel art généré par IA?

Le PNG, avec transparence, aux dimensions exactes que votre moteur attend. Sprite AI exporte dans ce format par défaut. Glissez le fichier dans Unity, Godot ou GameMaker et il est prêt.

Formats d'export de sprites : PNG, SVG et sprite sheets