Les formats d'images
Sommaire
Voici quelques explications concernant les différents types d’images, leurs dimensions, leurs ratios et leurs formats.
Objectifs#
- Distinguer définition et résolution, et leurs exigences différentes selon le support
- Calculer et conserver un ratio d’aspect lors d’un redimensionnement ou d’un recadrage
- Choisir le bon mode colorimétrique (RVB, CMJN, niveaux de gris) selon la destination
- Identifier les formats d’images matriciels et vectoriels adaptés à chaque usage
Résolution et définition#
La définition d’une image désigne le nombre total de pixels qui la composent, exprimé en largeur x hauteur (ex. 1920 x 1080 pixels). La résolution indique la densité de ces pixels, c’est-à-dire combien de pixels tiennent dans un pouce linéaire (ppp ou dpi).
Ces deux notions sont liées mais distinctes : une image de haute définition imprimée sur une grande surface aura une résolution faible, et donc un rendu flou. C’est pourquoi les usages web et impression n’ont pas les mêmes exigences.
- Web : la résolution DPI est ignorée par les navigateurs, ce qui compte c’est uniquement le nombre de pixels affichés
- Impression : 300 dpi minimum sont nécessaires pour obtenir un résultat net et précis sur le papier
Définition et ratio d’aspect#
Le ratio d’aspect (ou rapport largeur/hauteur) définit la forme d’une image, indépendamment de sa taille réelle. Un écran Full HD (1920 x 1080) et une vignette 160 x 90 ont le même ratio : 16:9.
On calcule ce ratio en divisant les deux dimensions par leur plus grand commun diviseur. Par exemple, 1920 et 1080 sont tous deux divisibles par 120 : 1920 / 120 = 16, 1080 / 120 = 9, ratio 16:9.
Les ratios courants à connaître :
| Ratio | Usage typique |
|---|---|
| 16:9 | Écran HD, vidéo YouTube |
| 4:3 | Ancien téléviseur, photo compacte |
| 1:1 | Post carré (Instagram) |
| 3:2 | Reflex numérique |
| 21:9 | Écran ultravide |
On peut redimensionner une image à n’importe quelle taille, à condition de conserver le même ratio. Une image 1920 x 1080 peut ainsi être réduite en vignette 320 x 180 ou agrandie en 3840 x 2160 (4K), dans les trois cas le ratio reste 16:9 et l’image ne sera pas déformée.
Attention
L’agrandissement d’une image matricielle détériore sa qualité. En étirant les pixels existants sur une surface plus grande, on obtient un effet de flou ou de pixellisation. À l’inverse, une image vectorielle peut être agrandie à l’infini sans perte, car elle est recalculée à chaque affichage.
Recadrage (rogner une photo)#
Recadrer une image consiste à sélectionner une zone rectangulaire de la photo originale pour n’en conserver qu’une portion. Cela permet de changer le ratio d’aspect, de recentrer le sujet ou d’éliminer des éléments indésirables en bord de cadre.
Attention
Rogner une image matricielle réduit sa définition : on supprime des pixels définitivement. Si l’image de départ n’est pas assez grande, le recadrage produira une image de mauvaise qualité, surtout à l’impression.
Modes colorimétriques#
Le mode colorimétrique découle de ce contexte : les écrans émettent de la lumière (synthèse additive RVB), tandis que l’impression dépose des encres (synthèse soustractive CMJN). Un mode colorimétrique définit la façon dont les couleurs sont représentées et stockées dans un fichier. Le choix du mode impacte directement le rendu final, la fidélité des couleurs et la compatibilité avec le support de sortie.
RVB (Rouge Vert Bleu)#
Le mode RVB (ou RGB en anglais) est le mode des écrans. Chaque couleur est obtenue en combinant trois canaux lumineux : rouge, vert et bleu. C’est une synthèse additive, plus on ajoute de lumière, plus on tend vers le blanc. Le noir correspond à l’absence totale de lumière.
- Valeurs par canal : 0 à 255 (8 bits), soit environ 16,7 millions de couleurs combinées
- Utilisé pour : le web, les réseaux sociaux, la vidéo, tout affichage écran
- Format de notation :
rgb(255, 0, 0)pour le rouge pur, ou en hexadécimal#FF0000
Attention
Un fichier créé en mode RVB ne convient pas à l’impression professionnelle. Les couleurs affichées à l’écran peuvent différer significativement de ce qui sort de l’imprimante, car les deux systèmes ne fonctionnent pas de la même façon.
CMJN (Cyan Magenta Jaune Noir)#
Le mode CMJN (ou CMYK en anglais) est le mode de l’impression. Les couleurs sont obtenues en superposant des couches d’encres : cyan, magenta, jaune et noir. C’est une synthèse soustractive, chaque encre absorbe une partie de la lumière réfléchie, et la combinaison des trois couleurs de base tend vers le noir. Le noir est ajouté séparément pour produire des noirs plus profonds et réduire la consommation d’encre.
- Valeurs par canal : 0 à 100% (pourcentage d’encre déposée)
- Utilisé pour : affiches, flyers, cartes de visite, packaging, tout document destiné à l’impression
- Un fichier destiné à l’impression doit être converti en CMJN avant l’envoi au prestataire
Information
Certaines couleurs vives du mode RVB (bleus électriques, verts fluorescents) ne sont pas reproductibles en CMJN. Cette zone de couleurs hors gamut sera automatiquement ajustée lors de la conversion, parfois avec un résultat terne.
Niveaux de gris et comparatif#
Le mode niveaux de gris ne contient qu’un seul canal, représentant l’intensité lumineuse de chaque pixel, du noir (0) au blanc (255). Il est utilisé pour les images monochromes, les documents scannés en noir et blanc ou les illustrations destinées à une impression en une seule encre.
| Mode | Usage | Canaux | Gamme de couleurs |
|---|---|---|---|
| RVB | Écran, web | Rouge, Vert, Bleu | Large (environ 16,7 millions) |
| CMJN | Impression | Cyan, Magenta, Jaune, Noir | Réduite (encres physiques) |
| Niveaux de gris | Noir et blanc | Gris | 256 niveaux |
Les différentes catégories d’images#
Dans le monde du design et du web, bien que les technologies HTML5 et CSS3 permettent de créer des visuels attrayants, l’usage de fichiers images reste essentiel pour enrichir les pages, illustrer des idées avec des schémas ou afficher des photographies. Sur le web, l’objectif est de trouver le juste équilibre entre qualité d’image et légèreté des fichiers, afin d’optimiser à la fois l’affichage et le temps de chargement.
Les images se classent en deux grandes familles.
Les images matricielles se composent d’une grille de pixels, chaque pixel étant défini par une ou plusieurs valeurs spécifiant sa couleur. Elles sont idéales pour les photographies et les visuels détaillés, mais leur agrandissement peut entraîner une perte de qualité. On parle aussi de “bitmap” ou de “raster” pour désigner cette structure en grille.
Les images vectorielles sont basées sur des formules mathématiques décrivant formes et couleurs. Au lieu de stocker une image comme un ensemble de pixels, les données vectorielles décrivent une série d’instructions pour recréer l’image. Cette approche permet aux images vectorielles d’être redimensionnées sans perte de qualité. Elles sont particulièrement adaptées pour les logos, les schémas et tout élément nécessitant une mise à l’échelle fréquente.
Format matriciel#
Les formats matriciels courants et leurs usages principaux.
BMP (BitMaP)#
Format d’image numérique non compressé et riche en couleurs (16 millions de couleurs et plus). Peu utilisé sur le web aujourd’hui, plus courant dans les environnements de bureau. Avantage : qualité d’image élevée sans perte. Inconvénient : taille de fichier importante.
JPEG#
Format d’image compressé optimisé pour les photographies (extension .jpg ou .jpeg). Support universel, très utilisé en photographie numérique et sur le web. Avantage : taille de fichier réduite, idéale pour le web. Inconvénient : perte de qualité lors de la compression.
PNG (Portable Network Graphic)#
Format d’image compressé sans perte, support universel. Utilisé pour les images web avec transparence. Avantage : supporte la transparence, sans perte de qualité. Inconvénient : taille de fichier plus grande que JPEG.
WebP#
Format d’image moderne conçu pour le web, supportant à la fois la transparence et l’animation. Très bonne prise en charge sur les navigateurs modernes, en augmentation constante. Avantage : compression efficace avec et sans perte. Inconvénient : non supporté par tous les navigateurs anciens.
AVIF et JPEG XL#
L’AVIF (AV1 Image File Format) est basé sur le codec vidéo AV1, avec une excellente compression et qualité d’image, transparence et animation supportées, en croissance sur les navigateurs modernes. Le JPEG XL (.jxl) vise à remplacer JPEG avec une meilleure compression et qualité, supporté par Safari, Firefox et Chrome depuis 2024, mais son adoption reste encore limitée hors web.
PSD (PhotoShop Document)#
Format de fichier natif d’Adobe Photoshop pour les images en couches. Très utilisé dans le design graphique et la retouche photo professionnelle. Avantage : prise en charge des calques, textes et autres éléments d’édition. Inconvénient : nécessite Photoshop pour une édition complète, fichiers volumineux.
Formats matriciels de niche ou obsolètes#
Quelques formats plus rares, à connaître sans forcément les utiliser : JPEG 2000 (.jp2, archivage et imagerie médicale, support limité), JPEG-LS (compression sans perte, support très limité), jfif (variante d’échange du JPEG standard), QOI (Quite OK Image, format rapide et expérimental), et OxiPNG (outil d’optimisation de fichiers PNG existants, pas un format distinct). WebPv2 a été abandonné par Google en 2023, PICT et PCD (Photo CD) sont des formats obsolètes issus respectivement d’anciens systèmes Apple et de Kodak, à ne plus utiliser.
Format vectoriel#
SVG (Scalable Vector Graphics)#
Format d’image vectorielle basé sur XML. Très bonne prise en charge, usage courant pour les graphiques web, logos et illustrations. Avantage : redimensionnable sans perte de qualité. Inconvénient : peut être plus complexe à créer et à éditer.
AI, PDF et EPSF#
L’AI (Adobe Illustrator) est le format natif d’Illustrator pour l’illustration professionnelle, nécessitant les logiciels Adobe. Le PDF (Portable Document Format) est un format polyvalent supportant texte, images et éléments vectoriels, à la prise en charge universelle, utilisé aussi bien pour les documents imprimables qu’électroniques. L’EPSF (Encapsulated PostScript File, extension .eps) reste courant en impression professionnelle grâce à sa compatibilité avec de nombreux équipements et logiciels de mise en page.
FLA/SWF#
FLA est le format de fichier source pour Adobe Animate (précédemment Flash), tandis que SWF est le format de fichier publié pour le web. Adobe a officiellement abandonné Flash fin 2020 : ces formats sont en déclin très marqué, remplacés par des technologies web modernes, et ne sont plus pris en charge par les navigateurs actuels.