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.
Domaine Internet pas cher
Bien plus qu'un simple domaine !
Personnalisez votre présence en ligne avec un nom de domaine pertinent.
EmailCertificat SSLAssistance 24/7Il existe une variété de formats d'images pour les images et les photos, et leurs applications respectives sont très différentes. Il convient d’abord d'établir une distinction nette entre les graphiques en pixels ou en trame utilisés traditionnellement, et les graphiques vectoriels, moins répandus. Dans le premier cas, l'image globale est composée de nombreux points, les pixels. Plus ces pixels sont petits et nombreux, plus la résolution ou la qualité du fichier image est élevée, et plus la taille du fichier est importante. Cependant, si vous agrandissez ou réduisez un fichier, cette modification est toujours associée à une certaine perte de qualité, puisque les pixels sont toujours visibles.
C'est aussi la plus grande différence des graphiques vectoriels, qui peuvent être réduits ou maximisés de n'importe quelle manière, avec une qualité constante. La raison en est que les images vectorielles ne sont pas composées de pixels individuels, mais que les différentes formes sont représentées à l'aide de vecteurs. Lors de la mise à l'échelle, ces formes, qui ont des spécifications exactes en termes de taille et de longueur, s'adaptent automatiquement aux nouvelles dimensions. Cependant, plus le contenu de l'image est complexe, moins les formats vectoriels sont adaptés : une photo, par exemple, peut être traitée avec des vecteurs, mais les innombrables facettes, effets de lumière et ombres ne s'appliquent que dans un graphique en pixels. Vous pouvez obtenir des informations plus approfondies sur les différences et les similitudes entre les deux types de graphiques dans notre guide comparatif.
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 :
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.).
| JPG | PNG | GIF | SVG |
Modèle de couleurs | RGB, niveaux de gris, CMYK | RGB, niveaux de gris, couleurs indexées | Couleurs indexées | RGB, palette de couleurs SVG |
Nombre de couleurs | Jusqu’à 16,7 millions | Jusqu’à 18 trillions | Jusqu’à 16,7 millions | Jusqu’à 16,7 millions |
Canaux de couleurs | trois | trois (plus un canal alpha) | un | trois (plus un canal alpha) |
Profondeur | 8 bit par canal | 1–16 bit par canal | 1–8 bit | 8 bit par canal |
Compression | Haute, sujette à une perte de qualité | Haute, sans perte | Limitée | Aucune |
Taille de fichier | Très léger | Léger | Gros | individuel |
Animations | Non | Non | Oui | Oui |
Adapté pour | Photos | Petites images et graphiques, comme des logos, sans perte | Animations | Graphiques de toutes sortes (logos, icônes, diagrammes, etc.) |
Le volume de stockage des ordinateurs progresse d’année en année. Toujours plus de giga- ou de téraoctets sont mis à la disposition des utilisateurs. Il est tout de même recommandé de réduire autant que possible le volume de vos données, surtout si vous gérez un site Internet. Les données peu volumineuses induisent des temps de chargement plus courts, des visiteurs plus satisfaits et donc un...
Apple a remplacé JPEG comme format par défaut pour les images sur iOS 11 et macOS High Sierra. Le nouveau format HEIF (High Efficiency Image File Format) permet notamment aux utilisateurs d’économiser de la place et d’améliorer la qualité de leurs photos. Comme d’autres plateformes comme Windows ou Linux ne prennent pas encore en charge le nouveau format, les possibilités d’utilisation du standard...
Les GIF sont extrêmement populaires pour pimenter ses messages sur les réseaux sociaux. Il semble difficile d’imaginer un monde en ligne sans ces animations amusantes au format du même nom. Toutefois, l’extension APNG (Animated Portable Network Graphics) est une alternative qui à certains égards dépasse même le GIF. Qu’y a-t-il exactement derrière ce PNG animé ? Et comment créer des animations...
On rencontre toutes sortes de formats de vidéo sur le Net. Nous allons vous indiquer quels formats de vidéos sont acceptés par les différentes plateformes, et nous verrons quels sont les principaux atouts de chaque format de fichier vidéo. Vous pourrez ainsi retenir la meilleure solution, celle qui vous permettra d’épargner à la fois votre bande passante et votre espace de stockage. Pour un...
JPG ou PNG : cette comparaison répertorie les avantages et les inconvénients de ces deux formats de fichiers. Quel format utiliser dans quelle situation et quelles sont les différences ? Comment les taux de compression affectent-ils la qualité de l’image et la taille du fichier ? Quelles caractéristiques d’image est-il uniquement possible de reproduire avec l’un ou l’autre de ces formats ?
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packs
