Il existe tellement de formats d’image que cela peut vite devenir compliqué ! Comment choisir entre .jpg, .bmp, .tiff, .gif, .raw ou .png ? Quel type de fichier est le plus approprié pour les images de votre projet ? Voici quelques conseils pour vous aider à choisir.

Les formats d’image pour une diffusion sur le web

Les trois formats de fichier d’image les plus couramment utilisés pour la diffusion web sont les suivants : .jpg (ou jpeg), .png et .gif. Ces formats sont compatibles avec la plupart des navigateurs web, car ils sont compressés et ont donc tendance à être plus petits, ce qui les rend parfaits pour une diffusion sur le web.

Alors, quelle est la différence entre ces formats ? Sans entrer dans des considérations trop techniques, disons que les différences les plus facilement identifiables sont liées à la compression et à la qualité.

La compression

Quand on parle de compression, il y a deux termes que l’on entend souvent : « avec perte » et « sans perte »… mais qu’est-ce que cela signifie ? 

La compression avec perte signifie que lors de la compression du fichier, certaines des données d’origine (généralement redondantes et indétectables) sont définitivement supprimées afin de réduire considérablement la taille du fichier, ce qui est le cas pour les fichiers .jpg et .gif. Selon le contenu de l’image et le degré de compression de l’image, celle-ci peut être plus ou moins perceptible.

On parle de compression sans perte lorsque la taille du fichier est réduite sans supprimer aucune des données d’origine, comme dans les fichiers .png. Cela signifie que les images compressées ont l’air identiques, dans presque tous les cas.

La qualité

De nombreux critères différents déterminent la qualité de l’image. Pour les besoins de cet article, nous allons nous en tenir à celui qui est le plus visible à l’œil nu : la couleur.

En ce qui concerne la qualité des couleurs, les formats de fichier .jpg et .png ont des années d’avance sur les .gif, car ils prennent en charge des millions de couleurs, tandis que les .gif ne prennent en charge qu’un maximum de 256 couleurs.

Autres critères

Les autres critères à prendre en compte lors du choix du format de fichier sont les suivants : 

• Transparence : par exemple, si vous souhaitez placer un personnage par-dessus une image d’arrière-plan, vous utiliserez un fichier .png, car les formats .jpg et .gif ne prennent pas en charge la transparence.
• Animations en boucle : récemment, après 10 ans d’absence, les animations en boucle sont revenues à la mode. Si vous souhaitez en inclure dans votre module, vous devrez utiliser des fichiers .gif, car c’est le seul de ces trois formats qui prend en charge ce genre d’animations.

Quel format utiliser et quand ?

Alors, comment décidez-vous quel format de fichier utiliser pour quelle image ? Utilisez ce récapitulatif pour comprendre les avantages et les inconvénients des trois formats de fichier.

.jpg : idéal pour la compression de photos volumineuses avec de nombreuses couleurs afin d’obtenir une taille de fichier réduite. Pas idéal pour la typographie ou pour des images avec des lignes ou des angles précis, car ils ont tendance à devenir flous.

• Une compression avec perte (certaines des données d’origine sont supprimées pour réduire la taille)
• Le taux de compression peut être choisi en fonction des besoins
• Des millions de couleurs
• Une taille de fichier réduite
• Peut être entrelacé pour permettre un chargement progressif

.png : idéal pour les photos lorsque la taille du fichier pose moins de problèmes ou lorsque vous avez besoin de transparence.

• Une compression sans perte (aucune des données d’origine n’est supprimée pendant la compression)
• Des millions de couleurs
• La taille du fichier n’est pas aussi petite qu’en .jpg
• Prend en charge la transparence de n’importe quelle quantité de couleurs

.gif : peut être utilisé pour de petites icônes, des diagrammes simples ou des graphiques avec peu de couleurs, mais ce format est principalement utilisé pour des animations en boucle.

• Une compression sans perte (aucune des données d’origine n’est supprimée pendant la compression)
• Une gamme de couleurs limitée (256 max)
• Peut être animé
• Peut être entrelacé pour permettre un chargement progressif
• Prend en charge la transparence simple binaire (une seule couleur peut être transparente)

Et pour plus de conseils sur la conception graphique, consultez ces articles : 

• Comment choisir les visuels pour votre module e-learning
• Comment choisir le style graphique de mon module e-learning
• Comment trouver les ressources graphiques pour votre module

Alors, lorsque vous choisissez les images de votre prochain module, souvenez-vous de ces conseils ! 

Et n’oubliez pas de nous suivre sur Twitter et de vous abonner au blog pour obtenir plus de conseils utiles sur tout ce qui concerne le e-learning.