JPG, GIF, PNG, quel format privilégier sur votre site e-Commerce ?

format-image-site-marchand
Conseils pour le graphisme d'un site eCommerce - choix du format pour les images produit

Les photos ont habituellement une taille importante et risquent fortement de ralentir votre site si vous les utilisez telles quelles. Bien qu'il n'existe pas de formule magique pour déterminer le meilleur type d’extension,  il y a tout de même quelques principes fondamentaux auxquels vous pouvez vous fier pour choisir le meilleur format lors de l'enregistrement de vos images.

 

La différence fondamentale entre les nombreuses extensions d'image est le résultat de leur compression. Prenons le .bmp, le .tif, et le .psd par exemple qui ne sont pas des formats compressés. Ces extensions génèrent des fichiers extrêmement lourds qui  ralentissent considérablement le téléchargement des images sur les navigateurs. Ils ne devraient donc tout simplement pas être utilisés pour les sites internet.

Les extensions dites compressées et qui sont les plus couramment utilisées sont le .jpg, le .gif et le .png. Prenez quelques minutes pour vous familiariser avec ces formats et comprendre leurs diverses utilisations…

 

Le JPG

 

L’extension  JPG (abréviation de Joint Photographic Experts Group) est le format de compression d'image qui fonctionne le mieux avec les photos et les images sophistiquées. Le JPG repose sur une méthode de compression qui supprime les couleurs qui ne sont pas visibles par l'être humain pour réduire la taille des fichiers. Soyez toutefois prudent. Si vous diminuez trop la qualité d'une image en JPG, vous perdrez des informations de couleurs visibles importantes qui ne peuvent pas être récupérées.

 

Vous avez peut-être déjà observé ce phénomène sur certains sitesles images perdent lentement leur flou et finissent par devenir progressivement plus claires. Le format JPG permet des sauvegardes en mode progressif. Les images se chargent alors graduellement.

 

Privilégiez le format JPG pour les photos de produits, les portraits humains et toutes les images qui comportent un nombre de détails important. En d’autres mots préférez ce format pour toutes les images où les nuances de couleur ont leur importance. Évitez au contraire les fichiers JPG si vous avez besoin de transparence, c'est-à-dire la capacité de voir à travers une image et de décrypter son arrière-plan, car le JPG n’autorise pas les effets de transparence.

 

Le GIF

 

Développé à la fin des années 1980 son utilisation est encore largement répandue. Le GIF (Graphics Interchange Format) permet de réduire potentiellement des milliers de couleurs provenant d'un appareil photo numérique à une gamme de 256 couleurs maximum.  Les GIF autorisent les effets de transparence et permettent en outre d'afficher une séquence d'images similaire à des vidéos. On parle alors de GIF animé. Ce n’est rien d’autre qu’une série d'images GIF distinctes reliées entre elles pour créer l'effet de mouvement, ou d'animation.

 

Le format GIF, tout comme le format JPG, peut s'afficher de manière progressive sur une page Web. On parle alors de GIF entrelacés qui sont des fichiers qui ont tendance à être légèrement plus lourds que les fichiers GIF classiques.

 

Le GIF est un format particulièrement bien adapté pour les images limitées en nombre de couleurs tels que les logos, les visuels et toutes les images pour lesquelles la transparence est importante. Évitez par contre le format GIF pour les photos de produits en couleur, les portraits humains et toutes les images où les nuances de couleurs ainsi que le raffinement des détails est important vu que le nombre de couleurs d'un GIF est limité à 256.

 

Bien que le format GIF continue d'être utilisé, il vaut mieux opter pour le format PNG, qui permet presque toutes ces fonctions en mieux.

 

Le PNG

 

Développé vers 1995 il a été recommandé par le W3C dès 1996 et la plupart des navigateurs l’ont adopté dès 1998. Pour la petite histoire, le format PNG (Portable Network Graphics) a été créé comme une alternative au format GIF, alors que la technologie du GIF était protégée par un brevet et nécessitait une permission pour l'utiliser. Le PNG permet une compression supérieure de 5 à 25 pour cent en comparaison avec l'extension .gif  tout en autorisant une gamme de couleurs plus importante. Tout comme le GIF, les PNG permettent également la transparence. Il est néanmoins important de garder à l'esprit que certains navigateurs très anciens supportent mal le PNG ou certaines de ses caractéristiques, comme la transparence.

 

Le PNG permet l'entrelacement tout comme le GIF, mais celui-ci est bidimensionnel, ce qui permet d'afficher les images progressives deux fois plus vite que les images en GIF.

 

Le SVG

 

Le format SVG (Scalable Vector Graphics ou Graphique Vectoriel Adaptable) mérite également d'être mentionné. Le SVG est un format web standard basé sur le XML qui prend en charge à la fois les images statiques et les animations en deux dimensions. La norme existe depuis plus d'une décennie, mais avec l'émergence récente de l'HTML5, il se pourrait que vous soyez amené à rencontrer de plus en plus fréquemment ce format. Retenez simplement que le SVG permet de créer des visuels de très haute qualité et des animations qui ne perdent pas en qualité quand leur taille augmente. En d'autres mots avec le format SVG, vous pouvez créer des images qui s'affichent tout aussi bien sur un minuscule écran de Smartphone que sur un écran d'ordinateur en 60 pouces.

 

Quel format utiliser et quand ?

 

Il est important de connaître les différents types d’extension d'images, la différence entre ces formats et quand les utiliser.

 

Pour commencer si votre image fait appel à un large éventail de couleurs, éliminiez immédiatement l’option d’enregistrement en GIF. Le PNG ou le JPG sont les meilleures extensions pour les images avec une palette de couleurs importante.

 

Le JPG est le format le mieux adapté pour les photographies ou les images contenant des éléments photographiés avec un nombre important de détails.

 

Le PNG est le format le mieux adapté pour les images comportant du texte, des graphiques, des captures d'écran et des illustrations détaillées.

 

Lors du choix du type d'extension à utiliser pour une image qui ne contient pas d'éléments photographiés, il vaut mieux privilégier les critères de la transparence et de la résolution. Pour une image composée par un nombre important de couleurs ou qui nécessite une transparence variable, le PNG reste donc le format de prédilection.



En général il est possible d'utiliser une image avec de la transparence lorsque vous souhaitez montrer la couleur de fond à travers votre image pour une raison quelconque. Exemple : Votre produit a été photographié sur un fond de couleur et vous procédez au "détourage" en remplaçant ce fond par un fond blanc dans un logiciel d'édition d'images. Vous préférerez donc un format PNG pour celle-ci.

 

 Il est préférable de prendre vos photos de produit sur un fond blanc pour ne pas gaspiller de temps dans le détourage des images.

 

Si votre image est composée de peu de couleurs et ne nécessite aucun effet de transparence avancée, optez pour le GIF. Gardez à l'esprit que toute utilisation de transparence devrait être testée dans plusieurs navigateurs au préalable afin de s'assurer que l'effet reste le même chez tous les internautes.

 

Enfin, si vous avez un doute sur le type d'extension à utiliser, il existe un test simple qui facilite la prise de décision. Dans votre logiciel d'édition d'images, enregistrez votre image sous les trois types d'extension et comparez le rapport taille du fichier / qualité de l'image entre les trois formats. Ceci permet de déterminer rapidement l'extension qui génère la meilleure qualité d'image pour une taille de fichier minimale.

 

Changer de format de fichiers.

 

Si vous ne disposez pas d’un logiciel d'édition d'images professionnel permettant l'importation et l'exportation dans différents formats, il existe désormais une pléthore d'alternatives gratuites qui permettent d'enregistrer les images dans des formats différents.

 

Si vous êtes un utilisateur de Windows, Microsoft Paint vous permettra d'ouvrir rapidement une image et de l'enregistrer sous une extension différente. Il s'agit d'un programme de base qui ne permet toutefois pas la transparence et sa capacité de compression n'égalera jamais celle de Photoshop. Mais il fera tout de même l'affaire pour des petits besoins rapides et en cas de dépannage. Pour les utilisateurs de Mac, il existe une alternative équivalente appelée Paintbrush.

 

Des solutions gratuites existent également pour les formats d'enregistrement d'images plus avancés comme GIMP, disponible à la fois pour Windows et Mac OS. Citons également Pixelmator disponible exclusivement pour Mac OS et Aviary, une suite créative en ligne.

 

Bien maîtriser les avantages des différents formats permet d'obtenir des images de meilleure qualité et d'améliorer le temps de chargement des pages, ce que les internautes et les moteurs de recherche ne manquent pas d'apprécier de nos jours.

 

ShopFactory dispose d'un puissant assistant pour faciliter la gestion de vos images. Le logiciel ajuste automatiquement la taille des photos et crée des vignettes liées à des aperçus en mode zoom pour accélérer les délais d'affichage des pages. Si vous avez par exemple pris une photo de produit à l'aide de votre appareil, il suffit de l'enregistrer directement sur votre ordinateur (de préférence avec un nom qui décrit cet article pour un meilleur référencement naturel). ShopFactory transformera le nom en titre - et se chargera de la compression de la taille et du format du fichier.