Les différents formats d'images et leurs particularités

Tous les tutos ne concernant ni le SC ni les animations se trouvent ici.

Modérateurs : SM58, Purple Sea, El Señor Toulou

Répondre
Avatar du membre
FYNMORPH X
Accro du clavier
Accro du clavier
Messages : 3776
Enregistré le : 12 déc. 2009, 19:57
Logiciel 1 : Photoshop
Logiciel 2 : Gimp
Localisation : Dans les champs de riz
Contact :

Les différents formats d'images et leurs particularités

Message par FYNMORPH X » 24 mars 2015, 17:18

Ce tutoriel a été originellement posté par Bigou, un ancien membre (paix à son âme). J'ai jugé bon de le reposter et adapter car je le trouve pertinent.

Bonsoir, cher(e)s élèves.
Ensemble nous allons voir les formats d'images les plus répandus ou utiles, et voir quels sont leurs utilités.

Mais avant de commencer, je doit vous apprendre que sur ordinateur il existe deux type d'images : "matriciel" (ou "bitmap") et "vectoriel".
  • images Bitmaps : Le type d'image le plus rependue. En matriciel les images sont composé de pixels.
  • images Vectorielles : Plus rare et inutile pour les photos ou les sprite-comics, le vectoriel n'est pourtant pas dénué d'intérêt. Il permet de définir une image à l'aide de points, droites, segments et courbes. En théorie, on peut donc zoomer à l'infini sur une image vectorielle sans le moindre souci.
Bien souvent un format d'image Bitmap, comme un format de fichier audio, inclut une compression. Et comme dans les fichiers audio, cette compression peut être avec ou sans pertes. Si les 2 approches existent, c'est parce que chaque une à ses avantages et inconvénients.


1- Les formats vectoriels

Scalable Vector Graphics (SVG) : Seul format d'image vectoriel libre. Il se base sur XML pour définir ses segments et courbes ainsi que leurs couleurs. Bien que SVG soit surtout utilisé pour des images fixes, il est possible de s'en servir pour des animations, il n'arrive cependant pas à la cheville de flash.


2- Les formats matriciels (ou Bitmaps)

BMP : Fut le premier format d'image connus et répandus. Il est du type Bitmap et n'inclut pas de compression. Préférez-lui le PNG.

JPEG (JPG) : Format de compression avec pertes. Idéal pour les photos, mais à éviter pour les sprites-comics et le pixel-art en général.

Graphics Interchange Format (GIF) : Fut le premier format d'image à compression sans pertes, il gère aussi les animations. Il est hélas très limité, car limité à 8bits (c'est-à-dire 256 couleurs). Son support quasi-universel en fait malgré tout un format idéal pour de petites animations Bitmaps. Il peut également gérer les pixels transparents (cela sera considéré comme une couleur à part entière).

Portable Network Graphics (PNG) : Format de compression sans pertes. Idéal pour les sprites-comics et le pixel-art en général, mais à éviter pour les photos. Contrairement au BMP il gère les pixels transparents et semi-transparents.
Dans le cas d'images fixes, préférez-le à GIF.

JPEG 2000 (JP2 ou J2K) : Petit frère du JPEG, il a globalement les même avantages et utilité, bien qu'il apporte quelques plus non négligeable. Hélas, très peux de logiciels et appareils le supportent.

Animated Portable Network Graphics (PNG ou APNG) : Plus communément appelé APNG. Il s'agit d'un format d'animations Bitmap reprenant ce qui a fait le succès du GIF en y ajoutant les avantages du PNG. Il y a déjà de nombreux navigateurs le supportant (Firefox par défaut, Google Chrome néanmoins a besoin d'une Extension). De plus, dans les logiciels n'ayant qu'un support classique de PNG, vous verrez tout de même un PNG fixe la où devrait se trouver votre animation.
Malgré tout, si 8bits suffisent, préférez-lui le GIF animé.

Multiple-image Network Graphics (MNG) : Plus communément appelé MNG. Il s'agit d'un format d'animations Bitmap proposant des possibilité comparables à celles de Flash, le rend très complexe. Même avec une extension fichier en .png, un fichier MNG ne peut pas du tout être affiché dans un navigateur n'ayant qu'un support classique de PNG.

3- Pour le Sprite Comic
Voyons voir ce que les formats bitmap les plus populaires (png, jpeg, gif et bitmap) peuvent donner sur deux cases de Sprite comic (de Limonde et Hiro Shinji respectivement):
Image
En PNG, les cases sont complètement fidèles à la qualité originale et la transparence est gérée. De plus l'image reste relativement légère (63Ko).

Image

En GIF, à la place des aplats de couleur, on voit des motifs qui se forment, c'est parce qu'il y a un nombre de couleurs limité, donc pour les simuler les couleurs qui restent, il fait des mélanges. Y a un certain esthétique mais l'image est bien différente. On voit néanmoins que la transparence a été gardé.

Image

En JPG, l'image gagne un aspect sale et flou, particulièrement voyant sur la case de droite car plus simple. La transparence a été perdue.

Image

En BMP, la qualité est restée aussi bonne que originalement, par contre la transparence a été perdue, et le poids de l'image a quasiment été multiplié par 10 (543Ko), à éviter sur de grosse planches.

C'est tout pour ce soir, en espérant vous avoir été utile. Si vous avez des question n'hésitez pas à les poser.
ImageImage


Répondre