Quel format d'image favoriser sur mon site ?

jpg, png, gif, svg... tant de formats possibles ! Comment s'y retrouver et faire un choix parmi toutes ces options qui s'offrent à vous ? 

Quels sont les formats d'image dominants

Le jpg (ou jpeg) : 

JPEG est l’acronyme de Joint Photographic Experts Group.  La norme communément appelée JPEG, est le résultat de l’évolution de travaux qui ont débuté dans les années 1978 à 1980 avec les premiers essais en laboratoire de compression d'images. Le jpg est utilisé ainsi depuis plus d'une trentaine d'années et reste toujours un choix non négligeable pour les images mises en ligne. 

Le gif :

Le Graphics Interchange Format (littéralement « format d'échange d'images »), plus connu sous l'acronyme GIF, est un format d'image numérique que l'on retrouve souvent sur le web (notamment sur les anciens sites). Le gif est l'un des deux premiers formats à être supporté en 1993 par un navigateur. 

Le png :

Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé pour remplacer le format GIF qui était sous licence à cette époque (fin des années 1990). Le PNG est un format sans perte spécialement adapté pour publier des images simples comprenant des aplats de couleurs. PNG est une spécification pour Internet et l’objet d’une Recommandation W3C. 

Le svg :

Le Scalable Vector Graphics, ou SVG, est un format de données conçu pour décrire des ensembles d'éléments vectoriels basé sur le langage XML. Le SVG a été développé à partir de 1999 par un groupe de sociétés au sein du W3C. Il permet d'avoir une image vectorielle en ligne. 

Du coup quel format d'image choisir pour votre site web ?

Tout va dépendre de quel type d'images vous voulez mettre sur votre site et quel public vous avez défini comme cible. Explication :

• Le meilleur format de tous ceux cités est bien évidemment le svg UNIQUEMENT si vous n'utilisez pas de photo. Léger et adaptable à n'importe quel format d'écran, il ne sera jamais pixellisé et s'affichera toujours en un temps record. Néanmoins si votre public cible est d'un âge moyen ou supérieur, pensez à éviter le svg un maximum.
  
  Pourquoi ? Les anciens navigateurs ne l'intègrent pas ou mal et le public d'un âge plus avancé est très attaché à internet explorer et n'aime pas du tout mettre à jour les navigateurs, leur phrase préférée étant : 'c'est certainement un virus !'

• Le jpg est une excellente alternative si vous avez de belles photos HD à mettre sur votre site en 100% de largeur et que vous désirez garder un maximum de qualité (évidemment vous devrez enregistrer votre image avec la taille en conséquence).
  
  L'inconvénient est que votre page va charger pendant un petit moment et que vous risquez de perdre les internautes les plus pressés. Une solution à ces longs temps de chargement est d'installer un loader (petite roue qui tourne ou barre de chargement), que l'utilisateur sache au moins qu'il y aura quelque chose qui apparaîtra s'il attend assez longtemps. Si votre image contient un fond transparent dont vous avez besoin pour le design de votre page, n'utilisez pas le jpg, il ajoute automatiquement du blanc dans vos zones non complètes. 

• Le png, format favori du W3C est un excellent choix. Le png propose une bonne qualité, une transparence prise en compte et il est accepté par les navigateurs depuis très longtemps (comme le jpg d'ailleurs !). Ce format d'image permet d'avoir un bon équilibre entre qualité et temps de chargement de la page. En effet beaucoup de logiciels, comme Adobe Illustrator vous proposeront des options comme "enregistrer l'image pour le web" et sélectionneront png comme format par défaut. Le png peut être utilisé aussi bien pour les photos que pour les logos, privilégiez le png au svg si votre public est d'âge moyen ou supérieur. 

• Le gif. Ceci est peut-être un avis personnel, mais le gif est un format qui n'est pas à favoriser. Il est certes léger, adaptable à tous les navigateurs peu importe leurs versions etc... mais le gif au moment de la compression d'image vous fait perdre une qualité généralement non négligeable. Vous me direz alors : oui mais le gif permet de faire des animations ! Et là tout simplement je vous réponds : le svg permet de faire des animations et tout cela aussi simplement qu'on ferait du CSS. D'autant plus qu'avec l'apparition du CSS3 et de toutes les possibilités de jquery, il est rare que vous ne trouviez pas votre bonheur d'animation facilement. Le seul cas où j'utiliserais éventuellement le gif serait sur une animation destinée à un public âgé, qu'il m'est impossible de réaliser avec jquery ou qui me prendrait trop de développement en javascript (le javascript peut ralentir votre chargement de la page).

Conclusion

Si vous n'êtes pas certain du format d'image à chosir et si vous n'êtes pas certain de votre public cible, le moyen le plus sûr de ne pas rater vos images est de toutes les enregistrer en format png. Si vous cherchez à faire des sites à la tendance actuelle du flatdesign alors n'hésitez pas à enregistrer toutes vos images en svg. Si vous êtes plutôt un photographe, le jpg est fait pour vous. Le gif est un format qu'on verra de moins en moins et qui sera peu à peu amené à mourir, il est pour cela moins intéressant à utiliser que les autres et il vaut mieux l'éviter.

Articles Connexes :

-Vous êtes plutôt Javascript ou CSS3 ?

-Utilisation du Responsive Web Design

-Pourquoi créer un site internet pour mon entreprise ?