Comment choisir le format d'image le plus adapté ? Quelle résolution utiliser ? Tout dépend de votre support de communication (impression ou web) et de l'utilisation que vous souhaitez en faire.

>> Évaluez gratuitement votre site web et découvrez comment l'améliorer avec  Website Grader.

 

format d'image HubspotSommaire:

Les différents formats d'images et leur utilisation

Quelle résolution d'image ?

Qu'est-ce qu'une image matricielle ?

Qu'est-ce qu'une image vectorielle ?

Voici les extensions qui correspondent à des formats d'image. Nous vous présentons leurs caractéristiques, leurs avantages et inconvénients ainsi que leurs principales utilisations.

1 - Joint Photographic Experts Group (.jpeg ou .jpg)

Format d'image JPEG

Le format d'image .jpeg ou .jpg est le plus courant sur le web. Vous retrouvez, par exemple, dans la version Word du papier à en-tête de votre entreprise. Avec ce format, l'image est codée et compressée. Elle pourra ainsi être décodée et lue par un maximum de logiciels et d'applications.

Ce format est standard et universel. Il peut être lu par n'importe quel outil informatique (tablette, ordinateur, téléphone portable) partout dans le monde.

Il est aussi léger. Il s'agit d'un format compressé, il prend donc très peu de place sur la carte mémoire ou le disque dur. Il est rapidement téléchargeable même en bas débit grâce à sa compression maximale.

En revanche, ce format d'image est connu pour sa compression « avec perte », ce qui signifie que la qualité de l'image diminue à mesure que la taille du fichier diminue. Cette baisse de qualité est irréversible.

Le .jpeg n'est pas un format optimal pour la retouche photographique, car il perd également de sa qualité à chaque enregistrement. Cela impose de ne pas retoucher une image générée. Ce format d'image ne permet pas de régler la balance des couleurs ou les styles d'images qui sont appliqués définitivement.

Utilisation conseillée : Ce format est préconisé lorsque vous voulez, par exemple, prendre une photo et la poster directement sur vos réseaux sociaux. En effet, le fichier a déjà été traité par votre appareil photo et votre image peut être postée sans retouche. Vous pouvez également utiliser ce format lorsque vous souhaitez photographier des sujets mobiles comme des animaux, par exemple, en choisissant le mode rafale de votre appareil.

2 - Portable Network Graphics (.png)

Format d'image PNG

Le format .png est le format d'image graphique idéal pour les documents interactifs comme les pages web, mais il ne convient pas à l'impression. Il ne provoque aucune perte, ce qui signifie que vous pouvez toujours le modifier sans perdre en qualité. Pour autant, il reste un format d'image de faible résolution.

Il est idéal si vous souhaitez stocker différentes versions de votre image, car cela n'altère aucunement sa qualité. Son inconvénient majeur est son poids, qui le rend long à télécharger. Pour exemple, il est au moins 7 fois plus lourd qu'un fichier .jpeg. Il ne permet pas l'animation ni le stockage de plusieurs fichiers dans un seul fichier.

Utilisation conseillée : Ce format d'image peut supporter un très grand nombre de couleurs, jusqu'à 16 millions pour le png-24, par exemple. Il permet également une gestion de la transparence. Il est donc généralement utilisé pour mettre en valeur des logos ou des images. En effet, vous pourrez, grâce au format .png, enregistrer votre image avec plus de couleurs sur un fond transparent, pour un rendu plus net.

3 - Graphics Interchange Format (.gif)

Les .gif sont très courants sous leur forme animée et sont légion sur les pages Tumblr et les bannières publicitaires. Dans leur forme la plus basique, les .gif peuvent compter jusqu'à 256 couleurs dans le spectre RVB.

Logo GIF

Il permet la création d'animations avec plusieurs séquences d'image, qui peuvent également être rendues transparentes pour s'intégrer harmonieusement dans les pages web. Le format .gif est adapté à la majorité des plateformes (réseaux sociaux, sites internet).

Limitées à une profondeur de couleurs de 8 bits (256), les images au format d'image .gif peuvent souvent paraître granuleuses ou trop compressées. Autre inconvénient, ce format d'image ne permet pas la restitution des nuances (lumières, ombres, dégradés).

Utilisation conseillée : Il est essentiellement utilisé pour les images animées. C'est le format idéal si vous souhaitez attirer l'attention de votre audience, car il apporte du relief à vos contenus et permet d'expliquer des concepts de manière plus ludique.

4 - Tagged Image File (.tif)

Format d'image TIFF

Un .tif est un fichier matriciel de grande taille qui peut être compressé ou non et qui ne perd pas en qualité.

Le format .tif est non compressé, ce qui permet de garder une bonne qualité d'impression, peu importe le nombre de fois où la photo sera modifiée.

Utilisation conseillée : Utilisez le format TIF si vous souhaitez travailler avec des images haute qualité. Ce type de fichier est trop lourd pour être envoyé par mail ou sur Internet (il peut atteindre plus de 1 ou 2 Go). N'hésitez pas à utiliser des applications spécialisées dans le transfert de document pour ce type de fichier.

5 - Photoshop Document (.psd)

Format d'image PSD

Les .psd sont des fichiers créés et enregistrés dans Adobe Photoshop, le logiciel de retouche d'images le plus populaire au monde.

Ce type de fichier contient des « couches » qui permettent de modifier l'image beaucoup plus facilement et de manière plus précise. Si vous devez retoucher vos photos ou en corriger la couleur, le format .psd est celui qu'il vous faut. Il est également adapté aux images numériques destinées aux réseaux sociaux : il vous garantit que vos fichiers sont à la bonne taille et optimisés pour le web.

Utilisation conseillée : Les fichiers PSD peuvent être transférés d'un collaborateur à un autre dans le cadre d'un projet créatif commun, par exemple. Il suffit d'ouvrir le PSD pour pouvoir retravailler directement l'image à la source. Toutefois, le plus gros inconvénient du fichier .psd est que Photoshop prend mieux en charge les images matricielles que les images vectorielles. Les fichiers au format .psd sont également très lourds.

6 - Portable Document Format (.pdf)

Format d'image PDF

Le format d'image .pdf a été créé par Adobe pour capturer et réviser les informations enrichies de n'importe quelle application, sur n'importe quel ordinateur, n'importe où.

Si un designer enregistre votre logo vectoriel au format .pdf, vous pourrez le voir sans logiciel de retouche (dès lors que vous aurez téléchargé le logiciel gratuit Acrobat Reader) et il pourra continuer à modifier ce fichier.

Le .pdf peut être ouvert sous n'importe quel système d'exploitation avec la mise en page exacte dans laquelle il a été créé. D'ailleurs, Adobe Acrobat Reader est généralement installé sur votre ordinateur gratuitement.

Ce format permet d'intégrer plusieurs types de contenus : images, textes, graphiques, animations ou encore modélisations 3D. Il peut être comprimé à une taille facile à partager sans modification de la qualité de l'image. Son principal inconvénient est qu'il est impossible de modifier un fichier .pdf gratuitement.

Utilisation conseillée : Le format .pdf est utilisé pour stocker et échanger en toute sécurité des informations sur Internet. Très utilisé dans les entreprises, il peut contenir toutes sortes d'éléments comme des champs de formulaire, des contenus vidéo, des signatures électroniques.

7 - Encapsulated Postscript (.eps)

Format d'image EPS

Un fichier .eps est un fichier vectoriel conçu pour produire des images haute résolution destinées à être imprimées. Presque tous les logiciels de design peuvent en créer.

Avec ce type de fichier universel (à l'instar du .pdf), il est possible d'ouvrir une illustration vectorisée dans pratiquement n'importe quel éditeur de dessin, pas seulement les produits Adobe les plus courants. Cela permet de transférer des fichiers aux designers qui n'utilisent pas les produits Adobe, mais plutôt Corel Draw ou Quark.

Les images en .eps peuvent être agrandies indéfiniment sans perdre en qualité, les contours resteront toujours aussi nets. Ce type de fichier est fiable, car il est « encapsulé ».

Un fichier enregistré au format .eps dans Adobe Illustrator sur un Mac peut être ouvert dans le même programme sur un PC sans problème. Les fichiers .eps sont pris en charge par la plupart des programmes de conception. Cependant, les applications de mise en page ne prennent, la plupart du temps, pas en charge la modification d'un fichier texte.

Utilisation conseillée : Ce format a été beaucoup utilisé par les graphistes, car la taille s'adapte à tous les formats et le fond avec transparence est possible. Cependant, il n'est quasiment plus utilisé et généralement remplacé par le format .pdf.

8 - Adobe Illustrator Document (.ai)

Format d'image AI

Le format d'image .ai est de loin le format préféré des designers et le type de fichier le plus fiable pour les images de tous types de projet, web ou impression.

Adobe Illustrator est la référence de l'industrie pour créer des illustrations à partir de zéro. Illustrator produit des images vectorielles, le type de fichiers le plus facile à manipuler. Il peut également créer tous les types de fichiers déjà mentionnés. C'est le meilleur outil de l'arsenal des designers.

Le format vectoriel d'Illustrator s'adapte à n'importe quelle taille ou résolution d'image sans produire d'effet de pixellisation, le fichier reste net à l'impression. Il présente cependant quelques inconvénients. En effet, il est nécessaire d'apprendre à utiliser Adobe Illustrator avant de pouvoir s'en servir. De plus, Adobe Illustrator est payant.

Utilisation conseillée : A l'instar du .psd, le fichier .ai peut être conservé pour réouvrir des projets à une date ultérieure, ou transféré à des collaborateurs souhaitant accéder au fichier source d'une image pour la retravailler.

9 - Adobe InDesign Document (.indd)

Format d'image INDD
Les fichiers .indd sont créés et enregistrés dans Adobe InDesign.

Grâce à InDesign, vous pouvez insérer des images et les positionner comme vous le souhaitez, à la dimension désirée. Il permet également de façonner et de placer les boîtes de texte de la manière voulue.

Le partage de documents avec l'extension .indd peut se faire sans crainte de voir leurs formats et leurs alignements modifiés. Il est aussi possible de créer des canevas et de prédéfinir des styles de police et de paragraphe, ce qui permet de gagner du temps si vous utilisez toujours le même format d'image pour vos documents.

Lui aussi produit par Adobe, les inconvénients de InDesing sont les mêmes que ceux d'Illustrator, à savoir qu'il est payant et qu'il faut un temps d'adaptation avant de pouvoir s'en servir vraiment.

Utilisation conseillée : Ce logiciel est généralement utilisé pour créer des publications plus importantes, telles que des journaux, des magazines et des e-books, combinant du texte, des illustrations vectorielles et des images. Les fichiers Adobe Photoshop et Illustrator peuvent être combinés dans InDesign pour produire des fichiers riches en contenu intégrant une typographie avancée, des graphiques, du contenu, des informations de formatage et d'autres options de mise en forme sophistiquées.

10 - Scalable Vector Graphics (.svg)

Format d'image SVGLe .svg est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur le XML. Le .svg est utilisé pour créer des icônes pour les sites web. L'image est agrandie et compressée sans perte de qualité d'image et n'apparaît pas floue sur les appareils ayant une densité de pixels élevée. Les éléments image .svg sont de petite taille et occupent donc moins d'espace que les images créées en format raster.

Ce format d'image vectorielle permet de redimensionner une image sans aucune perte de qualité contrairement à une image .jpeg ou .png. Des formes géométriques de base sont déjà créées comme les rectangles ou les ellipses afin de rendre votre tâche plus simple. Le contenu .svg peut être visualisé dans n'importe quel navigateur (Chrome, Firefox, Safari).

En revanche, le code .svg, structuré en XML est compliqué à créer. Les structures de balisage sont très complexes, la production de codes volumineux et la résolution d'erreurs difficile. Vous devrez également effectuer des tests importants dans les différents navigateurs pour vous assurer que votre image .svg apparaît correctement.

Utilisation conseillée : Préférez le format d'image .svg dans le cas d'une image simple comme un logo ou d'une icone que vous souhaitez utiliser pour votre site. La performance est généralement meilleure, dans ces cas précis, que les autres formats d'image. Toutefois, évitez .svg dans le cas d'images plus complexes.

Quelle résolution d'image ?

Si vous entendez un designer parler de ppp, sachez que cela signifie « pixel par pouce ». Cette unité de mesure est essentielle pour déterminer si la densité des pixels d'une image numérique est adaptée à son application. Les points par pouce, ou dpi, sont plus généralement utilisés pour l'impression.

La première chose à prendre en compte pour déterminer le nombre de ppp nécessaires pour votre image est ce que vous allez en faire, l'imprimer sur papier ou l'afficher en ligne.

Les logiciels comme Photoshop vous permettront de faire beaucoup de choses, mais pas d'augmenter artificiellement le nombre de pixels. Si vous téléchargez une image sur le web et essayez de l'adapter aux dimensions de votre projet d'impression, l'image sera pixelisée et déformée.

Que sont les langages CSS et HTML ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

Résolution d'une photo web

La résolution d'affichage pour une photo à destination du web est en général de 72 ppp. Cependant, aujourd'hui, les supports sur lesquels votre image peut être affichée peuvent varier de 60 ppp à plus de 500 ppp sur certains smartphones. Soyez donc avant tout vigilant à la taille en pixels de votre photo et à la résolution de votre écran.

Résolution d'une photo à imprimer

La résolution d'une photo à imprimer est très importante, car elle influence l'aspect visuel de votre image. Si vous prenez une même image (c'est-à-dire avec les mêmes dimensions en pixels) et que vous augmentez sa résolution, les points qui la composent seront plus serrés et elle sera imprimée en petit format.

À l'inverse, plus la résolution sera basse, plus les points qui constituent l'image prendront de la place et plus l'image imprimée sera grande. Une image de 3 000 x 2 000 pixels imprimée à 300 ppp, par exemple, donnera une impression A4 de bonne qualité. En revanche, vous ne pourrez pas combler un manque de pixels en augmentant le nombre de ppp : vous obtiendriez alors une image de bonne qualité certes, mais de la taille d'un timbre-poste.

Il peut être compliqué de différencier un fichier .tif d'un .pdf ou d'un .psd. sans connaissances en infographie et la diversité des formats d'image peut être déroutante, mais ils suivent toutefois une certaine logique.

Pour aller plus loin, utilisez cet outil gratuit et évaluez votre site web en quelques secondes pour obtenir des conseils gratuits pour l'améliorer.Website Grader

 Website Grader

Publication originale le Apr 11, 2022 9:46:36 AM, mise à jour le 23 juin 2022

Sujet(s):

Web design