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 :
Payants
- Adobe Photoshop Lightroom
- Phase One Capture One
- On1 Photo Raw
- Affinity Photo
Gratuits
- RawTherapee
- Darktable
- Photopea
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 | Inconvénients | Fichier | Utilisation recommandée |
|
|
| WEB :
|
Avantages et inconvĂ©nients des formats dâimages vectorielles
Avantages | Inconvénients | Fichier | Utilisation recommandée |
|
|
| IMPRESSION :
|
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 ?
Soumettre un commentaire đŹ