Dans le tutoriel d’aujourd’hui, nous allons parler des principaux formats d’images et dans quels cas les utiliser pour obtenir le meilleur rapport qualité/poids.
JPEG : le format d’images le plus utilisé
La différence entre JPEG et JPG
Il n’y a aucune différence entre les images du format JPG et JPEG (elles utilisent l’extension .jpg et .jpeg respectivement). C’est exactement la même chose.
Pour la petite histoire, le Joint Photographic Expert Group (JPEG) voulait initialement que son format d’images s’enregistre avec l’extension .jpeg. Cependant, les anciennes versions de Windows n’acceptaient qu’un maximum de 3 caractères. Il a donc fallu changer l’extension des images de .jpeg à .jpg pour que ces versions de Windows puissent supporter le format JPEG. Aujourd’hui la norme est d’enregistrer ce type de photos avec l’extension .jpg même si le nom du format est resté JPEG.
Le format JPEG
Le JPEG est le format le plus utilisé. Il est supporté par tous les fureteurs internet et la plupart des appareils photo enregistrent leurs images dans ce format par défaut.
Considérations techniques des images JPEG
Les images JPEG :
- peuvent avoir une dimension maximale de 65 535 px par 65 535 px.
- contiennent environs 16millions de couleurs.
- s’enregistrent en utilisant les extensions .jpg ou .jpeg.
Compression du JPEG
Vous pouvez compresser vos JPEG pour réduire leur poids en octets. Lorsque vous compressez une image, vous choisissez de perdre une partie de l’information (pixels) incorporées dans l’image originale. Pendant le processus de compression vous devez donc choisir la qualité de l’image finale.
- 100% correspond à une image de haute qualité donc vous ne perdez pas beaucoup d’information. Dans ce cas de figure la compression est basse.
- 0% représente une image de basse qualité dans laquelle vous perdez beaucoup d’information. On dit alors que la compression est élevée.
Sur l’image de droite vous pouvez voir la pixellisation à certains endroits. C’est le phénomène qui se produit quand la compression est trop élevée.
- Chaque fois que vous exportez ou sauvegardez une image JPEG, elle perd de l’information. Donc plus vous exportez ou sauvegardez un JPEG, plus la qualité sera médiocre. C’est un peu comme quand vous faites une photocopie d’une photocopie. A partir d’un moment, la photocopie n’est plus lisible.
- Les JPEG ne peuvent pas représenter les éléments transparents. Ces éléments seront blancs par défaut.
Avantages d’utiliser un JPEG
- Puisque les JPEG perdent de l’information pendant le processus de compression, ils sont généralement (mais pas tout le temps) plus légers que les PNG. Ils vont donc charger plus rapidement sur une page internet et occuper moins d’espace sur votre disque et sur vos serveurs.
- Comme un JPEG peut contenir des millions de couleurs, c’est le format le mieux adapté pour les photos ou les images dont la palette de couleurs est complexe.
Quand utiliser le format JPEG ?
Le JPEG est généralement recommandé pour l’enregistrement de photographies car il permet de mieux représenter la richesse des couleurs.
GIF : Graphic Interchange Format
Ce format d’images s’enregistre en utilisant l’extension .gif. Pendant longtemps, c’était le format le plus répandu sur le web car il était adapté aux performances des ordinateurs de l’époque. Les GIF peuvent représenter un maximum de 256 couleurs. Ils supportent aussi les éléments transparents. Aujourd’hui on utilise le format GIF surtout pour créer des images animées.
Avantages du format GIF
- Comme la palette de couleur est limitée à 256, les fichiers GIF sont encore moins lourds que les JPEG et chargent en général plus rapidement sur le web.
- Contrairement au format JPEG, le GIF ne perd pas d’informations pendant la compression.
Quand utiliser les GIF ?
- Pour représenter des images dont la palette de couleur est simple (les dessins, les petites icônes, du texte etc.)
- Pour les images qui vont être vues par des internautes dont le débit internet est faible.
- Le GIF est le seul format qui vous permet de créer des images animées.
PNG : Portable Network Graphic
Ce format a été créé pour le web pour corriger les défauts du GIF. Il s’enregistre avec l’extension .png et combine les avantages du GIF et du JPEG :
- Le PNG supporte les éléments transparents.
- Il permet de compresser des images sans leur faire perdre leur qualité.
- Il représente des images dont la palette de couleurs est complexe.
Deux types de PNG : PNG-8 et PNG-24
PNG-8, le plus proche du GIF
Le PNG-8 et le GIF sont interchangeables. Il peut représenter jusqu’à 256 couleurs. À dimensions égales il sera plus léger que sa version GIF. Donc, le PNG-8 chargera encore plus rapidement que sa version GIF. Par conséquent, il vaut mieux privilégier le PNG-8 au GIF. Par contre, si votre image est animée, vous devez la sauvegarder en GIF. Le PNG-8 est idéal pour les logos simples et les icônes par exemple.
PNG-24, très proche du JPEG
Comme le JPEG, le PNG-24 peut représenter des millions de couleurs. Il n’y a donc aucune différence dans la qualité d’une image PNG-24 et d’une image JPEG avant la compression. Par contre, comme les PNG ne perdent pas d’information, elles seront en général plus lourdes que les JPEG après avoir été compressées. Par ailleurs, les PNG seront plus nettes qu’un JPEG qui a été trop compressé.
Notes importantes
- Le PNG ne permet pas de créer une animation. Vous pouvez cependant combiner plusieurs PNG pour en faire une animation GIF.
- Les PNG-24 sont généralement plus volumineux que les JPEG. Pour réduire la taille d’un PNG-24, il faut :
- réduire le nombre de couleurs
- couper (rogner) l’image pour mettre l’accent sur les éléments importants,
- ou changer les dimensions de l’image.
- Le PNG-24 n’est pas aussi répandu que le JPEG. Certaines applications et sites web ne le supportent pas encore.
Quand utiliser les PNG ?
Le PNG-24 est une excellente alternative pour les photographies si vos photos contiennent des pixels transparents.
Il est aussi recommandé de sauvegarder vos images en PNG si celles-ci comportent du texte. Le texte restera lisible même après que vous ayez compressé le PNG.
SVG : Scalable Vector Graphics
Contrairement aux formats précédents qui sont des images matricielles, le SVG représente des images vectorielles.
L’avantage des images vectorielles est qu’elles gardent leur netteté quelque soit la taille de l’écran. Lorsque vous zoomez sur une image matricielle, vous allez observer l’effet de pixellisation. Ce n’est pas le cas pour les images vectorielles.
Le SVG est très proche des vecteurs qu’on crée dans Adobe Illustrator alors que les PNG, JPEG et GIF sont plus des images matricielles qu’on utilise dans Photoshop. On peut modifier les SVG autant dans Illustrator que dans un éditeur de code comme Brackets ou Atom.
Le SVG est devenu très populaire chez les développeurs web car il permet aux images de s’afficher correctement peu importe la taille de l’écran.
Avantages du SVG
- Aucune pixellisation peu importe la taille de l’image ou le degré de zoom.
- Les SVG sont en général légers et donc, chargent rapidement.
- Ils supportent les éléments transparents.
- On peut coder les SVG directement dans le HTML5 et modifier l’image avec du CSS.
- L’utilisation de SVG directement dans le code peut avoir un impact positif sur la vitesse de téléchargement des pages internet car l’image n’est pas téléchargée à partir de votre serveur.
Exemple
L’image suivante a été vectorisée et sauvegardée sous le format SVG. Au final, elle fait 6Mo donc beaucoup plus lourde que ses versions matricielles. Elle prendra du temps à charger lorsqu’on l’ouvre avec un fureteur internet comme Google Chrome.
Quand utiliser les SVG ?
Ce format est très approprié pour représenter les logos, les icônes, les graphiques, les cartes, etc. L’implémentation du SVG est plus complexe que celles des images matricielles. Ce format est donc surtout réservé aux designers et développeurs web expérimentés.
Comparatif d’images de différents formats
En conclusion, nous avons sauvegardée la même image sous plusieurs formats afin que vous puissiez voir la différence dans la qualité de l’image.
