Formats graphiques : les formes de stockage les plus importantes pour les images sur le Web

Depuis le début du Web, les images constituent des éléments essentiels dont aucun site ne saurait se passer. Peu importe qu’il s’agisse d'une photo ou d'un graphique, les éléments visuels du site attirent l'attention des visiteurs. Dans de nombreux cas, les images offrent aux utilisateurs une nette valeur ajoutée, et renforcent la valeur du projet en soulignant le message d'un texte, en clarifiant le contenu, en fournissant des informations supplémentaires (par exemple des graphiques d'information) ou en stimulant la réflexion. Bien que tout le monde s’accorde sur l’utilité des visuels, il existe depuis des années des divergences en ce qui concerne les formats d’images utilisés. Les nombreuses options qui existent font qu'il n'est pas facile pour les gestionnaires de sites Web de trouver le bon format pour chaque occasion, en particulier pour les appareils mobiles.

Malgré leurs inconvénients en matière de mise à l'échelle, les graphiques matriciels sont beaucoup plus fréquemment utilisés que les graphiques vectoriels, ce qui résulte notamment du fait qu'ils sont générés rapidement et conviennent à presque tous les scénarios. Les éléments graphiques du site Web peuvent être sauvegardés dans des formats de pixels tels que le format PNG ou le format JPG ainsi que des graphiques complexes. Cependant, la plus grande force de la représentation des pixels réside clairement dans la présentation des photographies, qui jouent un rôle majeur dans la conception moderne des sites Web. De cette façon, n'importe quelle photo peut être numérisée sans problème sous forme de graphique en pixels, et éventuellement modifiée. En plus des formats graphiques déjà mentionnés, il existe un grand nombre d'autres formats libres et propriétaires, dont quelques-uns seulement sont utilisés dans tous les domaines.

Le format JPG ou JPEG est en fait une norme publiée en 1992 (ISO/IEC 10918-1), qui correspond à diverses méthodes de compression d'images. Étant donné que la norme elle-même ne contient aucune disposition sur la façon dont l'image doit être sauvegardée, un format supplémentaire est nécessaire, le JPEG File Interchange Format ou JFIF s'étant établi en tant que norme de navigation croisée. Il existe également des alternatives moins utilisées : le Still Picture Interchange File Format (SPIFF) et le format graphique JPEG Network Graphics (JNG).

La compression au format JPG modifie la structure habituelle des images en pixels en combinant 8 x 8 pixels en un seul bloc, et en les convertissant pas à pas dans un réseau. Par exemple, elle produit une conversion des couleurs de l'espace colorimétrique RVB vers le modèle de couleurs YCbCr au moyen d’un filtre passe-haut, dans lequel les hautes fréquences sont filtrées pour réduire la taille du fichier. Selon le degré de compression choisi, ce processus est associé à une certaine perte de qualité, car toutes les informations de l'image ne sont pas conservées. Selon les statistiques de W3Techs, environ trois quarts des sites Web utilisent des images au format JPG, en raison notamment de l'efficacité de la taille des fichiers associée à la compression.

Utilisation conseillée : enregistrement et publication de photos.

PNG (Portable Network Graphics), un format graphique universel reconnu par le World Wide Web Consortium (W3C), est apparu pour la première fois en 1996. En tant qu'alternative non brevetée et en même temps plus moderne que GIF (Graphic Interchange Format), il offre une compression sans perte et une profondeur de couleur maximale de 24 bits par pixel (16,7 millions de couleurs), avec un canal alpha jusqu’à 32 bits. Cependant, contrairement au GIF, PNG ne peut pas créer d'animations.

Le format PNG supporte à la fois la transparence et la semi-transparence (grâce au canal alpha intégré), ce qui le rend adapté à tous les types d'images, ainsi que l'entrelacement, ce qui permet de construire le fichier image plus rapidement pendant le processus de chargement. Les mécanismes de correction de la couleur et de la luminosité garantissent que les fichiers image PNG ont à peu près le même aspect sur différents systèmes. Pour compresser un graphique au format PNG, on peut optimiser des outils tels que pngcrush. En raison du processus de compression sans perte, les fichiers sont encore relativement volumineux, même après coup, ce qui explique pourquoi le format est moins adapté à l'affichage des photos que JPG. Cependant, il offre la possibilité de réduire l'espace couleur (de 1 à 32 bits par pixel).

Utilisation conseillée : enregistrement et publication de photos et graphiques légers (logos, icônes, diagrammes, etc.), graphiques avec transparences et photos sans perte de qualité.

En 1987, le portail en ligne CompuServe a introduit le format GIF (Graphics Interchange Format) comme alternative couleur au format noir et blanc X BitMap (XBM). Contrairement à d'autres solutions de l’époque telles que PCX ou MacPaint, les fichiers GIF nécessitaient beaucoup moins d'espace de stockage grâce à la compression LZW (compression de données avec l'algorithme Lempel-Ziv-Welch), ce qui explique la grande popularité du format aux débuts du Web. En tant que format pour les photos et les graphiques, JPG et PNG sont maintenant clairement en avance, en particulier depuis la version GIF89a (1989). Par ailleurs, le format peut combiner plusieurs images dans un seul fichier, ce qui explique pourquoi il est encore utilisé aujourd'hui pour la création de petites animations.

Toutes les informations de couleur sont stockées en GIF dans un tableau, la palette de couleurs. Le tableau contient jusqu'à 256 couleurs (8 bits), c'est pourquoi le format d'image lui-même n'est pas adapté à l'affichage des photographies. Les informations individuelles peuvent également être définies comme transparentes : contrairement au PNG plus moderne, la transparence partielle n'est pas possible, de sorte qu'un pixel peut être visible ou invisible.

Utilisation conseillée : création d’animations, de clips ou de logos, pour lesquels il n’est pas nécessaire de disposer d’une gamme colorée très profonde.

TIFF (Tagged Image File Format) est un format graphique utilisé en particulier pour la transmission de données d'impression et d'images à haute résolution. Développé en 1986 par Microsoft en coopération avec Aldus (qui fait maintenant partie d'Adobe), il est particulièrement optimisé pour intégrer la séparation des couleurs et les profils de couleur (profils ICC) des images numérisées. TIFF est compatible avec le modèle de couleur CMYK, et permet une profondeur de couleur allant jusqu'à 16 bits pour chaque canal de couleur (la profondeur de couleur totale est de 48 bits). Depuis 1992, il est également possible de compresser le format sans perte en utilisant la compression LZW, qui est également utilisée pour le format GIF.

Grâce à ces caractéristiques, le TIFF s'est quasiment imposé comme un standard pour les images où la qualité est plus importante que la taille du fichier. Les éditeurs et les médias imprimés, par exemple, travaillent avec le format d'image et l'archivage de graphiques monochromes, tels que les dessins techniques. Pour le stockage et la présentation d'informations géographiques matricielles (cartes, photos aériennes, etc.), le format GeoTIFF avec des balises supplémentaires s'est également établi.

Utilisation conseillée : fournir des images de haute qualité et à haute résolution pour l'impression.

Pour le stockage des images créées avec le logiciel Photoshop, le fabricant Adobe propose entre autres le format PSD (Photoshop Document). Il se caractérise par le fait qu'il enregistre toutes les informations sur les couches, les canaux ou les vecteurs, ce qui permet un traitement ultérieur. Par exemple, les calques peuvent être ajoutés, dupliqués, cachés, déplacés, supprimés et des éléments individuels peuvent être édités. Plusieurs couches et les données d'image correspondantes peuvent être sauvegardées sans perte dans un seul fichier PSD. Le format d'image Adobe est particulièrement utile pour les graphiques à haute valeur de reconnaissance, tels que les logos et bannières et qui doivent être rapidement adaptés aux différentes plateformes et tailles d'affichage si nécessaire.

Par défaut, les images au format PSD ne peuvent être ouvertes qu'avec Adobe Photoshop sans restrictions, et l'échange entre les applications pour les différents systèmes d'exploitation Windows ou macOS fonctionne sans problème. Dans une certaine mesure, le format graphique est donc compatible avec tous les systèmes. PSD fonctionne principalement comme un format de stockage pendant le processus d'édition. Pour l’affichage Web, toutefois, le fichier doit être converti au format PNG ou au format JPG avant de le télécharger sur le serveur, puisque le stockage sans perte des données d'image et de toutes les couches permet un traitement ultérieur efficace, mais implique également une très grande quantité de données. Pour convertir un graphique PSD, un simple outil Web comme Zamzar est suffisant.

Utilisation conseillée : stockage temporaire et post-retouche des graphiques et modèles fréquemment utilisés.

Le format BMP (Windows Bitmap), développé pour les systèmes d'exploitation Microsoft et IB, a été publié pour la première fois en 1990 avec Windows 3.0. Il s’agit d’un format de stockage pour les graphiques en pixels avec une profondeur de couleur allant jusqu'à 24 bits par pixel. Le format d'image non compressé attribue exactement une valeur de couleur à chaque pixel, c'est pourquoi les fichiers BMP sont par défaut très volumineux. Pour cette raison, le format n'est pas adapté à une utilisation sur le Web.

Utilisation conseillée : enregistrement de photos et de graphiques pour une utilisation hors-ligne.

Les graphiques vectoriels sont particulièrement adaptés au Web parce qu'ils nécessitent souvent beaucoup moins d'espace de stockage que les graphiques en pixels. Les formats correspondants ne sont pas définis par les composantes de couleur d'un pixel dans l'image, mais par les objets qui composent l'image (surfaces rondes et angulaires, texte, lignes droites et courbes, etc.), ainsi que leur position, dimensions, couleurs et autres propriétés. En combinaison avec la mise à l'échelle sans perte, la création d'éléments Web responsifs et accessibles devient un jeu d'enfant. Vous pouvez aussi facilement apporter des modifications aux fichiers au format vectoriel à tout moment, mais la complexité du fichier image augmente très rapidement avec la complexité croissante. La possibilité de créer des animations avec JavaScript est un autre avantage par rapport aux graphiques en pixels.

En 1987, Adobe a développé et publié le format graphique vectoriel EPS (Encapsulated PostScript) en collaboration avec les éditeurs Aldus et Altsys. Le nom du format provient du fait que les fichiers respectifs sont stockés dans le langage de description de page PostScript, ce qui permet de traiter des pages complexes sur des imprimantes laser et des flasheurs d'images. PostScript décrit les éléments de la page imprimée tels que les lignes, les cercles, les images, et fournit des informations sur leur position. EPS étend ces propriétés d'images par des informations précises sur la taille de l’impression, ce qu'on appelle la boîte de délimitation. Les fichiers EPS contiennent, en option, une image de prévisualisation en basse résolution, appelée bounding box. Le format graphique d'Adobe conçoit les objets individuels indépendamment de l'unité de sortie ultérieure, ce qui permet l'échange entre les différents supports d’impression.

Le format EPS a été particulièrement utilisé dans le secteur de l'impression, mais a depuis été remplacé par le format PDF (Portable Document Format), qui est également idéal pour l'envoi de courriels, grâce à la taille considérablement réduite des fichiers. Cependant, ni l'EPS d’origine ni le PDF moderne ne conviennent comme format d'image pour les projets Web : ils sont plutôt utilisés pour l'échange ou la présentation de documents textes.

Utilisation conseillée : impression de pages complexes (le format n’existe plus aujourd’hui).

Alors que de nombreux autres formats de graphiques vectoriels tels que le format AI (Adobe Illustrator Artwork) ne conviennent pas non plus pour une utilisation sur le Web, le format SVG (Scalable Vector Graphics), recommandé par W3C, confirme de façon impressionnante les avantages des fichiers d'images vectoriels mentionnés ci-dessus. La spécification de la description de graphiques vectoriels bidimensionnels basés sur le langage XML a été une alternative sérieuse aux graphiques matriciels traditionnels, en particulier en ce qui concerne les sites Web mobiles et responsifs, depuis la compatibilité HTML5 étendue des navigateurs les plus courants. En plus d’offrir  une évolutivité sans perte et une quantité de données souvent très restreinte, les fichiers SVG présentent plusieurs autres avantages, parmi lesquels :

• Tous les attributs de présentation comme les couleurs et les polices peuvent être modifiés avec CSS.
• Les scripts peuvent accéder au contenu via DOM (Document Object Model).
• Les graphiques SVG sont lisibles par les robots.
• Le code correspondant est balisé et personnalisable en tant que fichier séparé, ou directement dans le document HTML.
• Le contenu peut être animé de différentes manières (SMIL, JavaScript, CSS).

Le format SVG est donc un excellent choix, en particulier pour les graphiques qui contiennent des symboles (par exemple des logos), ou qui doivent réagir à l'entrée des visiteurs du site Web (diagrammes dynamiques). Ce format d'image vectorielle moderne est aussi parfaitement adapté aux graphiques techniques. Un regard sur les statistiques ci-dessus de W3Techs montre toutefois, que contrairement aux images matricielles, SVG n'est pas encore utilisé dans la plupart des projets Web. On peut trouver des informations détaillées et des lignes directrices pour l'intégration dans le guide digital.

Utilisation conseillée : graphiques interactifs ou techniques (logos, boutons, icônes, etc.).