Des exemples courants de types d'images sur le Web incluent GIF, JPG, et PNG. Fichiers SVG. Ces différents formats offrent aux concepteurs de sites Web diverses options pour optimiser l'attrait visuel d'un site Web.
Images GIF
Utilisez des fichiers GIF pour les images qui ont un petit nombre de couleurs fixe. Les fichiers GIF sont toujours réduits à pas plus de 256 couleurs uniques. 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 de couleur unie, il produit très petites tailles de fichiers.
Le format GIF ne convient pas aux images photographiques ou aux images avec des dégradés de couleurs. Étant donné que le format GIF a un nombre limité de couleurs, les dégradés et les photographies se retrouveront avec des bandes et une pixellisation lorsqu'ils seront enregistrés en tant que fichier GIF.
Images JPG
Utilisez des images JPG pour les photographies et autres images contenant 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. C'est ce qu'on appelle une compression "avec perte" car certaines informations sur l'image sont perdues lorsque l'image est compressée.
Le format JPG n'est pas adapté aux images contenant du texte, de gros blocs de couleur unie et des 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 rend l'image moins nette qu'elle le serait dans un autre format.
Images PNG
Le format PNG a été développé pour remplacer le format GIF lorsqu'il est apparu que les images GIF seraient soumises à des redevances. Les graphiques PNG ont un meilleur taux de compression que les images GIF, ce qui se traduit par 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 conviendrait pour un PNG (ou vous pouvez simplement nous terminer 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 bandes qui affecte les photographies enregistrées en tant que fichiers GIF en utilisant des couleurs vraies, mais cela peut entraîner des images très volumineuses. Les images PNG ne sont pas non plus bien prises en charge par les téléphones portables et les téléphones multifonctions plus anciens.
Images SVG
SVG signifie Scalable Vector Graphic. Contrairement aux formats raster trouvés dans JPG, GIF et PNG, ces fichiers utilisent des vecteurs pour créer de très petits fichiers qui peuvent être rendus à n'importe quelle taille sans perte de qualité ni augmentation de la taille du fichier. Ils sont créés pour des illustrations comme 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, assurez-vous que toutes les images de ce site sont préparé pour la livraison sur le Web. Des images trop grandes peuvent ralentir le fonctionnement d'un site et avoir un impact sur les performances globales. Pour lutter contre cela, ces images doivent être optimisées pour trouver l'équilibre entre une qualité élevée et la taille de fichier la plus faible possible à ce niveau de qualité.
Choisir le bon format d'images fait partie de la bataille, mais s'assurer également que vous avez préparé ces fichiers est la prochaine étape de cet important processus de diffusion Web.