Choisir les bons types de fichiers d’images peut sembler une décision triviale.
Mais les êtres humains sont des créatures visuelles, et les images font partie intégrante de l’expérience en ligne.
La plupart des pages et des articles utilisent des captures d’écran et des images pour enrichir le contenu textuel. En fait, seuls environ 8 % des sites web ne comportent aucun contenu visuel.
Malheureusement, de nombreux propriétaires de sites web ne comprennent toujours pas quels types de fichiers d’images choisir pour les différents cas d’utilisation. Le résultat ? Ils finissent par ralentir la vitesse de chargement de leur site parce que leurs images ne sont pas au meilleur format disponible, ni optimisées.
Dans cet article, nous aborderons les principales extensions de fichiers d’images et les moments où vous devez les utiliser pour offrir la meilleure expérience possible à vos visiteurs.
Quels sont les différents types de fichiers d’images ?
Les types et formats de fichiers d’images sont divisés en deux grandes catégories différentes : les fichiers d’images matricielles et les fichiers d’images vectorielles.
Examinons de plus près chaque catégorie.
Formats des fichiers d’images matricielles
Les formats d’image les plus courants pour le web (JPEG, GIF et PNG) sont tous dans la catégorie des images matricielles.
Les types de fichiers d’images matricielles affichent des images statiques où chaque pixel a une couleur, une position et une proportion définies en fonction de leur résolution (par exemple 1280×720).
Comme elles sont statiques, vous ne pouvez pas redimensionner efficacement les images, le dessin et les pixels originaux seront simplement étirés pour remplir l’espace supplémentaire. Cela finit par créer une image floue, pixelisée ou déformée.
La grande majorité des photographies ou images que vous voyez sur Internet utilisent un format d’image matricielle.
Formats des fichiers d’images vectorielles
SVG, EPS, AI et PDF sont des exemples de types de fichiers d’images vectorielles.
Contrairement aux formats de fichiers d’images matricielles statiques, où chaque forme et couleur du design est liée à un pixel, ces formats sont plus flexibles.
Les graphiques vectoriels utilisent au contraire un système de lignes et de courbes sur un plan cartésien, mis à l’échelle par rapport à la surface totale, et non par rapport à un seul pixel.
Cela signifie que vous pouvez agrandir à l’infini la résolution de l’image originale sans perte de qualité ni distorsion.
Comme vous pouvez le constater, la différence de qualité lorsque l’image est agrandie 7x est tout à fait incomparable.
Comme le SVG calcule les positions en fonction d’un pourcentage de la surface totale, et non de pixels, il n’y a pas de pixellisation du tout.
15 types de fichiers d’images les plus populaires
Ci-dessous, nous couvrons tous les principaux formats de fichiers graphiques, des images web matricielles aux vectorielles, en passant par les fichiers des logiciels de retouche d’images.
Nous faisons une étude approfondie et nous couvrons les avantages et les inconvénients, le support du navigateur et du système d’exploitation, et les cas d’utilisation idéaux pour chaque format.
1.JPEG (et JPG) — Joint Photographic Experts Group
JPEG (ou JPG) est un format de fichier d’images matricielles avec une compression avec perte qui le rend adapté au partage d’images. Les JPEG sont « avec perte », ce qui signifie qu’ils réduisent la taille des fichiers, mais aussi la qualité des images lorsque vous utilisez le format.
Le JPEG reste l’un des types de fichiers d’image les plus utilisés sur Internet en raison de sa compression et de la prise en charge quasi universelle par les navigateurs et les systèmes d’exploitation.
La plupart des plateformes de réseaux sociaux (comme Facebook et Instagram) transforment automatiquement les fichiers d’images téléversés en JPEG. Elles utilisent également des tailles d’image uniques pour les réseaux sociaux afin de contrôler la résolution de vos photos.
Avantages et inconvénients
- Support universel du navigateur et du système d’exploitation.
- Taille de fichier assez faible.
- Une compression d’image avec perte peut entraîner une mauvaise lisibilité du texte.
Support des navigateurs et des systèmes d’exploitation
- Supporté depuis la version 1.0 de tous les principaux navigateurs (Chrome, Firefox, Safari, etc.)
- Supporté par défaut par tous les visionneurs d’images et les éditeurs de tous les principaux systèmes d’exploitation.
Cas d’utilisation
- Un bon choix pour les images de blog et d’articles, comme les portraits des personnes interrogées, les images de produits, et plus encore.
- N’utilisez pas de JPEG pour les infographies comportant beaucoup de petits textes ou les captures d’écran de tutoriels où le texte est essentiel.
2. PNG — Portable Network Graphics
Le PNG est un format graphique matriciel qui supporte la compression sans perte, en maintenant les détails et le contraste entre les couleurs.
En particulier, le PNG offre une bien meilleure lisibilité du texte que le JPEG.
Cela fait du PNG un choix plus populaire pour les infographies, les bannières, les captures d’écran et autres graphiques qui comprennent à la fois des images et du texte.
Avantages et inconvénients
- Images de meilleure qualité (sans perte) et texte clairement visible.
- Les fichiers de grande taille peuvent ralentir votre site web s’ils sont trop utilisés (en particulier les images de haute définition).
Support des navigateurs et des systèmes d’exploitation
- Supporté par tous les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Supporté par tous les principaux systèmes d’exploitation et leurs éditeurs d’images standard.
Cas d’utilisation
- Un bon choix pour les infographies, les bannières, les graphiques de blog, les captures d’écran, les coupons et autres visuels comprenant du texte.
- Ne pas utiliser pour des photos de haute définition, car cela créerait de gros fichiers pouvant atteindre plusieurs mégaoctets.
3. GIF — Graphics Interchange Format
Le GIF est un autre type de fichier image relevant du format matriciel. Il utilise une compression sans perte mais « contraint » l’image à 8 bits par pixel et une palette limitée à 256 couleurs.
Le format GIF est le plus connu (et le plus utilisé) pour les images animées car sa limitation à 8 bits permet de conserver des fichiers d’animations de petite taille et faciles à utiliser sur Internet.
Avantages et inconvénients
- Faible taille de fichier.
- Support de l’animation.
- La limitation à 8 bits entraîne une qualité d’image limitée.
Support des navigateurs et des systèmes d’exploitation
- Supporté par tous les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Supporté par tous les principaux systèmes d’exploitation et leurs éditeurs d’images standard.
Cas d’utilisation
- Utilisez les GIF animés non seulement pour « pimenter le contenu », mais aussi pour montrer comment accomplir des tâches dans des tutoriels et des guides.
- Ne l’utilisez pas si vous avez besoin d’images en couleur de plus de 8 bits (le JPEG supporte jusqu’à 24 bits).
4. WebP
WebP est un format d’image développé spécifiquement pour permettre une meilleure compression des images sans perte et avec perte.
Le passage du format JPEG et PNG au format WebP peut permettre d’économiser de l’espace disque sur le serveur et une bande passante importante, avec des fichiers d’images jusqu’à 35 % plus petits pour une qualité identique.
Avantages et inconvénients
- Des fichiers plus petits pour une qualité d’image identique ou supérieure.
- Non supporté par tous les navigateurs et éditeurs d’images.
Support des navigateurs et des systèmes d’exploitation
- Google Chrome (version 17+ pour les ordinateurs, 25+ pour les mobiles), Firefox (65+), Edge (18+), et Opera (11.0+), supportent WebP en natif. La version 14 prévue pour Safari prendra en charge WebP.
- Le format n’est toujours supporté par la plupart des éditeurs d’images natifs de système d’exploitation, mais des options professionnelles comme Photoshop prennent en charge WebP.
Cas d’utilisation
- Remplacez les fichiers JPEG et PNG pour économiser de la bande passante et accélérer votre site. Si vous utilisez WordPress comme votre logiciel de gestion de contenu préféré, voici comment utiliser les images WebP dans WordPress et fournir d’autres formats aux navigateurs existants.
5. TIFF
Un format qui ne devrait pas manquer dans ce guide des types de fichiers d’images : le TIFF.
TIFF, qui est l’abréviation de Tagged Image File Format, est un format d’images matricielles le plus couramment utilisé pour le stockage et l’édition d’images qui seront ensuite utilisées pour l’impression.
Bien qu’il supporte la compression avec perte, il est généralement utilisé comme un format d’image sans perte. En outre, la plupart des applications graphiques professionnelles qui supportent le format TIFF (Photoshop, Illustrator, etc.) n’utilisent pas la compression. Il est donc courant que les images TIFF soient de grande taille.
Avantages et inconvénients
- Fichiers de haute qualité, parfaits pour le stockage ou l’édition imprimée.
- La taille du fichier est importante en raison de l’utilisation typique sans compression.
- Support limité des navigateurs.
Support des navigateurs et des systèmes d’exploitation
- Aucun des principaux navigateurs ne peut rendre un fichier TIFF sans ajout ou extension.
- Principalement disponible comme format d’exportation pour les outils professionnels d’édition et de publication d’images.
Cas d’utilisation
- Stockage et préparation des images et des graphiques pour la publication.
- Utilisé par de nombreux scanners pour préserver la qualité des documents ou des images scannés.
6. BMP — Bitmap
Bitmap (BMP) est un format de fichier d’image obsolète qui permet de cartographier des pixels individuels avec peu ou pas de compression. Cela signifie que les fichiers BMP peuvent facilement devenir extrêmement volumineux et sont peu pratiques à stocker ou à manipuler.
Avantages et inconvénients
- Des tailles de fichiers géantes sans gain de qualité notable par rapport à des formats comme WebP, GIF ou PNG.
Support des navigateurs et des systèmes d’exploitation
- Supporté par tous les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Supporté nativement dans la plupart des éditeurs d’images par défaut du système d’exploitation, comme MS Paint.
Cas d’utilisation
- En 2024, il n’y a pratiquement aucun cas d’utilisation légitime du format d’images BMP.
7. HEIF — High Efficiency Image File Format
HEIF, abréviation de High Efficiency Image File Format, est un format d’images développé par l’équipe à l’origine du format vidéo MPEG pour être un concurrent direct du JPEG.
En théorie, la compression est presque deux fois plus efficace que le JPEG, ce qui permet d’obtenir des images de qualité double avec des tailles de fichiers identiques.
Il s’agit d’un format d’image matricielle, basé sur le pixel mapping, ce qui signifie que vous ne pouvez pas augmenter l’échelle des images sans perdre en qualité.
Avantages et inconvénients
- Excellent rapport qualité/taille de fichier.
- Aucun navigateur et support limité du système d’exploitation.
Support des navigateurs et des systèmes d’exploitation
- Non supporté par les principaux navigateurs.
- Supporté nativement dans macOS Sierra et iOS 11 et ultérieurs, mais pas dans leurs versions Safari respectives.
Cas d’utilisation
- Utilisé par certains téléphones et appareils plus récents pour stocker des photos de meilleure qualité que les fichiers JPEG.
8. SVG — Scalable Vector Graphics
Le format de fichier Scalable Vector Graphics, généralement appelé SVG, a été développé par le W3C comme un langage de balisage pour rendre des images bidimensionnelles directement dans le navigateur.
Il ne s’appuie pas sur des pixels comme un format matriciel, mais utilise plutôt du texte XML pour délimiter des formes et des lignes de la même manière que les équations mathématiques créent des graphiques.
Cela signifie que vous pouvez mettre à l’échelle à l’infini les images SVG sans aucune perte de qualité.
Avantages et inconvénients
- Fichiers de petite taille et mise à l’échelle sans perte pour les illustrations, les formes et le texte simples.
- Ce n’est pas un format idéal pour les images ou les dessins complexes.
Support des navigateurs et des systèmes d’exploitation
- Supporté par tous les principaux navigateurs (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Les éditeurs d’images par défaut ont tendance à ne pas prendre en charge le SVG (car il ne convient pas aux photographies), mais la plupart des logiciels d’illustration prennent en charge les exportations SVG.
Cas d’utilisation
- Le SVG est le format idéal pour les logos, les icônes, les illustrations simples et tout ce que vous souhaitez voir évoluer librement avec votre design responsive. Si vous utilisez WordPress, assurez-vous de vérifier comment activer le support SVG de WordPress pour votre site web.
9. EPS — Encapsulated Postscript
En substance, un fichier EPS (Encapsulated PostScript) est un fichier d’image vectorielle utilisé pour stocker des illustrations dans Adobe Illustrator et d’autres logiciels d’illustration comme CorelDraw.
Comme les fichiers SVG, l’EPS est en fait un document textuel qui souligne les formes et les lignes avec du code, plutôt que de faire correspondre les pixels et les couleurs. Par conséquent, les fichiers EPS prennent également en charge la mise à l’échelle sans perte.
Avantages et inconvénients
- Mise à l’échelle sans perte.
- Support d’impression de documents et de dessins.
Support des navigateurs et des systèmes d’exploitation
- EPS n’est pas un format de fichier d’image web standard et n’est pas supporté par les principaux navigateurs.
Cas d’utilisation
- Il est surtout utilisé pour stocker, sauvegarder et imprimer des illustrations lorsque l’on travaille avec Adobe Illustrator ou d’autres logiciels.
10. PDF — Portable Document Format
Vous associez probablement le format PDF au stockage, à l’enregistrement et à la lecture de documents essentiellement textuels. C’est parfaitement compréhensible – document est dans le nom après tout.
Mais les fichiers PDF sont en fait basés sur le même langage PostScript qui alimente les fichiers d’images vectorielles EPS et qui peut également être utilisé pour enregistrer des images et des illustrations.
C’est le format d’image de choix pour stocker des illustrations, des couvertures de magazines, et plus encore pour une impression ultérieure. C’est également le choix préféré pour nos e-books Kinsta.
Avantages et inconvénients
- Le texte indexable pouvant être recherché le rend parfait pour des infographies ou des rapports approfondis.
- Peut inclure des liens, des boutons d’appel à action et d’autres éléments interactifs.
- Une mise à l’échelle sans perte.
- Ne peut pas être inclus dans du contenu web, doit être chargé et lu comme un fichier séparé.
Support des navigateurs et des systèmes d’exploitation
- Supporté par tous les principaux navigateurs, mais vous êtes obligé d’ouvrir le PDF comme un fichier séparé. (Vous ne pouvez pas utiliser les fichiers PDF pour afficher des images dans votre contenu HTML).
- Ce format supporté par la plupart des éditeurs de documents standard (comme MS Word ou Google Docs) et des logiciels d’illustration (AI, Inkscape), mais pas par les logiciels d’édition d’images.
Cas d’utilisation
- Le PDF est la meilleure option si vous souhaitez créer un rapport visuel interactif ou infographique qui complète votre contenu. Voici une belle liste des meilleures extensions de visualisation de PDF pour les utilisateurs de WordPress.
11. PSD — Photoshop Document
Comme son nom l’indique, le format de fichier PSD est un format d’image utilisé pour l’enregistrement de documents d’image et de travaux en cours avec Adobe Photoshop.
Ce n’est pas un format d’image adapté au web, il n’est supporté par aucun navigateur, ni par aucun visualiseur ou éditeur d’images standard.
Avantages et inconvénients
- Tous les filtres, la transparence, les chemins et les modifications sont entièrement personnalisables et réversibles.
- Qualité d’image sans perte.
- Fichiers de grande taille.
Cas d’utilisation
- Sauvegarde et stockage des projets Photoshop avant et après leur réalisation.
12. AI — Adobe Illustrator Artwork
AI est un autre format d’image spécifiquement développé par Adobe pour enregistrer non seulement l’image, mais aussi l’état du projet.
Comme le PSD, il n’est pas destiné à être utilisé sur le web et n’est supporté par aucun navigateur, ni par la plupart des visionneuses d’images par défaut.
Contrairement aux fichiers PSD, vous pouvez librement mettre à l’échelle les fichiers AI sans perte de qualité.
Avantages et inconvénients
- Tous les traits, lignes, formes, filtres, sont personnalisables et réversibles.
- La taille des illustrations peut être augmentée ou réduite librement.
- Fichiers de grande taille.
Cas d’utilisation
- Sauvegarde et stockage des projets Adobe Illustrator avant et après leur réalisation.
13. XCF — eXperimental Computing Facility
XCF, qui signifie eXperimental Computing Facility, est un type de fichier d’images natif de l’éditeur d’image Open Source GIMP. C’est l’équivalent des fichiers PSD et il permet d’enregistrer les chemins, la transparence, les filtres, etc.
Encore une fois, il s’agit d’un type de fichier natif pour le stockage de projets et il n’est supporté par aucun navigateur ou visualiseur d’images par défaut.
Avantages et inconvénients
- Tous les chemins, filtres et formes sont personnalisables et réversibles.
- Qualité d’image sans perte.
- Fichiers de grande taille.
Cas d’utilisation
- Enregistrement et stockage des projets GIMP avant et après leur finalisation.
14. INDD — Adobe InDesign Document
INDD est un type de fichier natif pour les utilisateurs d’Adobe InDesign où vous pouvez enregistrer des fichiers de projet comprenant le contenu des pages, les styles, les échantillons, et plus encore.
Bien qu’il soit parfois appelé format de fichier d’images, il a tendance à se lier à des éléments visuels au-delà du texte.
Il n’est supporté par aucun navigateur ou visionneur d’images par défaut, car ce n’est pas un format sûr pour le web.
Avantages et inconvénients
- Stockez de grands projets de conception de plusieurs pages avec des éléments personnalisables.
Cas d’utilisation
- Il est principalement utilisé par les graphistes et les artistes de production pour concevoir et collaborer sur des affiches, des prospectus, des magazines, des brochures, etc.
15. Types de fichiers d’images bruts
Les formats d’images bruts (Raw) sont les types de fichiers qu’un appareil photo numérique utilise pour stocker des images de pleine qualité en vue d’une post-production et d’un montage ultérieurs.
Principaux types de fichiers d’images bruts par fabricant d’appareils photo :
- Kodak : CR, K25, KDC
- Canon : CRW CR2 CR3
- Epson : ERF
- Nikon : NEF NRW
- Olympe : ORF
- Pentax : PEF
- Panasonic : RW2
- Sony : ARW, SRF, SR2
Au lieu des 256 nuances par canal de couleur (8 bits) disponibles dans un fichier JPEG, les fichiers RAW offrent jusqu’à 16.384 nuances par canal de couleur (14 bits) dans une seule image. Cela vous donne plus de souplesse quand vous devez modifier les couleurs et le contraste en post-traitement.
Les fichiers d’images bruts ne sont pas destinées au web ou au partage et ne sont pas supportées par les principaux navigateurs ou visionneuses d’images.
Avantages et inconvénients
- Des images de meilleure qualité avec une plus grande variabilité des couleurs.
- Fichiers d’images géants (un fichier brut peut facilement atteindre 20 à 40 mégaoctets).
Cas d’utilisation
- Sauvegarde des photos dans la meilleure qualité possible pour la post-production et l’édition.
FAQ sur les types de fichiers d’images
Quels sont les 3 types de fichiers communs d’un fichier image ?
D’après les données relatives à l’utilisation du web, les trois types de fichiers d’images les plus courants sont les PNG, les JPEG et les SVG.
Examinons ci-dessous ce qui les rend si répandus.
1. PNG : Captures d’écran, Bannières, Infographies, Images
Comme le format PNG se prête mieux au texte à l’intérieur de l’image, il est plus souvent utilisé pour les captures d’écran, les bannières (en fonction de la taille de la bannière publicitaire), et plus encore.
Comme il utilise une compression sans perte, il est également utilisé par les concepteurs et les photographes pour présenter des images de haute qualité sur leurs sites web de portfolio par exemple.
Ces deux facteurs, ainsi que le support universel des navigateurs et des systèmes d’exploitation, en font le type de fichier image le plus populaire sur le web. Les PNG sont présents sur 77 % des sites web.
.
2. JPEG: Images
La compression avec perte signifie que le JPEG est une meilleure option à utiliser pour mettre en valeur les images dans l’ensemble de votre contenu. La perte de qualité est à peine visible pour l’internaute moyen, et vous pouvez économiser un espace disque et une bande passante considérables.
C’est pourquoi il s’agit du deuxième format le plus populaire sur Internet, utilisé par près de 72 % des sites web. La plupart des sites utilisent à la fois les PNG et les JPEG à des fins différentes.
Pour rappel : Il n’y a pas de différence entre JPG et JPEG, ce sont deux acronymes et extensions de fichiers différents pour le même format.
3. SVG : Logos, icônes et illustrations
Les fichiers SVG sont des fichiers vectoriels évolutifs qui sont parfaits pour les icônes, les logos, les graphiques et les illustrations simples. L’image peut même être insérée directement dans la page sous forme de code CSS.
C’est pourquoi le SVG arrive en troisième position, utilisés par 27 % des sites web.
Mention honorable : Images GIF animées
Bien qu’il soit rarement le format de choix pour les images statiques, le GIF a fait son retour en tant que premier choix pour le partage des animations.
En conséquence, environ 22 % des sites web utilisent des GIF sur leurs pages, même s’ils utilisent probablement aussi des PNG et des JPEG comme formats standard.
Quel est le format d’images de la plus haute qualité ?
Les formats d’images bruts sont de la plus haute qualité mais ont des tailles de fichiers déraisonnables pouvant atteindre des centaines de mégaoctets.
Pour les images web, le format de fichier WebP offre une taille de fichier inférieure de 25 à 35 % à celle du format JPEG pour une même qualité de photos, ce qui signifie que vous pouvez téléverser des images de meilleure qualité pour le même espace disque et accélérer votre site.
HEIF est une autre alternative au JPEG avec une compression plus efficace mais n’est actuellement supporté par aucun des principaux navigateurs.
Les fichiers PNG offrent une compression sans perte, mais cela signifie que la taille des fichiers sera excessivement grande et lente à charger. Un seul fichier PNG peut souvent représenter des centaines de Ko ou même plus d’un Mo. Cependant, si vous profitez de certaines tactiques comme le chargement différé (disponible dans le cœur depuis WordPress 5.5) et un CDN, vous pourriez quand même avoir un site rapide.
Quels formats de fichiers favorisent la transparence ?
Les types de fichiers image les plus courants pour le web qui supportent la transparence sont PNG, WebP, GIF et même SVG.
La plupart des types de fichiers d’images de projet natifs comme PSD, XCF et AI prennent également en charge la transparence.
D’autre part, le format d’image JPEG, très répandu, ne permet pas la transparence.
PNG est-il meilleur que JPEG ?
La principale différence entre PNG et JPEG est que PNG est un format d’image sans perte, alors que JPEG est un format avec perte. Cela signifie essentiellement que le PNG utilise des techniques de compression sans sacrifier la qualité ou les détails originaux de l’image.
Pour les textes en images, les captures d’écran de tutoriel, et lorsque vous souhaitez que les signes ou autres éléments fins soient visibles à 100 % dans une photo, le format PNG est le bon choix.
Comme vous pouvez le voir sur cette image drôle ci-dessus, le PNG, qui est représenté à gauche, est bien meilleur pour afficher clairement du texte et des formes simples que le JPEG de droite.
Cela signifie-t-il que le JPEG est un mauvais type de fichier d’images ? Pas du tout !
Pour les articles de blog ou les images d’en-tête, le format JPEG offre une qualité plus que suffisante avec une taille de fichier nettement inférieure. Vous pouvez souvent économiser jusqu’à 50 % d’espace disque, voire plus, tout en ayant du mal à repérer à l’œil nu une différence de qualité.
Résumé
Les images que vous pourriez légitimement utiliser pour vos projets ne manquent pas. Nous espérons que cet article vous a aidé à comprendre quels types et formats de fichiers d’images utiliser dans quel contexte pour obtenir les meilleurs résultats.
Les formats matriciels sont les mieux adaptés aux images et aux photos, tandis que les vectoriels sont un excellent substitut pour les logos, icônes et graphiques numériques.
Utiliser les bons types de fichiers d’image pour la bonne tâche peut non seulement aider à améliorer la vitesse de chargement de vos pages, mais aussi à réduire la bande passante et la charge du serveur. Par la suite, votre expérience utilisateur globale s’en trouvera également grandement améliorée. Pas mal, non ?
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire