On rencontre essentiellement les formats PNG et SVG pour afficher les pictogrammes, ou les icônes sur les sites web. Cependant le choix du format d’image reste une question épineuse pour beaucoup d’entre nous.
En revanche, si on se pose la question suivant des critères de rapidité de chargement, d’amélioration du référencement, d’adaptabilité aux différents modes d’affichage la réponse converge vers le SVG.
PNG : Portable Network Graphics
Le format PNG stocke l’image sous forme matricielle (on parle de bitmap). Les images sont stockées pixel par pixel. PNG signifie Portable Network Graphics, l’image initiale est compressée afin d’alléger sa taille. Ce format a été proposé pour remplacer le format GIF dont la licence d’utilisation était alors propriétaire.
SVG : Scalable Vector Graphics
SVG signifie Scalable Vector Graphic. Le SVG stocke l’image sous forme vectorielle : l’image est explicitée par un texte structuré qui décrit de quoi est composée l’image (points, segments, cercles, couleurs…). Le fichier énonce comment sont organisés les éléments entre eux dans un format XML.
SVG vs PNG quelle format d’image privilégier pour votre SEO ?
SVG : taillé pour le responsive design
Dans SVG, le S de Scalable signifie adaptable. Il suffit par exemple de modifier la valeur du facteur d’échelle de l’image pour modifier sa taille d’affichage, sans pour autant dégrader la résolution de l’image.
Pour le format PNG, non seulement l’image initiale est déjà dégradée pour cause de compression, mais elle va poursuivre les dégâts à chaque nouvelle modification.
Si on réfléchit au temps de calcul pour effectuer cette transformation, une seule opération de multiplication suffit pour le SVG, alors qu’il faut un algorithme complet d’interpolation pour le PNG. SVG se plie avec souplesse à tous les modes d’affichage, il est donc le champion incontesté pour un site mobile friendly.
SVG : aussi léger qu’une plume
Nous avons pu le voir plus haut, le SVG est une description XML. Cet aspect technique est un point fort : mon image est en fait un texte.
Écrire dans un fichier une phrase, « cette image est un cercle noir de diamètre 50 pixels, inscrit dans un carré blanc de 100 pixels de côté », prend bien moins de place de stockage que la même image décrite pixel par pixel.
Voici donc le deuxième attrait du SVG par rapport au PNG, le poids des fichiers qui est bien plus léger d’autant que souvent les icônes et autres logos font appel à des formes élémentaires simples. De plus, on peut appliquer des compressions pour réduire l’arbre XML, et décupler le gain de temps de chargement des pages.
SVG : un gain de temps très apprécié par les intégrateurs
Les langages du web comme JavaScript permettent d’agir directement sur la DOM du fichier SVG pour modifier l’aspect visuel, aussi bien côté client que côté serveur. Une pléiade de bibliothèques existe dans la plupart des langages, permettant des effets visuels spectaculaires. Moins impressionnant mais tout aussi utile, cela permet au CSS de modifier la taille de l’image lors du passage de la souris en une seule ligne de code.
Elle est pas belle la vie ?
SVG : mon compagnon dans ma stratégie SEO
Le document SVG est un texte lisible par un humain, mais aussi et surtout par les robots de GOOGLE. Cela vous offre l’opportunité de glisser dans le descriptif de l’image des mots clés qui vont permettre d’optimiser votre référencement naturel, et ainsi contribuer à améliorer la visibilité de votre site internet sur les moteurs de recherche.
En conclusion…
Pour toutes ces raisons vues précédemment, Nous conseillons à ceux qui construisent le web d’utiliser le format SVG pour les logos, pictogrammes et autres illustrations simple. C’est un format qui a été pensé dès le début pour le Web et qui garde sa valeur primaire au gré des évolutions.
Vous souhaitez créer un site SEO friendly qui respecte les codes du référencement naturel ?
Ou bien vous désirez optimiser votre site actuel pour améliorer vos positions dans les moteurs de recherche ?
Faites appel à nos services ! Nos trois pôles d’expertise : Créatif, Référencement et développement web travaillent en étroite collaboration pour faire de votre projet une réussite.
En particulier, nous vous proposons notre expertise en SEO pour vous permettre de positionner vos pages web au mieux sur Google et ainsi, acquérir du trafic plus nombreux et plus qualifié ! N’hésitez pas et contactez-nous !
Consultez nos livres blancs si vous souhaitez en apprendre toujours plus sur le référencement naturel. Vous avez notamment le livre blanc « Bien rédiger pour le web ? » qui vous apporte des conseils sur l’aspect éditorial ainsi que le livre blanc « Livre Blanc SEO – Développer mes positions sur Google » qui vous apporte une vision plus généraliste du sujet si vous débutez. Vous pouvez accéder à l’ensemble de nos articles sur le Articles Référencement Naturel SEO.
Appelez le 01.47.10.11.12 pour nous exposer votre problématique.
