Les différents types de fichiers images… ou comment utiliser les bons fichiers sur le web

JPEG, GIF, PNG, SVG… Pas toujours facile de s’y retrouver entre ces différents types de fichiers images lorsque l’on veut créer et optimiser un site internet ou tout autre support numérique.

D’ailleurs, vous êtes-vous déjà demandé quelles étaient les différences entre ces types de fichiers ?

Oui ? Alors, n’allez pas plus loin, cette infographie est pour vous !
Nous allons comparer ensemble les types de fichiers images les plus couramment utilisés sur le web et détaillerons quelques caractéristiques clés, propres aux images numériques, pour vous aider à y voir plus clair. Nous espérons que cela vous sera utile, que vous soyez novice de l’image ou webdesigner chevronné.

Si vous préférez cette information au format texte, rendez-vous après l’infographie, au bas de la page 😉

Quels sont les différents types de fichiers images ?

Avant de détailler plus amplement leurs caractéristiques, voici les types de fichiers images les plus couramment utilisés sur le web.

• JPEG – Le plus polyvalent de tous, pour les photos et les images complexes.
• PNG-8 – Idéal pour les graphismes simples et épurés tels que les logos et les icônes.
• PNG-24 – Celui qui peut se superposer sur n’importe quel fond grâce à sa transparence.
• GIF -Prend en charge toutes les animations interactives.
• SVG – Permet aux graphismes élaborés d’être redimensionnés sans pixelliser.

La Palette de Couleurs

La seconde caractéristique qui nous intéresse est la palette de couleurs. Certains types de fichiers images supportent un nombre de couleurs quasi-illimité, mais tous ne sont pas aussi polyvalents. Combien de couleurs supporte chaque type de fichier ?

Illimité

Les images JPEG, PNG-24 et SVG ne sont, pour ainsi dire, pas limitées dans le nombre de couleurs qu’elles emploient. Ces types de fichiers sont donc idéals pour les images complexes avec de nombreuses nuances de couleurs.

Limité

Les fichiers PNG-8 et GIF peuvent supporter jusqu’à 256 couleurs. Ils permettent aux images d’être de faible taille mais peuvent conduire à une perte de nuances sur les images les plus complexes.

La Transparence

Nous allons maintenant aborder la transparence des pixels dans les images. Quels types de fichiers images supportent la transparence et lequel ne la supporte pas ?

Supportée

La plupart des types de fichiers images supportent les pixels transparents, à l’exception du JPEG. Cela permet donc aux images d’être superposées sur d’autres ou sur un arrière-plan.

Non Supportée

Les JPEGs ne supportent absolument pas les pixels transparents, ce qui signifie qu’ils doivent forcément avoir un fond (arrière-plan) et qu’ils masqueront tout ce sur quoi ils seront apposés.

La Compression d’Image

Dans le monde du numérique, la compression des images peut s’avérer à double tranchant. Oui, on peut réduire la taille d’une image de manière drastique mais attention cela occasionne généralement une perte de qualité ou de netteté. Nous allons donc voir quels types de fichiers images peuvent être compressés

Compressé

Les images en JPEG peuvent être compressées à différents degrés, ce qui réduit considérablement la taille du fichier. Cependant cela réduit au passage les données propres à l’image, ce qui se traduit par des images de qualité moindre.

Non Compressé

La Mise à l’échelle

Quels types de fichiers images peuvent être redimensionnés sans perdre en qualité ?

Taille fixe (pixellisé)

La plupart des images sont des fichiers composes de pixels, ce qui signifie qu’elles ont une largeur et une hauteur fixes en pixels. Agrandir une image composée de pixels, agrandira donc les pixels et donnera un aspect flou.

Adaptable (Vecteur)

SVG est l’acronyme de « Scalable Vector Graphics », autrement dit Graphique Vectoriel Adaptable. Les images SVG peuvent être agrandies à volonté sans perdre en qualité ni netteté. Elles sont ainsi très utiles pour des icônes web.

L’Animation

Supportée

L’intérêt des GIF est qu’ils peuvent contenir un cycle de plusieurs images par secondes, permettant ainsi de créer des animations (comme un diaporama). Les SVGs peuvent être animés sur le web en utilisant des CSS et Javascript.

Non supportée

Les fichiers JPEG et PNG ne contiennent qu’une seule image et ne peuvent donc pas être animés.

Pour conclure, chaque type de fichier joue un rôle spécifique dans la création d’images. Certains sont plus performants pour les images complexes et d’autres fonctionnent mieux pour les images les plus simples. Afin de choisir le bon type de fichier image, il est important de définir les fonctionnalités dont vous avez besoin et comment les atteindre avec la taille de fichier la plus légère possible.

Nous espérons que cette infographie vous a plu et que les petites lucioles de Lueur Externe auront éclairé vos lanternes 🙂