Aller au contenu

Pourquoi privilégier le format SVG pour un site internet plus écologique ?

Présenter son produit ou son service à travers une photographie semble la façon la plus optimale de le promouvoir, mais avez-vous pensé à l’illustration au format SVG ? Dans cet article, nous allons voir comment l’utilisation d’illustrations peut être synonyme d’écoresponsabilité et comment, au delà de l’aspect écologique, il s’agit d’un véritable avantage pour votre marque !

Quel est l’impact des photos (PNG et JPG) sur votre site web ?

Lorsque l’on crée un site web, après la question du contenu textuel, ce que vous voulez raconter ou expliquer, vient la question du design. C’est lui qui va habiller et structurer tout ce contenu pour le rendre agréable à découvrir… et à retenir ! Avoir une forte image de marque, en passant notamment par le visuel, est donc essentiel pour faire fonctionner votre business, qu’on le retienne et le reconnaisse.

Bien souvent, nous pensons donc à inclure des images à ce webdesign afin d’illustrer nos propos et d’immerger l’utilisateur : photos des lieux, de l’équipe, des produits, etc. C’est une excellente idée car cela permet à vos visiteurs de se projeter facilement dans votre univers de marque. Cependant, le format SVG constitue une alternative qui vaut tout autant le détour et s’avère posséder de nombreux avantages, pour pallier aux défauts des images. ?

Les inconvénients des photographies :

Qu’elles soient en JPG ou en PNG, les images sont bien plus lourdes que nécessaire. Pourquoi ? Car elles sont composées de nombreux pixels qui alourdissent le poids du fichier. Plus il y a de pixels, plus la taille de votre photo sera grande, et donc plus elle sera lourde. Importer des fichiers lourds sur votre site va allonger la durée de chargement des pages. Ce joyeux mélange a pour effet :

  • de faire bugger vos pages en interférant dans leur chargement,
  • de détériorer l’expérience utilisateur en conséquence,
  • d’impacter négativement votre SEO (il s’agit du référencement naturel qui vous permet d’améliorer visibilité de votre site web sur Google et autres moteurs de recherche).

En bref, ce n’est pas génial… La solution ? Opter pour des éléments au format SVG (illustrations, graphiques, formes…) plutôt que des photos. ?

[et_pb_section fb_built= »1″ _builder_version= »4.9.4″ _module_preset= »default » background_image= »https://agence-coam.fr/wp-content/uploads/2020/12/agence-coam-communication-responsable-lyon-feuilles.svg » background_size= »initial » background_position= »top_left » width= »100% » width_tablet= » » width_phone= »100% » width_last_edited= »on|phone » max_width= »100% » module_alignment= »center » locked= »off » global_colors_info= »{} »][et_pb_row make_equal= »on » custom_padding_last_edited= »on|phone » _builder_version= »4.9.11″ _module_preset= »default » background_color= »#FCF6EE » width_tablet= » » width_phone= »90% » width_last_edited= »on|phone » max_width= »100% » max_width_last_edited= »off|desktop » module_alignment= »center » custom_padding= »4rem|6rem|4rem|6rem|true|true » custom_padding_tablet= » » custom_padding_phone= »4rem|2rem|4rem|2rem|true|true » border_radii= »on|30px|30px|30px|30px » global_colors_info= »{} »][et_pb_column type= »4_4″ module_class= »centrer-verticalement » _builder_version= »4.7.7″ _module_preset= »default » global_colors_info= »{} »][et_pb_text _builder_version= »4.9.4″ _module_preset= »default » text_font= »|||||||#f6ac6f|solid » text_font_size= »18px » background_enable_color= »off » module_alignment= »left » custom_margin= »||0px||false|false » custom_padding= »||0px||false|false » locked= »off » global_colors_info= »{} »]

Découvrir notre prestation

[/et_pb_text][et_pb_text _builder_version= »4.9.4″ _module_preset= »default » text_text_color= »#f6ac6f » text_font_size= »18px » header_2_font= »Philosopher|700||||||| » header_2_font_size= »45px » header_2_font_size_tablet= » » header_2_font_size_phone= »40px » header_2_font_size_last_edited= »on|phone » global_colors_info= »{} »]

Illustrations

[/et_pb_text][et_pb_text _builder_version= »4.14.7″ _module_preset= »default » header_3_font= »Philosopher|700|||on|||#f6ac6f| » header_3_text_color= »#054137″ header_3_font_size= »20px » hover_enabled= »0″ global_colors_info= »{} » sticky_enabled= »0″]

Vous souhaitez faire appel à notre agence pour la création d’illustrations personnalisées ? 

[/et_pb_text][et_pb_button button_url= »@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjE4OSJ9fQ==@ » button_text= »Découvrir » button_alignment= »center » button_alignment_tablet= » » button_alignment_phone= »center » button_alignment_last_edited= »on|phone » _builder_version= »4.14.7″ _dynamic_attributes= »button_url » _module_preset= »default » custom_button= »on » button_text_size= »18px » button_text_color= »#054137″ button_bg_color= »RGBA(10,0,0,0) » button_border_width= »1px » button_border_color= »#F6AC6F » button_use_icon= »off » custom_padding= »0.5rem|1.6rem|0.5rem|1.6rem|true|true » hover_enabled= »0″ locked= »off » global_colors_info= »{} » button_bg_color__hover_enabled= »on|hover » button_bg_color__hover= »#054137″ button_bg_enable_color__hover= »on » button_text_color__hover_enabled= »on|hover » button_text_color__hover= »#FFFFFF » button_border_width__hover_enabled= »on|hover » button_border_color__hover_enabled= »on|hover » button_border_color__hover= »#054137″ button_border_width__hover= »1px » sticky_enabled= »0″][/et_pb_button][et_pb_button button_url= »@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI0MzYifX0=@ » button_text= »Planifier un appel découverte » button_alignment= »center » button_alignment_tablet= » » button_alignment_phone= »center » button_alignment_last_edited= »on|phone » _builder_version= »4.14.6″ _dynamic_attributes= »button_url » _module_preset= »default » custom_button= »on » button_text_size= »18px » button_text_color= »#054137″ button_bg_color= »#F6AC6F » button_use_icon= »off » custom_padding= »0.5rem|1.6rem|0.5rem|1.6rem|true|true » locked= »off » global_colors_info= »{} »][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section]

Quels sont les avantages à utiliser le format SVG ?

Sur le site de Cōam vous ne retrouverez presque que de ça. Des illustrations dites “vectorielles”, qui sont composées de vecteurs et non de pixels comme les photos que nous réalisons sur le logiciel Adobe Illustrator.

photo format jpg ou png
Image matricielle – pixel (format JPG ou PNG)
illustration format svg
Image vectorielle (format SVG)

Étant créées numériquement et composées de lignes de code, les illustrations vectorielles offrent de nombreux avantages, écologiques mais pas que !

1. Rapidité et légèreté

Étant plus légères, les illustrations SVG vont charger beaucoup plus rapidement que les photos. Votre site gagnera alors en vitesse et fluidité, ce qui le rendra plus agréable à parcourir pour vos visiteurs.

2. Qualité optimale

Les images au format SVG ont aussi l’avantage de pouvoir être indéfiniment agrandies… sans perte de qualité ! La taille des photos n’est plus un problème.

3. Adaptabilité et originalité

Elles s’adapteront à tous vos supports (site internet, post sur les réseaux sociaux, story, plaquette, carte de visite, etc…) et pourront même être animées. En bref, elles sont très facilement modifiables et le champ des possibles est ouvert grâce à ce format !

En plus d’une forte diversité, dessiner son produit ou service plutôt que de le prendre en photo (par exemple) apporte une toute autre vision de l’objet et une belle touche d’originalité. C’est un moyen de révéler singulièrement l’essence de votre marque et de vos créations.

4. Référencement optimisé

Qui dit site plus léger, plus rapide et lignes de code (pouvant être lues donc) dit un meilleur référencement de votre site internet sur les moteurs de recherche. Et oui, plus un site répond à ces caractéristiques et plus il sera mis en avant par Google et ses confrères.

5. Proximité

Tout comme le choix d’une police d’écriture manuscrite au lieu d’une plus traditionnelle, choisir une illustration n’apporte pas le même effet qu’une photographie. Contrairement à ce que l’on pourrait penser, l’image au format svg donne plus d’affect à votre marque : on s’identifie naturellement plus à une illustration qu’une photo léchée sur papier glacé. Par exemple, dans un roman, c’est via les descriptifs que l’on s’imagine les personnages. Un dessin c’est un peu une description de l’objet quand une photographie en est sa représentation. On est donc plus sensible à une illustration, car elle fait appel à notre imaginaire. ?

6. Le sur-mesure

Chez Cōam, les illustrations sont 100% personnalisées. Vous voulez une plante, une maison ou même un éléphant à côté de votre produit ? C’est possible ! ?

photo café format jpg
Photographie – format jpg : 435 Ko
illustration café format svg
Illustration vectorielle – format SVG : 4 Ko

Note : les illustrations ne correspondent pas aux besoins de TOUTES les marques. C’est à définir ensemble, notamment à travers la stratégie et la définition des valeurs de votre marque.

En bref, le format SVG est fait pour vous si vous souhaitez un site web moins lourd, plus rapide, unique et surtout plus écoresponsable ? À vous les visuels singuliers et identifiables, pour tous vos supports !


Seriez-vous prêt(e)s à sauter le pas et utiliser des illustrations plutôt que des photos ? ?

Article co-écrit par Clarisse & Léa.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *