Il existe un certain nombre de formats d'image pouvant être utilisés sur des pages Web. Quelques exemples courants sont GIF, JPG et PNG. Les fichiers SVG sont également couramment utilisés sur les sites Web actuels, offrant aux concepteurs de sites Web une autre option pour les images en ligne.
Images GIF
Utilisez des fichiers GIF pour les images comportant un nombre de couleurs limité et réduit. Les fichiers GIF sont toujours réduits à 256 couleurs uniques au maximum. L'algorithme de compression pour les fichiers GIF est moins complexe que pour les fichiers JPG, mais lorsqu'il est utilisé sur des images et du texte en couleurs uniformes, il produit des fichiers de très petite taille.
Le format GIF ne convient pas aux images photographiques ou aux images avec dégradé de couleurs. Étant donné que le format GIF comporte un nombre limité de couleurs, les dégradés et les photographies se retrouvent avec des bandes et une pixellisation lors de l'enregistrement en tant que fichier GIF.
En un mot, vous utiliseriez des fichiers GIF uniquement pour des images simples avec seulement quelques couleurs, mais vous pouvez également utiliser des fichiers PNG pour cela également (plus d'informations à ce sujet prochainement).
Images JPG
Utilisez des images JPG pour les photographies et autres images comportant des millions de couleurs. Il utilise un algorithme de compression complexe qui vous permet de créer des graphiques plus petits en perdant une partie de la qualité de l'image. Cela s'appelle une compression "avec perte", car certaines informations d'image sont perdues lors de la compression de l'image.
Le format JPG n'est pas adapté aux images contenant du texte, aux gros blocs de couleur unie et aux formes simples avec des bords nets. En effet, lorsque l'image est compressée, le texte, la couleur ou les lignes peuvent devenir flous, ce qui donne une image moins nette que celle enregistrée dans un autre format.
Les images JPG sont mieux utilisées pour les photographies et les images qui ont beaucoup de couleurs naturelles.
Images PNG
Le format PNG a été conçu pour remplacer le format GIF lorsqu'il est apparu que les images GIF seraient soumises à une redevance. Les graphiques PNG ont un meilleur taux de compression que les images GIF, ce qui donne des images plus petites que le même fichier enregistré au format GIF. Les fichiers PNG offrent une transparence alpha, ce qui signifie que vous pouvez avoir des zones de vos images entièrement transparentes ou même utiliser une plage de transparence alpha. Par exemple, une ombre portée utilise une gamme d’effets de transparence et convient à un fichier PNG (ou vous pouvez simplement nous arrêter en utilisant des ombres CSS à la place).
Les images PNG, comme les GIF, ne sont pas bien adaptées aux photographies. Il est possible de contourner le problème de bande qui affecte les photos enregistrées au format GIF en couleurs vraies, mais cela peut entraîner de très grandes images. Les images PNG ne sont également pas bien prises en charge par les anciens téléphones cellulaires et les téléphones polyvalents.
Nous utilisons le format PNG pour tout fichier nécessitant de la transparence. Nous utilisons également PNG-8 pour tout fichier qui conviendrait comme fichier GIF, en utilisant plutôt ce format PNG.
Images SVG
SVG signifie Scalable Vector Graphic. Contrairement aux formats basés sur les images raster trouvés dans les formats JPG, GIF et PNG, ces fichiers utilisent des vecteurs pour créer de très petits fichiers pouvant être rendus à n’importe quelle taille sans perte de qualité ni augmentation de la taille du fichier. Ils sont créés pour des illustrations telles que des icônes et même des logos.
Préparation des images pour la diffusion Web
Quel que soit le format d'image que vous utilisez, et si votre site Web est sûr d'utiliser un certain nombre de formats différents sur toutes ses pages, vous devez vous assurer que toutes les images de ce site sont prêtes pour la diffusion sur le Web. Des images trop grandes peuvent ralentir l’exécution d’un site et avoir une incidence sur les performances globales. Pour lutter contre cela, ces images doivent être optimisées pour trouver un équilibre entre une qualité élevée et la taille de fichier la plus basse possible à ce niveau de qualité.
Choisir le bon format d'image fait partie de la bataille, mais la prochaine étape de cet important processus de diffusion Web consiste également à s'assurer que vous avez bien préparé ces fichiers.
Article original de Jennifer Kyrnin. Édité par Jeremy Girard.
