Quel format d'image utiliser pour les sprites dans un jeu HTML5?

Dans un jeu 2D HTML5, quel est le meilleur format d'image à utiliser et pourquoi? Dois-je utiliser différents formats dans différentes situations? Par exemple, .png pour l'image d'arrière-plan, .jpeg pour les images d'animation et ainsi de suite ...

La partie «pourquoi» est importante pour moi. Il n'a pas vraiment besoin d'être localisé en HTML5, il peut aussi s'agir de conseils généraux.

Le format d'image n'est qu'un moyen d'enregistrer des données brutes de pixels, donc tant que vous utilisez des bitmaps, le format ne fait généralement aucune différence dans l'exécution après l'étape de chargement. Ce qui compte, ce sont les données de pixels fournies à l'API graphique. Il existe trois formats couramment utilisés sur le Web:

.gif Le format GIF (désormais normalement obsolète) est utilisé pour les images de 256 couleurs ou moins, ce qui conduit à une très petite taille. Le GIF est également souvent utilisé pour les animations. Lorsque vous n'utilisez que 256 couleurs ou moins, il s'agit d'un format sans perte, ce qui signifie qu'aucune qualité n'est perdue en termes de compression. Sinon, la variété de couleurs doit être réduite à 256, ce qui entraîne une réduction de la qualité.

.png Le format Portable Network Graphics est, je pense, le format d'image le plus utilisé, car il est livré avec un bon taux de compression tout en étant capable d'enregistrer plus de couleurs que GIF. PNG est également capable de translucidité (ou communément appelé transparence, qui est le mauvais nom car un pixel doit être 100% translucide pour être appelé transparent). Il s'agit également d'un format sans perte et destiné à améliorer et remplacer le GIF en 2006 ( source , premier paragraphe). Je l'utilise personnellement comme type d'image sur les sites Web et dans les jeux.

.jpeg Le format JPEG est couramment utilisé pour les photos et ce genre de choses. Il n'est pas capable de translucidité et ne garantit pas la compression sans perte. Il est courant de spécifier la qualité lors de la compression, ce qui conduit à un compromis entre espace et qualité.

Passons en revue quelques cas d'utilisation:

• Les œuvres d'art ou les œuvres d'art généralement complexes sont bonnes à enregistrer au format JPEG, car elles sont conçues pour ce type d'images.
• Il est préférable d'enregistrer les sprites en PNG, surtout lorsque la variété de couleurs est faible.
• Il est difficile de définir les arrière- plans à enregistrer. La règle générale serait quelque chose comme: S'il s'agit d'une image ou d'un art complexe impliquant une grande variété de couleurs, prenez JPEG, sinon PNG.
• Une icône devrait probablement être une image PNG, même si elle utilise moins de 256 couleurs, car le GIF est, comme indiqué ci-dessus, remplacé par PNG.

Gardez à l'esprit que la consommation de mémoire et les performances de l'API graphique sont généralement égales entre ces formats. Ce qui compte, c'est la taille et la vitesse de chargement (vous pouvez vous plonger dans les algorithmes de ces formats si vous souhaitez estimer le coût de chargement). La consommation de mémoire de toute image à l'état brut est généralement définie par l' width*height*4octet de règle générale pour un format de pixel RGBA, qui est le plus courant.

Juste quelques petites choses à ajouter à la réponse de @ Marco:

.gif est cruellement obsolète. J'éviterais complètement d'utiliser des fichiers .gif autant que possible. Je pense que les gens ne les utilisent que de nos jours à cause des animations dans le navigateur, et les png animés ne sont pas bien pris en charge pour le moment.

Donc, tout ce que vous avez est jpg et png.

• PNG: est sans perte . La seule chose que vous envisagez ici est le taux de compression que vous obtenez. Effectue généralement un bon travail de compression de blocs de couleur unie , mais un mauvais travail de compression de scènes avec beaucoup de variations.

• JPG: fait un travail horrible avec des blocs de couleur unie (à la fois perd des détails et prend plus de place que png) mais un excellent travail avec des images avec beaucoup de variations (bonne compression, perte de qualité d'image presque imperceptible).

Par exemple

4 Mo Megaman, au format PNG:

Cette même image fait 36 Ko en JPG

Et la perte de détails (qui est GRATUITE! Avec la compression jpg)

Donc, ici, avec les blocs solides de l'image couleur, nous perdons des détails et encourons une taille supplémentaire en utilisant JPG . Conclusion: n'utilisez pas jPG pour les images avec de gros blocs de couleur unie.

Maintenant, pensez à une scène haute en couleurs:

1,63 Mo PNG:

Le JPG de 277 k :

pertes approximatives (j'ai utilisé jpg pour télécharger ceci! mais il vous montre les pertes

Donc en somme

• Utilisez PNG pour les images avec des blocs de couleur unie, c'est-à-dire des sprites de style NES .
• Utilisez JPG pour des images avec beaucoup de variations de couleurs. C'est comme n'importe quelle autre image, en particulier les arrière-plans .

Résumons ensuite la question:

Dans un jeu fonctionnant sur sa plate-forme désignée, quelles sont les considérations pour les médias qu'il utilise?

Considération # 1: taille, alias vitesse de chargement

Quelle que soit la plate-forme, le jeu et le type de support, le fait est qu'il doit être replacé dans un contexte de rendu. Sur une plate-forme Web, cela signifie le téléchargement. Sur un environnement de bureau ou une console, cela signifie le chargement à partir d'un support de stockage local. Le chargement de vos médias prend du temps. Les plateformes basées sur le Web peuvent être particulièrement paralysées si de nombreux médias doivent être téléchargés via une connexion lente.

Considération # 2: consommation de mémoire

Lié à, mais différent de la taille. Un morceau de média peut être compressé sur le disque ou dans un paquet ou autre, mais une fois qu'il est chargé en tant que texture ou tampon sonore pour quelque chose, il peut être un peu plus gros. L'appareil sur lequel votre jeu s'exécute n'a pas une quantité infinie de mémoire.

Considération # 3: qualité et style

Les supports sont-ils de qualité suffisante? Cela peut être crucial pour votre jeu et est souvent en contradiction avec la taille. Très souvent, un équilibre est nécessaire entre les deux. Certains jeux ont des graphismes incroyablement simples (minecraft) et sont pourtant très réussis. D'autres ont des graphismes vraiment impressionnants qui occupent des morceaux de mémoire, mais donnent une qualité immersive avec des arrière-plans incroyables. Certains jeux s'en sortent avec des blips et des bloops pour les effets sonores, tandis que d'autres doivent avoir une musique stéréo 41k.

Donc, en fonction de ce qui est le plus important, vous prenez la bonne décision pour votre jeu. La décision est prise par match, pas une taille unique.

En règle générale, vous optez pour la plus petite taille de fichier qui offre toujours une qualité d'image acceptable. De plus, png prend en charge l'alpha, vous n'avez donc pas besoin de traiter des images supplémentaires pour gérer un calque alpha.

Pourquoi / quand utiliser png pour (en général ):

• lorsque vous devez utiliser une couche alpha
• images caricaturales / images de type vectoriel dont vous souhaitez conserver les lignes nettes.
• des images avec de petites quantités de couleurs

PNG est sans perte, mais la profondeur de couleur peut être modifiée.

Utilisez jpg pour les cas restants - images photographiques, peintures, images avec beaucoup de petits détails, couleurs et dégradés. Si vous essayez d'utiliser le PNG pour stocker ces images, vous remarquerez que la taille du fichier est beaucoup plus grande que le jpg.

Des outils comme Adobe Image Ready vous donneront un aperçu de votre image avec la taille du fichier dans une variété de formats et de paramètres de qualité.