291 Millions D'euros Levés Par Les Startups Françaises - Semaine 15 - 2024
Comment utiliser les images sur le site web de votre entreprise ?
Une bonne utilisation des images sur votre site web est essentielle : un plus grand nombre de personnes verront votre site, percevront un aspect plus professionnel de votre entreprise et vous aurez ainsi plus de chances d'augmenter vos ventes.
Finalement, vous gagnez en visibilité, en confiance de vos prospects, et vous développez votre entreprise. Toutefois, il existe certaines règles d’utilisation des images à connaître avant de publier le site web de votre start-up. Lisez cet article afin d’éviter les erreurs qui pourraient impacter votre succès.
Choisir des images originales et attrayantes
Les images ont un grand potentiel pour stimuler les utilisateurs et attirer l'attention sur vos produits ou services. Autant de raisons de prendre garde à sélectionner des images attrayantes et originales qui vous aideront à vous démarquer de la concurrence et à devenir le choix privilégié des internautes pour satisfaire leurs besoins.
Pensez à inclure des images représentant des personnes réelles, car ce sont les images les plus persuasives pour les visiteurs. Les yeux de la personne jouent également un rôle important, puisqu’ils permettent de guider l’internaute vers le texte que vous souhaitez lui faire lire. Dans tous les cas, l’objectif est d’illustrer clairement l’offre de votre entreprise avec des images uniques qui attirent le regard. Pour travailler efficacement le design de vos photos, vous disposez de ressources en ligne vous permettant de modifier facilement une image pour la rendre la plus originale possible comme Adobe Creative Cloud Express qui vous permet de retirer l’arrière-plan d’une photo en une étape simple, ou d’y ajouter d’autres formes et couleurs.
Optimiser ses images pour le web
Les images sont également un critère utilisé par les moteurs de recherche et permettent ainsi d'améliorer le positionnement de votre site web dans les résultats de recherche. Par conséquent, vous pouvez effectuer des actions qui améliorent votre référencement grâce aux images.
Pour cela, il convient de toujours renseigner les sections Title et Alt de chacune des images de votre site web, et d'utiliser des mots-clés liés à votre activité qui soient représentatifs de l'image en question.
La taille de l’image doit également être optimisée afin de ne pas allonger le temps de chargement de la page. Ce sont les pixels qui déterminent la taille d’une image, soit la hauteur et la largeur. Notez que chaque centimètre correspond à 32 pixels, et plus il y a de pixels, plus l’image sera lourde, et plus elle ralentira votre site web.
Un autre élément détermine le poids d’une image : la résolution. Il s’agit de la qualité de l’image, qui dépend du nombre de pixels par pouce. Avec une résolution appropriée à l’écran, le poids de l’image sera considérablement réduit.
Quel format choisir pour les images d’un site web ?
S’il existe de nombreux formats d’image, il n’est pas toujours facile de choisir le bon pour un élément spécifique de votre page web. Il existe trois formats d’image couramment utilisés : .jpg, .png et .gif. ayant chacun des fonctions différentes.
Le format .jpg est le plus utilisé puisqu'il est le plus léger tout en conservant une qualité correcte à l'écran. Le format .png est quant à lui plus lourd, mais permet de créer des images avec un fond transparent pouvant ainsi s’adapter à tous les arrière-plans, ce qui est idéal pour les logos. Donc, si votre image n'est pas transparente, l'utilisation de ce format est inutile. Enfin, il y a le format .gif, qui est une séquence animée d'images et qui est évidemment beaucoup plus lourd.
Quel est le code HTML pour ajouter une image de fond sur un site web ?
La méthode adéquate pour placer une image d'arrière-plan sur une page HTML consiste à utiliser des feuilles de style, plus connues sous le nom de CSS.
Pour ajouter une image de fond à votre site web, il suffit d'utiliser la propriété background-image suivie d'une valeur : dans ce cas l'URL de l'image que nous allons utiliser comme image d'arrière-plan. Voici à quoi ressemblerait la formule :
background-image: url("/url-de-votre-image.jpg/")
Toutefois, il existe d’autres propriétés que vous pouvez utiliser pour programmer une image d’arrière-plan en HTML avec background-image : background-repeat (répétition de l’arrière-plan), background-position (position de l’arrière-plan), background-size (taille de l’arrière-plan) et background-attachment (attachement de l’arrière-plan).
Utiliser la propriété background-repeat
La propriété background-repeat répète par défaut l'image d'arrière-plan jusqu'à ce qu'elle couvre complètement la surface de l'élément qui la contient. Par exemple, si votre page web mesure 900px de haut et 900px de large, et que l'image d'arrière-plan mesure 150x150px, l'arrière-plan sera répété jusqu'à ce qu'il couvre 900px.
Par défaut, la propriété background-image a toujours la valeur repeat. C’est pourquoi lorsque vous utilisez cette propriété mais que vous ne souhaitez pas que l’image se répète, vous devez ajouter la valeur no-repeat.
Enfin, vous avez la possibilité d’ajouter la valeur repeat-y pour répéter l’image uniquement verticalement, et la valeur repeat-x pour répéter l’image uniquement horizontalement.
Utiliser la propriété background-position
Si votre image d’arrière-plan n’est pas assez grande pour remplir tout le conteneur mais vous ne souhaitez pas la répéter, vous pouvez déterminer la position de l'image d'arrière-plan à l'aide de la propriété background-position.
Par ailleurs, il est possible de déterminer cette propriété même lorsque l'image de fond occupe toute la largeur ou toute la hauteur, et modifier ainsi sa position sur l'axe vertical ou horizontal.
Utiliser la propriété background-size
Il est également possible de définir la taille de l'image d'arrière-plan, si celle-ci n'est pas répétée et n'occupe pas la totalité du conteneur. Par défaut, la taille de l'image d'arrière-plan est affichée au format maximal. Par exemple, si l'image est plus grande que le conteneur, seule une partie de l'image sera affichée. Afin de résoudre ce problème, vous pouvez définir la taille de l'image avec la propriété background-size, ainsi qu'une valeur qui peut être indiquée avec différentes mesures relatives ou absolues (rem, em, %, picas, cm, px).
Utiliser la propriété background-attachment
Cette propriété détermine le comportement de l'image d'arrière-plan pendant le défilement de la page. En d'autres termes, vous pouvez choisir si l'arrière-plan restera statique ou s'il accompagnera le défilement de la fenêtre du navigateur de l'utilisateur.
Pour que l'image reste statique, indiquez la valeur: fixed. Inversement, pour la faire défiler avec l'écran, il suffit de ne pas définir cette propriété, ou de la forcer avec la valeur scroll. Les webmasters ont pour habitude d'utiliser une combinaison de fonds ayant des comportements différents ou similaires.
Conclusion
Avec toutes les start-ups françaises qui voient le jour tous les mois, il serait dommage que celles-ci perdent en visibilité suite à une mauvaise optimisation de leur site web. Vous l’aurez compris, les images jouent un grand rôle dans l’expérience utilisateur et l’attrait d’une page web. Mais elles sont tout aussi importantes pour la visibilité et le référencement d’un site sur le web, d’où l’intérêt d’optimiser ses images pour le web, de bien les choisir et de se munir des bons outils pour les retoucher.
prochain article