Zoom sur les différents formats d’images

Pour tous ceux qui utilisent des images, en particulier les concepteurs et les développeurs, il est crucial de connaître les différents formats d’images.

En effet, il en existe de nombreux et pour différents cas d’utilisation. Mais, connaissez-vous les caractéristiques et les atouts de chacun ?

J’ai voulu en savoir plus sur le sujet et j’ai donc pensé qu’il serait sympa de vous partager mes découvertes en écrivant un article qui détaille les plus connus.

Hop, c’est parti !

Panorama des différents types de formats d’images

Comme on dit, une image vaut mieux que mille mots.

Alors, je vous ai fait une petite compil des types de fichiers d’images que vous risquez de rencontrer.

Tout d’abord, il faut savoir qu’il existe essentiellement deux types de formats d’images différents : les images matricielles et les vectorielles.

Mais aussi, qu’elles diffèrent grandement en termes de taille de fichier et de qualité.

Par conséquent, pensez à choisir le bon type d’image en fonction de votre support de communication (impression ou web) et de l’utilisation que vous souhaitez en faire.

Les formats d’images vectorielles

La création des images vectorielles se fait au travers de logiciels ou de programmes de dessin vectoriel. Ce ne sont, en fait, qu’une accumulation d’équations mathématiques.

Contrairement aux images matricielles, les images vectorielles ne reposent pas sur des pixels. Ce sont des lignes et des formes géométriques qui donnent leur aspect final.

Vous pouvez utiliser ce format pour toutes les créations destinées à l’impression. Pour exemples de supports d’impression, on peut citer : des emballages, des tissus, des documents papier, des affiches (logos grand format, images, textes, dessins, icônes, graphiques numériques, …).

Enfin, leurs avantages indéniables sont qu’elles sont généralement plus légères que les images matricielles et qu’elles peuvent être redimensionnées à l’infini sans perte de qualité.

EPS (Encapsulated Postscript)

Le format d’image EPS est l’ancêtre du PDF. On ne l’utilise plus beaucoup de nos jours. Mais, qui sait, peut-être, le rencontrerez-vous un jour.

Il s’agit, en fait, d’un format universel de fichier d’image vectorielle. Sa fonction est de stocker et de transférer une image ou une illustration d’un logiciel de design à un autre.

La plupart des éditeurs d’images peuvent ouvrir ou créer des fichiers d’illustrations. Je pense ici à Adobe Illustrator, Adobe Photoshop, Adobe Freehand, Corel Draw ou Quark.

Le fichier EPS produit des images en haute résolution avec possibilité de fond transparent. La compression s’effectue sans perte. C’est pourquoi, sa taille peut être modifiée à loisir sans aucune perte de qualité

Pour ces multiples raisons, son utilité première est la création de logos.

⚠️​ Ce n’est pas un format de fichier d’image web standard. En effet, tous les navigateurs actuels ne le supportent pas.

AI (Adobe Illustrator Artwork)

Adobe a développé le format d’image AI pour créer, éditer, sauvegarder et stocker des projets d’images vectorielles dans Adobe Illustrator .

Adobe Illustrator est un logiciel de design graphique qui permet des superpositions de couches vectorielles modifiables. On l’utilise pour créer des images pour le Web, mais aussi pour l’impression en haute qualité.

Petit plus, il permet d’importer un fichier au format matriciel afin de concevoir une illustration à votre goût.

Enfin, le fichier AI est exportable dans d’autres formats, style EPS ou PDF.

L’avantage notable de ce format est de pouvoir redimensionner l’image à volonté sans aucune pixellisation.

Toutefois, attention, il existe également quelques inconvénients :

• Le fichier AI ne peut être ouvert pour édition qu’avec Adobe Illustrator.
• Vous devrez apprendre à maîtriser le logiciel.
• Adobe Illustrator est payant.
• Le fichier créé est de grande taille.
• Le format AI n’est supporté par aucun navigateur.
• Pour l’utiliser sur le Web, il vous faudra le convertir.

SVG (Scalable Vector Graphics)

Le W3C a développé le format d’image SVG (en français « Graphique Vectoriel Adaptable») en 1998. Le problème essentiel est qu’il ne s’utilise qu’avec les navigateurs.

Le SVG produit des images vectorielles bidimensionnelles, très proches des images vectorielles que l’on peut créer dans Adobe Illustrator.

Les designers ou les développeurs plébiscitent le SVG. Ceci est du au fait qu’il est modifiable autant dans Illustrator que dans un éditeur de code comme Brackets, Atom ou dans Gimp ou Inskape.

En effet, le SVG définit un ensemble de graphiques au format XML (eXtensible Markup Language).
De plus, il est possible d’animer chaque élément et attribut des fichiers SVG.

Les développeurs web, quant à eux, aiment beaucoup le SVG pour sa possibilité d’intégrer directement son code dans le HTML5 et de le personnaliser avec du CSS.

En substance, vous pouvez utiliser ce format pour représenter des logos, des icônes, des graphiques, des cartes ou des illustrations.

Mais, de par sa complexité de création, on s’en servira surtout pour créer des images simples. Néanmoins, il supporte les éléments transparents.

Comme pour toute image vectorielle, l’image SVG offre une haute résolution. Sa mise à l’échelle est possible à l’infini, pour tous types d’écrans, et ce, sans aucune perte de qualité, même pour des écrans de type “Retina”.

D’autre part, il s’agit d’un format d’image léger qui se charge rapidement. Autre bon point, il est visualisable dans n’importe quel navigateur (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).

Mais, il y a un bémol, Les principaux inconvénients du SVG sont :

• Le SVG n’est pas un format idéal pour les images ou les dessins complexes.
• Le fichier SVG structuré en XML est compliqué à créer et ne convient qu’à des formes simples.
• Le poids d’un SVG peut augmenter rapidement si l’image contient beaucoup d’éléments.
• Internet Explorer 10 et ses versions antérieures n’affichent pas le SVG correctement.
• Pour pouvoir importer un SVG dans WordPress, il vous faudra contourner l’interdiction d’importation.

PDF (Portable Document Format)

Adobe a créé le format PDF en 1992.

Il s’agit d’un format vectoriel universel. Il permet d’éditer et de sauvegarder des images, textes, graphiques, animations, modélisations 3D, illustrations ou autres.

Petit truc sympa, il peut également inclure des liens, des boutons d’appel à action et d’autres éléments interactifs. Vous pourrez, par conséquent, l’utiliser pour créer une superbe infographie, par exemple.

Son grand avantage est qu’il conserve les polices, les images, la mise en page et les graphiques du document source. De plus, le PDF supporte la compression sans perte de la qualité de l’image.

C’est pour toutes ces raisons que l’on utilise le format PDF, notamment, pour l’impression commerciale ou numérique de haute qualité. Et il convient également pour l’enregistrement des logos vectoriels.

Enfin, les principaux navigateurs et systèmes d’exploitation supportent le PDF.

Les formats d’images matricielles

Les images matricielles sont des « cartes de points » (de l’anglais « Bitmap »).

Elles sont constituées par une matrice de points colorés que l’on désigne par le nom de pixels. Il s’agit, en fait, d’une grille, où une couleur représente chaque case. C’est donc la juxtaposition de cette multitude de points colorés qui forme l’image.

Pour simple info technique, l’unité de mesure de la résolution s’appelle “points par pouce” = DPI ou “pixel par pouce” = ppp.

Lorsque l’image possède peu de pixels, on dit, qu’elle est de faible résolution. Mais, vous pouvez également créer des images de haute résolution en multipliant le nombre de pixels ou en les retouchant. Par contre, cela augmentera, corrélativement, la taille du fichier.

Il est à noter qu’un fichier d’image matricielle a une taille souvent plus élevée que celle d’un fichier d’image vectorielle.

Par contre, il ne faut pas oublier que, contrairement aux images vectorielles, lorsque vous agrandissez, rétrécissez ou compressez l’image, il y a une perte de qualité. En effet, les points de couleurs se déforment, les contours deviennent moins précis et l’image devient floue et déformée. C’est ce qu’on appelle communément “une image pixelisée”… pas vraiment top.

Les images matricielles sont hautes en définition pour les couleurs et la luminosité. Elles sont donc parfaites pour les images sur le web ou sur les réseaux sociaux. Vous pouvez également les utiliser pour des images contenant des photos, des dégradés de couleurs ou des zones d’ombres.

BMP (Bitmap)

Le format d’images BMP (Bitmap) est un format de fichier d’image matricielle obsolète.

Ce format utilise peu ou pas de compression. Il a donc une taille faramineuse sans pour autant avoir une haute qualité Il est, par conséquent, peu pratique à stocker ou à manipuler.

Son seul avantage est que les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari) le supportent.

GIF (Graphics Interchange Format)

Le format GIF date de 1987.

Il s’agit d’un format d’images animées limitées à une profondeur de couleurs de 8 bits (256 couleurs maximum). Malheureusement, cette limitation ne permet pas la restitution des nuances comme les lumières, ombres ou dégradés.

Ce qui le rend intéressant, c’est la possibilité d’opter pour un fond transparent.

Par conséquent, il vaut mieux le destiner à des images dont la palette de couleur est simple. On le réservera donc à des dessins, des petites icônes ou même du texte.

Néanmoins, cette basse résolution présente l’avantage d’obtenir un fichier d’animation de petite taille, qui se charge rapidement sur le web.

De surcroît, il est possible de lui faire subir, en sus, une compression sans perte.

Vous pourrez donc l’incorporer sur votre site web ou dans vos emails pour y ajouter un brin de fantaisie. Pensez également à l’utiliser pour vos bannières publicitaires, vos publications sur les réseaux sociaux. Et, pourquoi pas, dans vos tutoriels et guides.

Pour finir, toutes les versions de navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari) supportent le GIF.

PNG (Portable Network Graphics)

Le format PNG est apparu à l’origine pour remplacer le format GIF qui exigeait un brevet pour sa compression.

Tout comme le GIF, il permet la transparence (contrairement au JPEG), mais il ne permet pas l’animation.

Par contre, il offre une palette de couleurs beaucoup plus large que le GIF, celle-ci pouvant aller jusque 16 millions de couleurs. Pour cela, il suffit d’opter pour du PNG-24 (256 couleurs pour le PNG-8).

Il est donc particulièrement adapté pour le web, et plus précisément pour les logos, icônes, graphiques ou illustrations.

Il est à noter également que le PNG offre une très bonne lisibilité du texte, même après une compression. En effet, cette dernière s’effectue sans perte et maintient les détails et le contraste entre les couleurs.

C’est la raison pour laquelle, il pourra être aussi un bon choix pour les visuels comprenant à la fois des images et du texte. Les exemples d’utilisations possibles sont : les infographies, les bannières, les captures d’écran, les coupons, etc.

Petit couac, tout de même, le PNG génère des fichiers de grande taille. Il est donc long à s’afficher sur les pages web. Par conséquent, évitez de l’utiliser pour sauvegarder des photos de haute définition.

A noter, qu’il ne convient pas non plus à l’impression.

Pour finir, le format PNG a de sérieux avantages, notamment son support par :

• Tous les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• Les principaux systèmes d’exploitation
• Les éditeurs d’images standards

TIFF (Tagged Image File Format)

Le format TIFF, également appelé TIF, est le format de fichier le plus couramment utilisé pour sauvegarder, préparer et imprimer des images, graphiques ou des photographies en haute résolution, par exemple, sur les textiles ou tissus.

De nombreux scanners l’utilisent également en format de sortie afin de préserver la qualité des documents ou des images scannés.

Il s’agit d’un format d’images matricielles de grande taille. Mais, on peut le compresser sans qu’aucune qualité ne soit perdue.

Par contre, ce format ne prend pas en charge la transparence. Il ne permet pas, non plus, vraiment de post-traitement, contrairement au format RAW.

Enfin, il est important de noter qu’il vous faudra convertir le fichier TIFF dans un autre format afin qu’il puisse s’afficher dans les principaux navigateurs.

JPEG ou JPG (Joint Photographic Experts Group)

Tout d’abord, je suppose que vous vous demandez peut-être pourquoi ce fichier possède deux extensions?

Pour la petite histoire, au départ, le Joint Photographic Expert Group (JPEG) devait être enregistré avec l’extension .jpeg. Mais, les anciennes versions de Windows n’autorisaient que les extensions avec un maximum de 3 caractères. Alors, afin que les JPEG soient supportés sous Windows, l’extension a été raccourcie de .jpeg à .jpg. Aujourd’hui, ce raccourci reste d’actualité pour enregistrer ce type de format.

Il faut savoir qu’il s’agit d’un fichier d’image qui ne supporte pas un fond transparent.

Toutefois, les couleurs qui le composent sont un mélange des 3 couleurs primaires : rouge, vert, bleu. Et, chacune de ces couleurs se code sur 8 bits, soit 256 niveaux. Le nombre total de couleurs possibles est, par conséquent, de 16,7 millions. Il s’agit donc d’un format recommandé pour les photographies ou les images dont la palette de couleurs est complexe.

Un autre avantage du fichier JPEG est sa petite taille due à sa capacité de compression. Il prend ainsi très peu de place pour le stockage et est rapidement téléchargeable même en bas débit.

Le format JPEG ou JPG est le type de fichier que l’on retrouve le plus sur le web. On s’en sert surtout pour les images de blog et d’articles ou les images de produits des sites e-commerce.

Vous pouvez aussi l’employer pour l’impression de documents commerciaux lorsqu’il est en haute résolution. Il est également possible de s’en servir pour le partage d’images sur les réseaux sociaux.

Mais, attention, sa compression se fait avec perte. En effet, des compressions ou sauvegardes successives lui font perdre à chaque fois de sa qualité. Vous pouvez donc vous retrouver avec une photo totalement pixelisée ou des textes illisibles, ce qui n’est pas vraiment top.

Alors, un petit conseil, avant de compresser le fichier, pensez à sauvegarder l’original…on ne sait jamais.

C’est pour cette raison que le JPEG ne convient pas aux images avec textes. Ne vous en servez donc pas pour des infographies ou des captures d’écran de tutoriels.

Enfin, il faut bien le reconnaitre, ce format est universel de par son support:

• Depuis la version 1.0 par tous les principaux navigateurs (Chrome, Firefox, Safari, etc.)
• Par toutes les visionneuses d’images
• Par les éditeurs de tous les principaux systèmes d’exploitation

PSD (Photoshop Document)

Le format de fichier PSD est le format natif d’Adobe Photoshop, un logiciel de retouche d’images. Il sert à la sauvegarde et au stockage des projets créés dans Photoshop avant et après leur modification.

Ce type de fichier sert à retoucher vos images aux formats JPEG, PNG, TIFF et à en modifier les couleurs. Il permet de travailler finement sur vos images par calques, c’est-à-dire, par superposition de couches. Il inclut également la possibilité de masques, de filtres, de fusion, etc… et même celle d’y insérer des images vectorielles.

Ce qui est pratique, c’est que les modifications sont réversibles. De plus, le fichier créé possède une qualité d’image sans perte.

Par contre, petit point négatif, il vous faudra effectuer une conversion en JPEG, PNG ou TIFF afin d’obtenir un format de fichier compatible pour l’impression et la diffusion web, ce qui est néanmoins possible directement dans Photoshop.

Après conversion, vous pouvez vous en servir pour partager vos photos et images numériques sur les réseaux sociaux. Son autre utilisation possible est l’impression mais seulement si la résolution est d’au moins 300 pixels/pouce.

Ce format a quand même quelques inconvénients qu’il convient d’énumérer :

• Pas de compression possible
• Fichier lourd
• Format d’image non adapté au web
• Format supporté par aucun navigateur, ni par aucune visionneuse ou éditeur d’images standard

RAW (format d’image brut)

Ce sont essentiellement les photographes qui utilisent le format RAW. Il s’agit, en effet, du format de fichier natif d’un appareil photo ou d’un scanner. Ce fichier contient l’information brute des capteurs avec peu ou pas de compression.

Il sert à la sauvegarde des photos dans la meilleure qualité possible pour la post-production et l’édition. Il permet aux photographes d’effectuer des retouches minutieuses pour parfaire leur œuvre.

Les retouches possibles sont diverses :

• Contraste et niveau de netteté
• Luminosité et tonalité
• Réduction du bruit et saturation des couleurs,…

Contrairement au fichier JPEG qui se décline en 256 nuances par canal de couleur (8 bits), le fichier RAW offre jusqu’à 16.384 nuances par canal de couleur (14 bits). Mais cette haute qualité du RAW va de pair avec sa grande taille. En effet, son poids peut atteindre 20 à 40 Mo.

D’autre part, on ne peut visualiser un fichier RAW directement sur le web, ni via les visionneuses d’images. Il est donc nécessaire d’utiliser un logiciel de rendu, aussi appelé de dématriçage. Ce logiciel pourra le convertir en format d’image RGB (Red-Green-Blue) tels que les formats JPEG, PNG ou TIFF.

Il est à noter que la conversion d’un fichier RAW en JPEG, compressera le fichier et supprimera certaines informations.

Outre les logiciels spécifiques des constructeurs d’appareils photo, voici une liste non exhaustive des logiciels permettant de travailler les fichiers RAW :

WebP

Google a développé le format WebP en 2010.

L’objectif du format WebP est de convertir et de compresser les images. Il peut réduire leur poids de 25 à 35 %, sans pour autant en atténuer la qualité. Son but premier est donc d’accélérer le temps de chargement des pages web.

Sa destination, à terme, est de remplacer les différents formats d’images standards, comme les JPEG, PNG, GIF, TIFF, etc.

De plus, ce nouveau format d’image prend en charge les images animées comme les GIF. Il restitue également la transparence et, de ce fait, les images sous format PNG.

Ce format est donc très prometteur, néanmoins, il subsiste quelques inconvénients. En effet, la plupart des éditeurs d’images ne le prennent toujours pas en charge. Et, tous les navigateurs web ne le supportent pas forcément, non plus.

Autre problème, le CMS WordPress n’autorise toujours pas le chargement des images WebP nativement. Il vous faudra donc recourir à une extension dédiée.

Ce qu’il faut retenir sur les différents formats d’images

En résumé, il faut retenir qu’il existe deux sortes d’images, les vectorielles et les matricielles et que chaque format a ses avantages et ses inconvénients.

Mais aussi que pour le Web, vous utiliserez plus généralement les images matricielles, comme les PNG, JPEG ou GIF qu’il vous faudra, néanmoins, optimiser pour la performance.

Tandis que pour l’impression, vous vous servirez principalement d’images vectorielles.

Avantages et inconvénients des formats d’images matricielles

Avantages et inconvénients des formats d’images vectorielles

Conseils pour les différents formats d’images

J’espère que vous avez trouvé ce petit article sur les différents formats d’images utile.

Toutefois, rappelez-vous que quel que soit le format d’images que vous utilisez sur un site Web, il vous faudra les référencer et également les optimiser.

Et vous, quels formats d’images utilisez-vous le plus ?