Les bonnes pratiques pour gérer les images de votre site web

Chez Yapla, nous aimons aider les associations à avoir une communication efficace et percutante. Avec la démocratisation des outils numériques, proposer un site web convaincant pour son organisme est devenu primordial.

Trouver de belles images pour votre Association

Les images présentes sur un site web sont un élément à ne pas négliger. Elles permettent aux visiteurs de découvrir l’univers de votre association et d’avoir envie de rejoindre votre organisme. Soyez sans crainte car nous avons une bonne nouvelle pour vous ! Il existe des banques d’images gratuites en ligne permettant de répondre à ce besoin. Voici notre sélection :

 

Unsplash

Avec plus d’un million d’image haute définition gratuites proposées par une communauté de photographes du monde entier, Unsplash est rapidement devenu une référence. Si le coeur vous en dit, pensez à créditer l’auteur(e) de la photographie téléchargée. Conseils : effectuez vos recherches avec des termes en anglais pour trouver votre bonheur.


Pexels

Cette banque d’image propose un choix complet de photos et vidéos. Pexels regroupe des clichés issus de différentes banques d’images. Cerise sur le gâteau, ou le sundae, vous pouvez effectuer vos recherches en français.


FlatIcon

FlatIcon propose une très grande bibliothèque d’icônes dont la majorité est disponible gratuitement. Le site propose des packs thématiques permettant d’obtenir rapidement un ensemble cohérent. Une attribution à l’auteur est demandée avec un compte gratuit. 

 

Choisir le format adapté

Il est important de connaître le format le plus adapté lors du choix de vos images et de leurs intégrations sur votre site web. Pour faire au plus simple, nous allons voir ensemble les deux formats les plus courants:


JPG

Il est le plus utilisé sur la toile depuis de nombreuses années. Ce format est à privilégier pour les images avec un fond et de nombreuses couleurs. 


PNG

Il faudra utiliser le format PNG si votre image comporte une zone de transparence/opacité. Aussi, il faut retenir que le format PNG est souvent choisi pour intégrer les logos ou les graphiques comportant des lignes et du texte car il permet une image plus nette et moins baveuse que le format précédent.

 

Optimiser vos images pour votre site web

L'optimisation des images est une étape importante et souvent négligée. Elle permet d’avoir un site web plus rapide et mieux référencé. Voici nos 3 recommandations :  


Redimensionner vos images

Pour éviter des problèmes d’affichage et de vitesse, pensez à redimensionner vos images avant de les intégrer sur votre site web.


Compresser vos images

Gardez en tête que la majorité de vos visites seront réalisées sur des appareils mobiles. Or, il est important que la page soit le plus légère possible. la compression des images une façon très efficace de réduire la taille d'une page web et son temps de téléchargement. 

 

Vous pouvez utiliser un outil en ligne comme Compressor ou TinyPNG pour réduire le poids de votre image afin d’améliorer le chargement de votre site web.


Renommer vos images

Avant d’importer vos visuels sur votre site web, il est important de prendre le temps de renommer l’ensemble de vos images :

  • Vous aurez plus de facilité à les retrouver le moment venu ;
  • Les images renommées permettront un meilleur référencement ;
  • Vous contribuerez à rendre Internet plus accessible pour les personnes avec une déficience visuel ou autres.

Optimiser mes images selon son utilisation

Selon l'utilisation de l'image, Les bonnes pratiques varient. Si vous avez besoin de plus d'informations sur les modules de Yapla, lisez cet article: Liste des modules de la fonctionnalité site web.

 

Dans tous les cas, si vous souhaitez maximiser la résolution de votre image , vous pouvez importer une image deux fois plus grande que la taille désirée (3840px pour une bannière par exemple) et bien entendu la compresser avec les outils mentionnés plus haut. 

 

Zone image

La zone image est parfaite pour afficher et redimensionner toute taille d'image car ces options sont dans le module. Si la taille n'est pas définie dans le module, elle prendra 100% de sont conteneur. Or, si l'image est dans une zone 50% dans votre page elle prendra 50% de la largeur de la page. 

 

Images de mes articles multiples ou en vedette

Le mot d'ordre lorsqu'on a des images en vue liste, c'est la constance. Si chacune des images de vos articles sont de la même taille, l'affichage en vue liste sera beaucoup plus uniforme.

 

Bannière

Votre bannière risque d'être l'image la plus grande de votre site web. Gardez en tête que la taille d'écran d'ordinateur la plus rependue est : 1920x1080. Or une bannière d'une largeur de 1920px au minimum est une bonne pratique. 

 

Favicon

Le favicon n'a pas besoin d'être plus gros que 16px par 16px. 

 

Conclusion

Nous avons vu ensemble plusieurs bonnes pratiques et outils afin d’optimiser les images sur votre site web. Vous avez maintenant les cartes en main pour trouver de belles images, choisir le format adapté et les optimiser avant de les intégrer sur votre site web. Si toutefois des questions persistent, n’hésitez pas à réserver un créneau pour une démonstration ou aide technique ici.

Cet article vous a-t-il été utile ?

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.