Guide complet des images pour votre communication.
Guide

L'ABC de l'image en ligne : Guide pratique pour utiliser efficacement les images sur votre site web

A force de vous donner tous mes conseils sur les réseaux sociaux, il était temps de vous résumer tout cela sur un seul article de blog. Voici donc le « guide ultime » qui regroupe tout ce qu’il faut savoir au sujet des images pour votre site web, votre market-place ou vos réseaux sociaux.


1. Lois sur les images en ligne : points essentiels à connaître

Dans un premier temps, attention à respecter les droits d’auteurs et de propriété intellectuelle et à ne pas télécharger vos photos n’importe où.

Trouver l’image idéale sur Google peut sembler simple, mais il est crucial de prendre en compte les droits d’auteur et la propriété intellectuelle. En effet, même une image apparemment anodine peut être la propriété d’un individu tel qu’un graphiste, un photographe ou une créatrice.

Ainsi, ne récupérez pas des images sur Google, Pinterest ou les réseaux sociaux, ça n’est pas légal. Les images appartiennent toujours par défaut à quelqu’un. Il faut donc s’assurer de la source pour taguer cette personne, et lui montrer que vous reconnaissez son travail.

Je veux en savoir plus sur la propriété intellectuelle et les droits d'auteur.
Galerie photo

2. Les banques d'images

Il existe plusieurs banques d’images en ligne où vous pouvez télécharger des images gratuites ou sous licence pour les utiliser sur votre site. Voici quelques exemples populaires :

Avant d’utiliser une image à partir de ces sites, assurez-vous de lire et de comprendre les termes de licence associés à chaque image. Certaines images peuvent être gratuites à utiliser à des fins personnelles et commerciales, tandis que d’autres peuvent nécessiter une attribution ou être soumises à des restrictions spécifiques. Il est important de respecter ces conditions pour éviter tout problème lié aux droits d’auteur.

Côté intégration, il est possible d’installer un plugin sur WordPress si vous avez besoin régulièrement d’images pour votre blog.
Cela peut s’avérer utile lorsque l’on a un blog de voyage, de mariage ou de cuisine par exemple.

Voici une liste non exhaustive :

  • Unsplash for WordPress : Ce plugin officiel d’Unsplash permet de rechercher et d’importer des images haute résolution directement depuis l’interface d’administration de WordPress. Unsplash for WordPress
  • StockPack : StockPack est un plugin qui vous permet de rechercher et d’importer des images gratuites à partir de différentes sources, y compris Unsplash. StockPack
  • Pexels Importer : Ce plugin vous permet de rechercher et d’importer des images gratuites depuis Pexels directement dans votre bibliothèque de médias WordPress. Pexels Importer
  • Instant Images : Instant Images propose une collection d’images gratuites pour une utilisation immédiate sur votre site WordPress. Instant Images
  • WP Unsplash : Un autre plugin qui vous permet d’accéder à la vaste bibliothèque d’Unsplash directement depuis votre tableau de bord WordPress. WP Unsplash

Comme pour les banques d’image, assurez-vous de respecter les termes et conditions d’utilisation  provenant des banques d’images, et de vérifier les paramètres de licence pour chaque image que vous téléchargez.


3. Les différents formats d'images à connaitre

Afin de bien mettre en valeur votre contenu (article de blog, produits sur votre e-commerce, etc.) vous aurez surement besoin de définir un format.

Voici les principales mentions que vous pouvez rencontrer :

  • 1:1 ou square : le format carré,
  • 4:3 en paysage ou en portrait : format « standard » dans le sens horizontal ou vertical,
  • 9:16 ou format smartphone : pour les stories ou reels Instagram par exemple,
  • 16:9 ou « grand écran » : pour les slider, carrousel de sites ou vidéo en pleine page sur votre site.
ratios d'images

restrospectives de sites créés en 2023 par Bedesigned.
L'enregistrement en gif permet de créer des animations d'images

4. Quelle extension d'image pour quelle utilisation ?

Parmi les extensions les plus utilisées, il y le jpg (ou jpeg) et le png.

  • le jpg : plutôt destiné aux fichiers images/photo sera idéal pour vos réseaux sociaux, contenus de « petit » format optimisé pour le web. Il est « léger » et pourra très bien convenir pour vos photos de produits sur WordPress par exemple.
    S’il a l’avantage d’être facile à convertir, à intégrer à tous vos supports et logiciels de traitement de texte par exemple, il ne gère toutefois pas la transparence… et c’est là le gros point de différence…
  • le png : beaucoup plus gourmand et lourd, quant à lui sera plutôt votre ami pour vos logos, graphismes et illustrations. D’une meilleure qualité au rendu, vous pourrez en plus utiliser icônes et graphiques où bon vous semble.

Mais vous pourrez aussi retrouver ces extensions et seront à privilégier en fonction de votre utilisation :

  • le tiff : est le format de plus grande qualité. Il est souvent apprécié par les photographes ou les artistes peintre qui souhaitent enregistrer leur travail dans la meilleure des qualités, sans perte, avant de procéder à des retouches (ou détourages par exemple). Il est toutefois aussi le format le plus lourd.
  • le svg : c’est un format plutôt destiné au vectoriel pour des icônes, logo ou illustrations destinées au web. Le format svg, permet une réduction ou augmentation à l’infini sans pixellisation.
  • le gif : couramment utilisé pour l’enregistrement d’animation, le gif est très populaire sur les réseaux sociaux, mais peut-être aussi employée lorsque l’on souhaite tout simplement animer une séquence de photos.

Enfin, un nouveau type de fichier commence peu à peu à se joindre à ces extensions : le WebP.
Ce format développé par Google propose des images de qualité supérieure, riches, et ce, dans un format plus compact que le PNG ou le JPEG. En fusionnant et en améliorant les caractéristiques les plus avantageuses de ces deux formats, il offre une compression avancée avec et sans perte.

L’optimisation de la taille des fichiers d’image est essentielle pour accroître les performances d’un site. Le format WebP permet d’atteindre cet objectif sans compromettre la qualité visuelle, ce qui en fait une option idéale pour de nombreux sites web.

Heureusement, sur WordPress, de nombreux plugin d’optimisation comme Optimize ou LiteSpeed permettent de convertir vos images déjà en place sur votre site, au format WebP. Il suffit de cocher la bonne case dans les réglages.


5. Les outils indispensables pour vos images

Bien sûr, une fois vos images, téléchargées, achetées ou faites par vos soins, il n’est pas question de les utiliser directement en ligne.

Il vous faudra peut-être les optimiser, les retailler ou les redimensionner :

  • optimiser pour alléger leur poids et la rapidité d’affichage sur votre site (qui peut impacter votre référencement si vos images sont trop lourdes),
  •  retailler pour passer par exemple d’un format paysage à un format 1:1 carré,
  • ou redimensionner pour réduire la taille d’une image en gardant l’homothétie (les proportions). Rien ne sert d’avoir une image de 4000 px pour vos fiches produits sur votre site, qui demande au max 1500 px.

Ces outils pourraient vous être utiles :

  • Canva : appli en ligne qui permet de créer des images dans le bon ratio rapidement par exemple,
  • Photopea : version équivalente à Photoshop, mais gratuit, pour optimiser, retailler, redimensionner ou retoucher vos photos.
  • Tiny png : pour alléger le poids de vos photos. Pour rappel, sur WordPress (et autres sites) on vous recommande des fichiers qui pèsent entre 200 et 300 ko (800 ko max ! 1Mo, c’est déjà trop !).
  • Convertio : pour convertir toutes sortes d’extension de fichiers.
outils de retouche et optimisation d'images

l'accessibilité sur le web

6. SEO et images, quelles sont les bonnes pratiques ?

Pour le référencement de votre site, mais également pour vous aider à retrouver vos images sur votre pc, il est primordial de les renommer :

  • utilisez des minuscules et pas de caractères spéciaux (oubliez les é, à, ù et ? & ! % ….)
  • adoptez des « mot-clés » de type « etiquette-bapteme-jungle.jpg »,
  • ajoutez un chiffre à la fin de votre image si vous en avez plusieurs de la même série : « etiquette-bapteme-jungle-1.jpg »,
  • séparez les mots par des tirets – ou des underscores _

En ce qui concerne le SEO, Google est un aveugle, il a donc besoin que vous lui décriviez votre image dans un champ qu’on appelle « une balise alt » ou « balise alternative ».
Cette balise est utilisée pour le référencement, mais aussi, et c’est d’autant plus important, pour l’accessibilité.
Les déficients visuels s’aident parfois d’une commande vocale qui lit le texte et les images qui défilent sous leur souris.
L’accessibilité est aussi un critère important pour Google.
Vous ne pourrez donc que gagner des points en remplissant correctement ce champ.

À noter que sur Pinterest aussi, vous avez la possibilité de rentrer du texte dans une balise Alt. Pinterest n’étant pas un réseau social, mais bien un moteur de recherche, cette option a été déployée il y a déjà plus d’un. Prenez donc l’habitude de le faire.