Les images (ou les photos) jouent des rôles prépondérants pour un site web digne de son nom. Aucun autre élément d’un site ne peut remplacer une image pour donner un visuel attrayant.
Mais les images ou les photos ne sont pas que des éléments de décoration. Elles permettent aux visiteurs de comprendre rapidement ce qu’un site présente dans son contenu.
Il y a encore de nombreuses raisons importantes d’utiliser des images dans un site, mais ce qu’on vient de voir suffit de conclure qu’elles sont irremplaçables et qu’il est temps de mettre les points sur les « i » (images je veux dire).

Si auparavant, vous ajoutiez à votre site vos images prises à partir de votre appareil, après les avoir retaillées, à partir d’aujourd’hui vous pourrez les faire plus efficacement.

La taille d’une image est importante

Pour satisfaire la compatibilité d’un site avec tous les appareils (petits et grands écrans), on aura besoin d’avoir une image ou une photo de taille assez grande, surtout si on veut en faire une image de fond.
Si vous utilisez une petite image, celle ci va être pixélisée sur un écran plus grand.
Donc si on veut encore travailler l’image on aura besoin d’une image de taille de 2Mo ou d’au moins 1Mo.

Début de l’optimisation : veille sur la qualité de l’image

Qu’elle soit prise à partir d’un appareil, ou créée avec un logiciel, une image doit être optimisée avec un logiciel de traitement d’image, bien sûr si elle ne l’est pas encore.

Pour ce faire, ouvrir l’image avec Photoshop ; la recadrer pour avoir la taille souhaitée ; et enfin l’étape la plus importante, l’exporter en format « jpg » (le format le plus correct pour un site si on n’a pas besoin de transparence). Dans cette dernière étape, avant de finaliser l’export de l’image, ne pas oublier de cocher l’option « Progressif » qui permettra à l’image, une fois ajoutée au site, de s’afficher progressivement et sans attendre d’être toute chargée ; on doit aussi faire varier l’option de qualité de l’image, de « faible » à « Maximum » jusqu’à obtenir un poids inférieur mais à la qualité inchangée.
Quand tout est « OK », terminer l’enregistrement de l’image.

Avec cette méthode, notre image aura la taille idéale avec un poids réduit.
Il y a d’autres techniques de compression et d’optimisation d’image qui vous sont proposées sur Internet. C’est à vous de voir ! Avec cette méthode vous avez l’avantage de pouvoir personnaliser et voir vous-même la qualité de votre image.

PS : Choisissez bien le nom de votre image ! Evitez les caractères spéciaux !

Optimisation d’une image sur le site

Plusieurs techniques sont disponibles sur Internet pour afficher correctement une image dans une page d’un site. Le but est d’avoir la bonne taille sur chaque écran d’un visiteur, et de l’afficher le plus rapidement possible.
Pour ce faire, il faut jouer sur les dimensions de l’image. Oui, on peut faire cela ! Avec une feuille de style du site, ou directement dans la balise de l’image.

* Dans une feuille de style, vous pouvez faire comme suit :

#votreimage { width :100% ; height :auto} où #votreimage est l’id de votre image

* Directement dans la balise de votre image :

<img src= »adresse de l’image » title= »titre image » alt= »nom image » width= »100% » height= »auto »/>

Seuls « Width » et « Height » nous intéressent dans les deux cas : width est la largeur de l’image et a la valeur 100%, elle va donc remplir toute la largeur de son container ; height indique la hauteur qui sera calculée automatiquement en respectant la proportionnalité des dimensions.

Vous comprendrez vite que l’on peut faire autre chose que 100% : 60%, 30%, ou bien avec des valeurs précises : width :500px, height : 250px, etc.
Mais puisque nous sommes dans une phase d’optimisation d’image, nous devons utiliser uniquement les valeurs en pourcentage.

Conclusion

Pour gagner votre référencement, n’hésitez pas à utiliser (ou à tester) toutes les techniques qui vous sont offertes, tout en réfléchissant, et travaillez bien vos images.