Formats gra­phiques : les formes de stockage les plus im­por­tantes pour les images sur le Web

Depuis le début du Web, les images cons­ti­tuent des éléments es­sen­tiels 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'at­ten­tion des visiteurs. Dans de nombreux cas, les images offrent aux uti­li­sa­teurs une nette valeur ajoutée, et ren­for­cent la valeur du projet en sou­lig­nant le message d'un texte, en cla­ri­fiant le contenu, en four­nis­sant des in­for­ma­tions sup­plé­men­taires (par exemple des gra­phiques d'in­for­ma­tion) 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 di­ver­gences en ce qui concerne les formats d’images utilisés. Les nom­breuses options qui existent font qu'il n'est pas facile pour les ges­tion­naires de sites Web de trouver le bon format pour chaque occasion, en par­ti­cu­lier pour les appareils mobiles.

Malgré leurs in­con­vé­nients en matière de mise à l'échelle, les gra­phiques ma­tri­ciels sont beaucoup plus fré­quem­ment utilisés que les gra­phiques vec­to­riels, ce qui résulte notamment du fait qu'ils sont générés ra­pi­de­ment et con­vien­nent à presque tous les scénarios. Les éléments gra­phiques du site Web peuvent être sau­ve­gar­dés dans des formats de pixels tels que le format PNG ou le format JPG ainsi que des gra­phiques complexes. Cependant, la plus grande force de la re­pré­sen­ta­tion des pixels réside clai­re­ment dans la pré­sen­ta­tion des pho­to­gra­phies, qui jouent un rôle majeur dans la con­cep­tion 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 éven­tuel­le­ment modifiée. En plus des formats gra­phiques déjà men­tion­nés, il existe un grand nombre d'autres formats libres et pro­prié­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 cor­res­pond à diverses méthodes de com­pres­sion d'images. Étant donné que la norme elle-même ne contient aucune dis­po­si­tion sur la façon dont l'image doit être sau­ve­gar­dée, un format sup­plé­men­taire est né­ces­saire, le JPEG File In­ter­change Format ou JFIF s'étant établi en tant que norme de na­vi­ga­tion croisée. Il existe également des al­ter­na­tives moins utilisées : le Still Picture In­ter­change File Format (SPIFF) et le format graphique JPEG Network Graphics (JNG).

La com­pres­sion au format JPG modifie la structure ha­bi­tuelle des images en pixels en combinant 8 x 8 pixels en un seul bloc, et en les con­ver­tis­sant pas à pas dans un réseau. Par exemple, elle produit une con­ver­sion des couleurs de l'espace co­lo­ri­mé­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 com­pres­sion choisi, ce processus est associé à une certaine perte de qualité, car toutes les in­for­ma­tions de l'image ne sont pas con­ser­vées. Selon les sta­tis­tiques de W3Techs, environ trois quarts des sites Web utilisent des images au format JPG, en raison notamment de l'ef­fi­ca­cité de la taille des fichiers associée à la com­pres­sion.

Uti­li­sa­tion con­seil­lée : en­re­gis­tre­ment et pu­bli­ca­tion de photos.

PNG (Portable Network Graphics), un format graphique universel reconnu par le World Wide Web Con­sor­tium (W3C), est apparu pour la première fois en 1996. En tant qu'al­ter­na­tive non brevetée et en même temps plus moderne que GIF (Graphic In­ter­change Format), il offre une com­pres­sion sans perte et une pro­fon­deur de couleur maximale de 24 bits par pixel (16,7 millions de couleurs), avec un canal alpha jusqu’à 32 bits. Cependant, con­trai­re­ment au GIF, PNG ne peut pas créer d'ani­ma­tions.

Le format PNG supporte à la fois la trans­pa­rence et la semi-trans­pa­rence (grâce au canal alpha intégré), ce qui le rend adapté à tous les types d'images, ainsi que l'en­tre­la­ce­ment, ce qui permet de cons­truire le fichier image plus ra­pi­de­ment pendant le processus de char­ge­ment. Les mé­ca­nismes de cor­rec­tion de la couleur et de la lu­mi­no­sité ga­ran­tis­sent que les fichiers image PNG ont à peu près le même aspect sur dif­fé­rents systèmes. Pour com­pres­ser un graphique au format PNG, on peut optimiser des outils tels que pngcrush. En raison du processus de com­pres­sion sans perte, les fichiers sont encore re­la­ti­ve­ment vo­lu­mi­neux, même après coup, ce qui explique pourquoi le format est moins adapté à l'af­fi­chage des photos que JPG. Cependant, il offre la pos­si­bi­lité de réduire l'espace couleur (de 1 à 32 bits par pixel).

Uti­li­sa­tion con­seil­lée : en­re­gis­tre­ment et pu­bli­ca­tion de photos et gra­phiques légers (logos, icônes, dia­grammes, etc.), gra­phiques avec trans­pa­rences et photos sans perte de qualité.

En 1987, le portail en ligne Com­pu­Serve a introduit le format GIF (Graphics In­ter­change Format) comme al­ter­na­tive couleur au format noir et blanc X BitMap (XBM). Con­trai­re­ment à d'autres solutions de l’époque telles que PCX ou MacPaint, les fichiers GIF né­ces­si­taient beaucoup moins d'espace de stockage grâce à la com­pres­sion LZW (com­pres­sion de données avec l'al­go­rithme Lempel-Ziv-Welch), ce qui explique la grande po­pu­la­rité du format aux débuts du Web. En tant que format pour les photos et les gra­phiques, JPG et PNG sont main­te­nant clai­re­ment en avance, en par­ti­cu­lier 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é au­jour­d'hui pour la création de petites ani­ma­tions.

Toutes les in­for­ma­tions 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'af­fi­chage des pho­to­gra­phies. Les in­for­ma­tions in­di­vi­duelles peuvent également être définies comme trans­pa­rentes : con­trai­re­ment au PNG plus moderne, la trans­pa­rence partielle n'est pas possible, de sorte qu'un pixel peut être visible ou invisible.

Uti­li­sa­tion con­seil­lée : création d’ani­ma­tions, de clips ou de logos, pour lesquels il n’est pas né­ces­saire de disposer d’une gamme colorée très profonde.

TIFF (Tagged Image File Format) est un format graphique utilisé en par­ti­cu­lier pour la trans­mis­sion de données d'im­pres­sion et d'images à haute ré­so­lu­tion. Développé en 1986 par Microsoft en coo­pé­ra­tion avec Aldus (qui fait main­te­nant partie d'Adobe), il est par­ti­cu­liè­re­ment optimisé pour intégrer la sé­pa­ra­tion des couleurs et les profils de couleur (profils ICC) des images nu­mé­ri­sées. TIFF est com­pa­tible avec le modèle de couleur CMYK, et permet une pro­fon­deur de couleur allant jusqu'à 16 bits pour chaque canal de couleur (la pro­fon­deur de couleur totale est de 48 bits). Depuis 1992, il est également possible de com­pres­ser le format sans perte en utilisant la com­pres­sion LZW, qui est également utilisée pour le format GIF.

Grâce à ces ca­rac­té­ris­tiques, le TIFF s'est quasiment imposé comme un standard pour les images où la qualité est plus im­por­tante que la taille du fichier. Les éditeurs et les médias imprimés, par exemple, tra­vail­lent avec le format d'image et l'ar­chi­vage de gra­phiques mo­no­chromes, tels que les dessins tech­niques. Pour le stockage et la pré­sen­ta­tion d'in­for­ma­tions géo­gra­phiques ma­tri­cielles (cartes, photos aériennes, etc.), le format GeoTIFF avec des balises sup­plé­men­taires s'est également établi.

Uti­li­sa­tion con­seil­lée : fournir des images de haute qualité et à haute ré­so­lu­tion pour l'im­pres­sion.

Pour le stockage des images créées avec le logiciel Photoshop, le fabricant Adobe propose entre autres le format PSD (Photoshop Document). Il se ca­rac­té­rise par le fait qu'il en­re­gistre toutes les in­for­ma­tions sur les couches, les canaux ou les vecteurs, ce qui permet un trai­te­ment ultérieur. Par exemple, les calques peuvent être ajoutés, dupliqués, cachés, déplacés, supprimés et des éléments in­di­vi­duels peuvent être édités. Plusieurs couches et les données d'image cor­res­pon­dantes peuvent être sau­ve­gar­dées sans perte dans un seul fichier PSD. Le format d'image Adobe est par­ti­cu­liè­re­ment utile pour les gra­phiques à haute valeur de re­con­nais­sance, tels que les logos et bannières et qui doivent être ra­pi­de­ment adaptés aux dif­fé­rentes pla­te­formes et tailles d'af­fi­chage si né­ces­saire.

Par défaut, les images au format PSD ne peuvent être ouvertes qu'avec Adobe Photoshop sans res­tric­tions, et l'échange entre les ap­pli­ca­tions pour les dif­fé­rents systèmes d'ex­ploi­ta­tion Windows ou macOS fonc­tionne sans problème. Dans une certaine mesure, le format graphique est donc com­pa­tible avec tous les systèmes. PSD fonc­tionne prin­ci­pa­le­ment 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é­char­ger sur le serveur, puisque le stockage sans perte des données d'image et de toutes les couches permet un trai­te­ment 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.

Uti­li­sa­tion con­seil­lée : stockage tem­po­raire et post-retouche des gra­phiques et modèles fré­quem­ment utilisés.

Le format BMP (Windows Bitmap), développé pour les systèmes d'ex­ploi­ta­tion 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 gra­phiques en pixels avec une pro­fon­deur de couleur allant jusqu'à 24 bits par pixel. Le format d'image non compressé attribue exac­te­ment une valeur de couleur à chaque pixel, c'est pourquoi les fichiers BMP sont par défaut très vo­lu­mi­neux. Pour cette raison, le format n'est pas adapté à une uti­li­sa­tion sur le Web.

Uti­li­sa­tion con­seil­lée : en­re­gis­tre­ment de photos et de gra­phiques pour une uti­li­sa­tion hors-ligne.

Les gra­phiques vec­to­riels sont par­ti­cu­liè­re­ment adaptés au Web parce qu'ils né­ces­si­tent souvent beaucoup moins d'espace de stockage que les gra­phiques en pixels. Les formats cor­res­pon­dants ne sont pas définis par les com­po­santes de couleur d'un pixel dans l'image, mais par les objets qui composent l'image (surfaces rondes et an­gu­laires, texte, lignes droites et courbes, etc.), ainsi que leur position, di­men­sions, couleurs et autres pro­prié­tés. En com­bi­nai­son avec la mise à l'échelle sans perte, la création d'élé­ments Web res­pon­sifs et ac­ces­sibles devient un jeu d'enfant. Vous pouvez aussi fa­ci­le­ment apporter des mo­di­fi­ca­tions aux fichiers au format vectoriel à tout moment, mais la com­plexité du fichier image augmente très ra­pi­de­ment avec la com­plexité crois­sante. La pos­si­bi­lité de créer des ani­ma­tions avec Ja­vaS­cript est un autre avantage par rapport aux gra­phiques en pixels.

En 1987, Adobe a développé et publié le format graphique vectoriel EPS (En­cap­su­la­ted PostS­cript) en col­la­bo­ra­tion avec les éditeurs Aldus et Altsys. Le nom du format provient du fait que les fichiers res­pec­tifs sont stockés dans le langage de des­crip­tion de page PostS­cript, ce qui permet de traiter des pages complexes sur des im­pri­mantes laser et des flasheurs d'images. PostS­cript décrit les éléments de la page imprimée tels que les lignes, les cercles, les images, et fournit des in­for­ma­tions sur leur position. EPS étend ces pro­prié­tés d'images par des in­for­ma­tions précises sur la taille de l’im­pres­sion, ce qu'on appelle la boîte de dé­li­mi­ta­tion. Les fichiers EPS con­tien­nent, en option, une image de pré­vi­sua­li­sa­tion en basse ré­so­lu­tion, appelée bounding box. Le format graphique d'Adobe conçoit les objets in­di­vi­duels in­dé­pen­dam­ment de l'unité de sortie ul­té­rieure, ce qui permet l'échange entre les dif­fé­rents supports d’im­pres­sion.

Le format EPS a été par­ti­cu­liè­re­ment utilisé dans le secteur de l'im­pres­sion, 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 con­si­dé­ra­ble­ment réduite des fichiers. Cependant, ni l'EPS d’origine ni le PDF moderne ne con­vien­nent comme format d'image pour les projets Web : ils sont plutôt utilisés pour l'échange ou la pré­sen­ta­tion de documents textes.

Uti­li­sa­tion con­seil­lée : im­pres­sion de pages complexes (le format n’existe plus aujourd’hui).

Alors que de nombreux autres formats de gra­phiques vec­to­riels tels que le format AI (Adobe Il­lus­tra­tor Artwork) ne con­vien­nent pas non plus pour une uti­li­sa­tion sur le Web, le format SVG (Scalable Vector Graphics), re­com­mandé par W3C, confirme de façon im­pres­sion­nante les avantages des fichiers d'images vec­to­riels men­tion­nés ci-dessus. La spé­ci­fi­ca­tion de la des­crip­tion de gra­phiques vec­to­riels bi­di­men­sion­nels basés sur le langage XML a été une al­ter­na­tive sérieuse aux gra­phiques ma­tri­ciels tra­di­tion­nels, en par­ti­cu­lier en ce qui concerne les sites Web mobiles et res­pon­sifs, depuis la com­pa­ti­bi­lité HTML5 étendue des na­vi­ga­teurs les plus courants. En plus d’offrir  une évo­lu­ti­vité sans perte et une quantité de données souvent très res­treinte, les fichiers SVG pré­sen­tent plusieurs autres avantages, parmi lesquels :

• Tous les attributs de pré­sen­ta­tion 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 gra­phiques SVG sont lisibles par les robots.
• Le code cor­res­pon­dant est balisé et per­son­na­li­sable en tant que fichier séparé, ou di­rec­te­ment dans le document HTML.
• Le contenu peut être animé de dif­fé­rentes manières (SMIL, Ja­vaS­cript, CSS).

Le format SVG est donc un excellent choix, en par­ti­cu­lier pour les gra­phiques qui con­tien­nent des symboles (par exemple des logos), ou qui doivent réagir à l'entrée des visiteurs du site Web (dia­grammes dy­na­miques). Ce format d'image vec­to­rielle moderne est aussi par­fai­te­ment adapté aux gra­phiques tech­niques. Un regard sur les sta­tis­tiques ci-dessus de W3Techs montre toutefois, que con­trai­re­ment aux images ma­tri­cielles, SVG n'est pas encore utilisé dans la plupart des projets Web. On peut trouver des in­for­ma­tions dé­tail­lées et des lignes di­rec­trices pour l'in­té­gra­tion dans le guide digital.

Uti­li­sa­tion con­seil­lée : gra­phiques in­te­rac­tifs ou tech­niques (logos, boutons, icônes, etc.).