Vous devez être conscient de quelques facteurs clés ...
Premièrement, il existe deux types de compression: Lossless et Lossy .
- Sans perte signifie que l'image est rendue plus petite, mais sans préjudice de la qualité.
- Lossy signifie que l'image est rendue (encore) plus petite, mais au détriment de la qualité. Si vous enregistrez une image dans un format Lossy encore et encore, la qualité de l'image devient de plus en plus mauvaise.
Il existe également différentes profondeurs de couleurs (palettes): couleur indexée et couleur directe .
- Indexé signifie que l'image ne peut stocker qu'un nombre limité de couleurs (généralement 256), contrôlées par l'auteur, dans ce qu'on appelle une carte de couleurs
- Direct signifie que vous pouvez stocker plusieurs milliers de couleurs qui n'ont pas été directement choisies par l'auteur
BMP - Sans perte / indexé et direct
Il s'agit d'un ancien format. Il est sans perte (aucune donnée d'image n'est perdue lors de la sauvegarde) mais il y a aussi peu ou pas de compression du tout, ce qui signifie que l'enregistrement en tant que BMP entraîne des tailles de fichier TRÈS volumineuses. Il peut avoir des palettes à la fois indexées et directes, mais c'est une petite consolation. La taille des fichiers est si inutilement grande que personne n'utilise jamais vraiment ce format.
Bon pour: rien de vraiment. Il n'y a rien dans lequel BMP excelle ou n'est pas amélioré par d'autres formats.
GIF - Sans perte / indexé uniquement
GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image encore et encore et ne jamais perdre de données. Les tailles de fichier sont beaucoup plus petites que BMP, car une bonne compression est effectivement utilisée, mais elle ne peut stocker qu'une palette indexée. Cela signifie que pour la plupart des cas d'utilisation , il ne peut y avoir qu'un maximum de 256 couleurs différentes dans le fichier. Cela semble être un tout petit peu, et c'est le cas.
Les images GIF peuvent également être animées et transparentes.
Bon pour: logos, dessins au trait et autres images simples qui doivent être petites. Seulement vraiment utilisé pour les sites Web.
JPEG - avec perte / direct
Les images JPEG ont été conçues pour rendre les images photographiques détaillées aussi petites que possible en supprimant les informations que l'œil humain ne remarquera pas. En conséquence, c'est un format avec perte, et l'enregistrement du même fichier encore et encore entraînera la perte de plus de données au fil du temps. Il a une palette de milliers de couleurs et est donc idéal pour les photographies, mais la compression avec perte signifie qu'il est mauvais pour les logos et les dessins au trait: non seulement ils auront l'air flous, mais ces images auront également une taille de fichier plus grande que les GIF!
Bon pour: les photographies. Aussi, les dégradés.
PNG-8 - Sans perte / indexé
PNG est un format plus récent, et PNG-8 (la version indexée de PNG) est vraiment un bon remplacement pour les GIF. Malheureusement, il présente quelques inconvénients: tout d'abord, il ne peut pas prendre en charge l'animation comme le GIF (bien qu'il le puisse, mais seul Firefox semble le prendre en charge, contrairement à l'animation GIF qui est prise en charge par tous les navigateurs). Deuxièmement, il a des problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, les logiciels importants comme Photoshop ont une très mauvaise implémentation du format. (Merde, Adobe!) PNG-8 ne peut stocker que 256 couleurs, comme les GIF.
Bon pour: La principale chose que PNG-8 fait mieux que les GIF est la prise en charge d'Alpha Transparency.
PNG-24 - Sans perte / direct
PNG-24 est un excellent format qui combine l'encodage sans perte avec la couleur directe (des milliers de couleurs, tout comme JPEG). Cela ressemble beaucoup à BMP à cet égard, sauf que PNG compresse réellement les images, ce qui donne des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront toujours plus volumineux que les fichiers JPEG (pour les photos) et les GIF / PNG-8 (pour les logos et les graphiques), vous devez donc toujours déterminer si vous souhaitez vraiment en utiliser un.
Même si les PNG-24 autorisent des milliers de couleurs tout en ayant une compression, ils ne sont pas destinés à remplacer les images JPEG. Une photographie enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande qu'une image JPEG équivalente, avec très peu d'amélioration de la qualité visible. (Bien sûr, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier et que vous souhaitez obtenir la meilleure image possible.)
Tout comme PNG-8, PNG-24 prend également en charge la transparence alpha.
SVG - Sans perte / vecteur
Un type de fichier qui gagne actuellement en popularité est SVG, qui est différent de tout ce qui précède en ce qu'il s'agit d'un format de fichier vectoriel (les éléments ci-dessus sont tous raster ). Cela signifie qu'il est en fait composé de lignes et de courbes au lieu de pixels. Lorsque vous effectuez un zoom avant sur une image vectorielle, vous voyez toujours une courbe ou une ligne. Lorsque vous effectuez un zoom avant sur une image raster, vous verrez des pixels.
Par exemple:
Cela signifie que SVG est parfait pour les logos et les icônes que vous souhaitez conserver la netteté sur les écrans Retina ou à différentes tailles. Cela signifie également qu'un petit logo SVG peut être utilisé à une taille beaucoup plus grande (plus grande) sans dégradation de la qualité de l'image - quelque chose qui nécessiterait un fichier séparé plus grand (en termes de taille de fichier) avec des formats raster.
Les tailles de fichiers SVG sont souvent minuscules, même si elles sont visuellement très grandes, ce qui est génial. Il convient toutefois de garder à l'esprit que cela dépend de la complexité des formes utilisées. Les SVG nécessitent plus de puissance de calcul que les images raster car les calculs mathématiques sont impliqués dans le dessin des courbes et des lignes. Si votre logo est particulièrement compliqué, il pourrait ralentir l'ordinateur d'un utilisateur et même avoir une très grande taille de fichier. Il est important de simplifier au maximum vos formes vectorielles.
De plus, les fichiers SVG sont écrits en XML et peuvent donc être ouverts et modifiés dans un éditeur de texte (!). Cela signifie que ses valeurs peuvent être manipulées à la volée. Par exemple, vous pouvez utiliser JavaScript pour changer la couleur d'une icône SVG sur un site Web, tout comme vous le feriez avec du texte (c.-à-d. Pas besoin d'une deuxième image), ou même les animer.
En tout, ils conviennent mieux aux formes plates simples comme les logos ou les graphiques.
J'espère que ça aide!