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.

Image matricielle - Exemple JPEG

Image matricielle – Exemple JPEG

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.

Agrandissement du format d'image vectoriel

Agrandissement du format d’image vectoriel (Source de l’image: Wikipedia.com)

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.

Seuls 8 % des sites web ne comportent aucun contenu visuel... mais pour les 92 % restants, l'affichage des images avec le bon type de fichier est essentiel. 🖼 Trouvez les 15 meilleures options dans ce guide👇Click to Tweet

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

Image de tigre en format JPEG

Image de tigre en format JPEG

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 des navigateurs et des systèmes d’exploitation

Cas d’utilisation

2. PNG — Portable Network Graphics

Fichier image .png du centre de ressources Kinsta

Fichier image .png du centre de ressources Kinsta

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

3. GIF — Graphics Interchange Format

Exemple d'une image gif

Exemple d’une image gif

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

4. WebP

Exemple d'image WebP

Exemple d’image 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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

5. TIFF

Icône TIFFC

Icône 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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

6. BMP — Bitmap

bmp vs gif

Bitmap vs gif

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

7.  HEIF — High Efficiency Image File Format

jpeg vs heif

Format JPEG vs HEIF

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

8. SVG — Scalable Vector Graphics

SVG

Logo SVG

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

9. EPS — Encapsulated Postscript

Icône EPS

Icône EPS

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

10. PDF — Portable Document Format

Exemple de fichier PDF

Exemple de fichier PDF

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

Support des navigateurs et des systèmes d’exploitation

Cas d’utilisation

11. PSD — Photoshop Document

Logo PSD

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

Cas d’utilisation

12. AI — Adobe Illustrator Artwork

Icône de fichier Adobe Illustrator

Icône de fichier Adobe Illustrator

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

Cas d’utilisation

13. XCF — eXperimental Computing Facility

Icône XCF

Icône XCF

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

Cas d’utilisation

14.  INDD — Adobe InDesign Document

Icône Adobe InDesign

Icône Adobe InDesign

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

Cas d’utilisation

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 :

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

Cas d’utilisation

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.

Statistiques d'utilisation des formats de fichiers d'images

Statistiques d’utilisation des formats de fichiers d’images (Source de l’image: w3techs.com)

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.

Exemple de gif animé

Exemple de gif animé

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.

Bande dessinée PNG vs JPEG

Bande dessinée PNG vs JPEG (Source de l’image : lbrandy.com)

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é.

Pour que le contenu visuel de votre site web reste clair, voici un guide des meilleurs types de fichiers d'images ✨Click to Tweet

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 ?


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 28 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.