Les arrière-plans des sites web sont comme l’air. Ils font partie de notre vie quotidienne, mais nous les remarquons rarement, sauf si quelque chose ne va pas. Comme chaque respiration, l’image d’arrière-plan d’un site web est cruciale pour le succès et la longévité de votre site ; elle améliore les performances de tous les autres composants.
Votre image de fond de site web est plus qu’une jolie photo. Il a un impact important sur l’expérience globale de l’utilisateur. Il peut devenir un excellent outil de narration qui incitera votre public à vous suivre.
C’est pourquoi le choix d’image de fond de site web est si important, qu’il s’agisse d’un simple bloc de couleur, d’une image réelle ou même d’une vidéo. Vous trouverez ci-dessous un guide sur le choix des images d’arrière-plan pour les sites web afin de vous aider à prendre une décision.:
Voici nos suggestions pour choisir une image de fond de site web :
- La haute résolution est indispensable
- Compléter l’image de votre marque
- Soyez conscient des contrastes
- L’accessibilité est une priorité
- Il convient d’utiliser des textures subtiles et sans couture.
- Pensez à utiliser une variété d’écrans et de dispositifs.
- Les personnes réelles doivent être mises en avant
- Optimisez les images
- Sélectionnez le format de fichier image approprié
- Laissez l’image parler d’elle-même
Suggestions pour choisir une image de fond de site web
Le choix d’un bon arrière-plan de site web est une tâche difficile. Il s’agit d’un aspect important de la conception globale de votre site et il peut être difficile de faire correspondre votre marque à une image ou un design particulier. Les conseils suivants devraient vous aider à choisir une image de fond de site web appropriée.
1. La haute résolution est indispensable
La pire erreur que vous puissiez faire est de choisir un arrière-plan de faible résolution. Dans ce cas, l’arrière-plan est soit granuleux et de faible résolution, soit vous devez vous contenter d’un style de tuiles qui ressemble à une image d’arrière-plan Win95.
Les images haute résolution rendent votre site web plus attrayant et plus professionnel pour les visiteurs.
S’il est judicieux de payer pour une photographie et un design personnalisés si vous pouvez vous le permettre, la bonne nouvelle est qu’il existe de nombreuses photos haute résolution disponibles en ligne. Beaucoup sont gratuits, d’autres ne coûtent que quelques euros.
2. Compléter l’image de votre marque
L’un des problèmes rencontrés par de nombreuses entreprises est qu’elles aiment le fond ou la disposition d’un site web et tentent ensuite de l’imposer à leur marque. Ce n’est pas toujours une bonne idée. Ce n’est jamais une bonne idée de choisir une image de fond de site web et de développer ensuite la marque autour de cette image.
Il convient plutôt de bien connaître l’identité de votre marque afin de choisir un arrière-plan adapté à vos besoins.
3. Soyez conscient des contrastes
L’image d’arrière-plan de votre site web n’est rien d’autre qu’un arrière-plan. Il ne doit pas dominer votre site web ou votre texte. Soyez attentif au contraste visuel entre le premier plan et l’arrière-plan. Si vos titres et votre texte se confondent, il faut changer quelque chose.
Les textes de votre site web doivent se détacher de la page. Par conséquent, il est toujours bon de tenir compte de la typographie et de la palette de couleurs lors du choix d’un arrière-plan. Si vous n’y arrivez pas, essayez une autre option.
Image tirée de Strikingly
4. L’accessibilité est une priorité
Lors du choix d’une image de fond de site web, la première considération est de savoir comment elle affecte la lecture de l’article. Vous devez vous assurer que le texte est lisible et que le rapport de contraste entre le texte et le fond est approprié.
Si vous n’êtes pas sûr des aspects de l’accessibilité mentionnés ci-dessus, mais que vous souhaitez tout de même utiliser une image, vous pouvez prendre certaines mesures pour que ça fonctionne.
Pour améliorer la lisibilité des informations, vous pouvez utiliser des outils d’édition d’images ou même des CSS pour modifier des éléments tels que l’opacité et le contraste ou appliquer des masques de calque. Il est aussi important de choisir la bonne police et la bonne taille de police pour le matériel.
5. Il convient d’utiliser des textures subtiles et sans couture.
Les textures peuvent ajouter une touche de classe à l’aspect général de votre site web. Recherchez des textures sans couture, ce qui signifie qu’elles peuvent répéter un motif à l’écran pour donner l’impression d’une seule grande image, qu’elle soit utilisée comme fond de page ou pour une zone de contenu spécifique.
Si l’on peut parfois utiliser une image de fond de site web texturée en taille réelle, les images plus détaillées ne sont pas toujours adaptées aux différentes tailles d’écran. En outre, les photos dont les fichiers sont volumineux peuvent ralentir le temps de chargement des pages.
À moins que vous ne cherchiez à obtenir un aspect plus brutaliste, la subtilité est aussi une caractéristique souhaitable dans une texture. L’objectif est d’éviter de submerger les consommateurs avec de grands motifs. Recherchez des images aux lignes et aux couleurs plus douces qui se démarqueront du matériau.
6. Pensez à utiliser une variété d’écrans et de dispositifs.
Selon la taille de l’écran, la zone visible de l’arrière-plan peut être considérablement modifiée. Cela peut être très visible sur les photographies. Ce qui semble parfait sur un grand écran peut paraître terrible sur un smartphone. Des éléments importants d’une image peuvent être coupés, ce qui entraîne une perte de contexte.
Une partie du problème ici est la sélection des photos, et une autre partie est le codage. Tout d’abord, recherchez les photos qui respectent le rapport d’aspect spécifié du conteneur parent (paysage, portrait, carré). Elles ont plus de chances de s’adapter correctement aux petits écrans.
Image de site d’utilisateur Strikingly
7. Les personnes réelles doivent être mises en avant
Choisir une image de fond de site web avec des personnes est une méthode formidable pour augmenter potentiellement le taux de conversion de votre site web.
Dans la mesure du possible, évitez d’utiliser des photos de stock et utilisez plutôt des personnes réelles. Vous ne voulez pas que votre image se retrouve sur des centaines d’autres sites web, ce qui pourrait arriver si vous utilisez une photo de stock.
Sur leur page web, Warby Parker ne se contente pas de mettre en scène deux personnes, mais ils montrent aussi à leurs consommateurs à quoi ressembleront leurs lunettes sur de vraies personnes, plutôt que de les présenter comme des objets autonomes.
8. Optimisez les images
Il vaut la peine de prendre le temps d’optimiser chacune des images que vous téléchargez, que vous ayez un blog, une entreprise en ligne ou simplement un site web standard que vous souhaitez améliorer avec des photographies de haute qualité.
Pour commencer, assurez-vous que les photographies sont en bon état comme nous l’avons décrit précédemment. Ensuite, en vous assurant que le fichier image est nommé correctement, vous pouvez faire en sorte qu’elles soient facilement indexées par les moteurs de recherche.
Avez-vous déjà enregistré une image avec les noms « Photo1. Jpg » ou « Capture d’écran 2019-03-18 à 16 h 13 min 42 s ?. » Lorsqu’il s’agit de votre image de fond de site web, c’est un gros non-non.
Soyez cohérent avec votre nom et évitez d’utiliser la ponctuation ou les espaces. Il est aussi préférable d’utiliser des traits d’union plutôt qu’un trait de soulignement dans le nom.
9. Sélectionnez le format de fichier image approprié
Vous n’êtes pas sûr du type de fichier image à utiliser ? Nous allons en savoir plus à ce sujet.
- JPG : ces fichiers sont idéaux pour les images car ils peuvent gérer une large gamme de couleurs tout en conservant une taille de fichier modeste. Lorsque cette image est utilisée, vous n’aurez pas à vous soucier d’avoir un fichier volumineux, ce qui accélérera le temps de chargement.
- PNG : ce type de fichier est le meilleur pour les graphiques, en particulier lorsqu’il y a de vastes ou plates étendues de couleurs.
La plupart des designs, infographies, images à fort contenu textuel et logos entrent dans cette catégorie. Les PNG peuvent aussi avoir une toile de fond transparente (ce qui est idéal pour les logos). Si possible, enregistrez votre PNG au format « 24 bits » pour une meilleure qualité et un affichage plus varié des couleurs.
Image de site d’utilisateur Strikingly
10. Laissez l’image parler d’elle-même
Une image de fond de site web captivante suscitera l’intérêt des visiteurs de votre site. Au lieu d’un grand nombre de mots sur votre site web, utilisez une image qui transmet le message. Même si l’écriture est agréable à lire, tous vos clients n’y consacreront pas le temps ou le soin nécessaires.
Ajouter des images de fond à votre site web Strikingly
Image tirée de Strikingly
Vous pouvez choisir une image de la bibliothèque Strikingly ou une image de stock de la bibliothèque Strikingly comme image de fond de site web. Vous pouvez ajouter des images, des films ou des blocs à votre toile de fond de l’une des trois façons suivantes.
Pour apprendre à ajouter des photos d’arrière-plan à votre site web Strikingly, suivez ces étapes.
- Allez dans l’éditeur de votre site et ouvrez-le.
- Sélectionnez l’option Arrière-plan. Vous pouvez utiliser soit une vidéo soit une image comme arrière-plan.
- Cliquez sur « Plus » pour voir notre bibliothèque d’images.
- Cliquez sur « Télécharger l’image » pour ajouter votre propre image de fond. Veuillez noter que nous acceptons uniquement les types de fichiers suivants : gif, jpeg, png, bmp et ico.
Lignes directrices pour le choix des images de fond
L’image de fond de site web de Strikingly est faite pour s’adapter à une variété de tailles d’écran, du moniteur à la tablette en passant par le téléphone.
Nous recommandons une taille de 1600 pixels de large par 900 pixels de hauteur pour que votre image de fond apparaisse bien sur tous les écrans. Avec prudence, incluez des photographies de personnes, de marques et d’autres informations qui ne sont pas en arrière-plan ! Pour voir comment les choses se présenteront, utilisez notre fonction « aperçu. »
Vous disposez de quelques options pour le dimensionnement et l’alignement de votre toile de fond.
- Étirer : étire votre image pour qu’elle remplisse tout l’écran, en hauteur et en largeur. C’est généralement la meilleure option, car l’image fonctionnera comme arrière-plan sur n’importe quelle taille d’écran. En revanche, si votre image comporte du contenu sur les côtés (notamment à gauche et à droite), elle risque de ne pas être visible sur les téléphones mobiles.
- Contenir : affichera l’intégralité de l’image, en veillant à ce qu’aucune partie ne soit omise. Toutefois, ça peut entraîner un certain espace blanc sur certains écrans.
- Centrer : L’image sera affichée au centre de la section et ne sera pas mise à l’échelle si vous choisissez le centre. L’arrière-plan, en revanche, présentera un espace blanc autour des bords de l’image est trop petit. Certaines parties de l’image peuvent être coupées si elle est trop grande, notamment sur les petits écrans.
- Carreau : va centrer puis répéter une image, ce qui est utile pour créer des motifs.
Conclusion
Avec tant de technologies intéressantes affectant la conception de sites, il est logique que nous ne consacrions pas autant d’attention aux images de fond de site web.
Elles jouent pourtant un rôle important dans la narration et nous aident à créer une interface utilisateur agréable. Les fonds de pleine page aident à établir le ton d’un site web, tandis que les fonds de section donnent un peu d’air à notre contenu.
Bien entendu, tout fonctionne mieux lorsque nous choisissons des photographies adaptées à nos objectifs.
Des images qui améliorent plutôt qu’elles n’entravent la capacité d’un utilisateur à consommer du contenu.
Cependant, nous devons aussi tenir compte de caractéristiques telles que la taille, le rapport hauteur/largeur et la compatibilité avec les appareils mobiles. Il est important de se rappeler que même en arrière-plan, les détails comptent.
